Include Form Element
The <include> element lets you build re-usable form definitions and then share them among other form definitions and templates. When you specify an <include> element in a form definition, you can access the included form and its properties within a template as if they were part of the enclosing form. For example, with address information, instead of defining the same set of fields in multiple places, you can define the form once and reuse it.
The <include> element is represented by the dw.web.FormGroup API class.
| Attribute | Description |
|---|---|
| formid | The identifier of the form. |
| name | The name of the form to include. |
| binding | If a business object is assigned to the Field, the property name to read the value out of the business object or to set. Also used by the pipelets UpdateFormWith Object and UpdateObjectWithForm. |
| validation | Salesforce B2C Commerce script expression that resolves to
a custom validation function provided by a B2C Commerce Script Module. The referenced function can return a
dw.web.FormElementValidationResult object. The
validation attribute was added in version 16.1.
|
Examples
This is an example of calling a form within a form using an <include> element (in the billing form):
<!-- fields for CreditCard selection -->
<include formid="creditcard" name="creditcard"/>
<list formid="creditcards">
<include formid="card" name="creditcard"/>
<action formid="usethiscard" label="Use this credit card" valid-form="false"/>
</list>The billing form uses the credit card fields as defined in the credit card form to create an ordered list of credit card information.
This is a snippet of the creditcart form:
<field formid="type" label="forms.creditcard.type.label" type="string" mandatory="true" binding="creditCardType"
missing-error="forms.creditcard.type.missing-error">
<options>
<option optionid="Visa" value="Visa" label="creditcard.visa"/>
<option optionid="American Express" value="Amex" label="creditcard.amex"/>
<option optionid="Master" value="Master" label="creditcard.mastercard"/>
<option optionid="Discover" value="Discover" label="creditcard.discover"/>
</options>
</field>This is a snippet of the ISML template (checkout.billing) that renders the credit card information in the context of the billing page.
<select name="${pdict.CurrentForms.billing.paymentMethods.creditCardList.htmlName}">
<option value="" selected="selected">
${Resource.msg('forms.checkout.creditcardlist.select','forms',null)}</option>
<isif condition="${empty(pdict.AvailableCreditCards)}">
<option value="">
${Resource.msg('forms.checkout.creditcardlist.nocards','forms',null)}
</option>
<iselse>
<isloop items="${pdict.AvailableCreditCards}" var="creditCardInstr">
<option value="${creditCardInstr.UUID}">(<isprint value="${creditCardInstr.creditCardType}">)
<isprint value="${creditCardInstr.maskedCreditCardNumber}"> -
${Resource.msg('forms.checkout.creditcardlist.expiration','forms',null)}
<isprint value="${creditCardInstr.creditCardExpirationMonth}" formatter="00" />.
<isprint value="${creditCardInstr.creditCardExpirationYear}" formatter="0000" />
</option>
</isloop>
</isif>
</select>This is the generated HTML code (click View > Source on the browser):
<div id="paymentmethods">
<div class="paymentmethods">
<label for="is-CreditCard">Credit Card:</label>
<input id="is-CreditCard" type="radio" value="CreditCard"
name="dwfrm_billing_paymentMethods_selectedPaymentMethodID" checked="checked"/>
<label for="is-PayPal">Pay Pal:</label>
<input id="is-PayPal" type="radio" value="PayPal" name="dwfrm_billing_paymentMethods_selectedPaymentMethodID"/>
<label for="is-BML">Bill Me Later:</label>
<input id="is-BML" type="radio" value="BML" name="dwfrm_billing_paymentMethods_selectedPaymentMethodID"/>
</div>When you have included one form within another, you can reference the included form's fields using the basic tree structure, for example:
billing_paymentMethods_selectedPaymentMethodID.