When you create new forms, you must also create the appropriate files, including the form handler and JSP files. The following example shows how to create an electronic shipping group in Commerce Service Center by:
Creating a form that creates a new electronic shipping group
Defining and identifying the form’s components
Identifying the resource bundles
Defining the submit button calls
Configuring form validation
For general information on creating forms, form handlers and working with JSP files, refer to the ATG Page Developer's Guide and the ATG Platform Programming Guide. For detailed information on all Service Center form handlers, refer to the ATG API Reference for Commerce Service Center :
Create a new JSP file in your customization directory. Define the components of the form. For example:
<%@ include file="/include/top.jspf" %>
<dsp:page xml="true">
<dsp:importbean bean="/atg/commerce/custsvc/order/
CreateElectronicShippingGroupFormHandler"/>
<dsp:importbean bean="/atg/dynamo/droplet/Switch"/>
<dsp:importbean var="addElectronicShippingGroup"
bean="/atg/commerce/custsvc/ui/fragments/order/
AddElectronicShippingGroup"/>
<dsp:importbean var="electronicShippingGroupConfig"
bean="/atg/commerce/custsvc/ui/
ElectronicShippingGroupConfiguration"/>
<c:set var="formId" value="mycsrAddElectronicAddress"/>Define the URLs that are called on success and error conditions. For example:
<svc-ui:frameworkUrl var="successURL"
panelStacks="cmcShippingAddressPS"/>
<svc-ui:frameworkUrl var="errorURL" panelStacks="cmcShippingAddressPS"/>Define the form and the elements used by the form. For example:
<dsp:setLayeredBundle basename="atg.commerce.csr.order.WebAppResources"/>
<dsp:form id="${formId}" formid="${formId}">
<dsp:input type="hidden" priority="-10" value=""
bean="CreateElectronicShippingGroupFormHandler.
newElectronicShippingGroup"/>
<dsp:input type="hidden" value="${errorURL }" name="errorURL"
bean="CreateElectronicShippingGroupFormHandler.
newElectronicShippingGroupErrorURL"/>
<dsp:input type="hidden" value="${successURL }" name="successURL"
bean="CreateElectronicShippingGroupFormHandler.
newElectronicShippingGroupSuccessURL"/>
<ul class="atg_dataForm atg_commerce_csr_addressForm"
id="atg_commerce_csr_neworder_newShippingAddress">
<li class="atg_commerce_csr_address">
<span class="atg_commerce_csr_fieldTitle">
<label class="atg_messaging_requiredIndicator">
<span class="requiredStar">*</span>
<fmt:message key="newAddress.email" />
</label>
</span>
<dsp:input id="${formId}_emailAddress" type="text"
bean="/atg/commerce/custsvc/order/
CreateElectronicShippingGroupFormHandler.
electronicShippingGroup.emailAddress" size="25" maxlength="50">
<dsp:tagAttribute name="dojoType"
value="atg.widget.form.ValidationTextBox" />
<dsp:tagAttribute name="trim" value="true" />
<dsp:tagAttribute name="required" value="true" />
</dsp:input>
</li>Provide the submit button call. For example,
<li class="atg_svc_formActions">
<div class="atg_commerce_csr_panelFooter">
<input type="button" name="myaddAddressButton"
id="myaddAddressButton"
class="atg_commerce_csr_activeButton"
onclick="custom.commerce.csr.order.shipping.addElectronicAddress();
return false;"
value="<fmt:message key="newOrderSingleShipping.addShippingAddress.
button.addAddress"/>
form="${formId}"
dojoType="atg.widget.validation.SubmitButton"
/>
</div>
</li>
....
</ul>
</dsp:form>If you are using JSP validation, provide the validation function. When the form or page is loaded, the validation routine tracks user input and validates each input field. If the validation is successful, the submit button is enabled:
<script type="text/javascript">
var ${formId}Validate = function () {
var disable = false;
<c:if test="${!empty isDisableSubmit}">disable =
${isDisableSubmit}();</c:if>
<c:if test="${!empty validateIf}">if (${validateIf}) {</c:if>
if (!dijit.byId("${formId}_emailAddress").isValid()) disable =
true;
<c:if test="${!empty validateIf}">}</c:if>
dojo.byId("${formId}").myaddAddressButton.disabled = disable;
};
_container_.onLoadDeferred.addCallback(function () {
${formId}Validate();
atg.service.form.watchInputs("${formId}", ${formId}Validate);
atg.keyboard.registerFormDefaultEnterKey("${formId}",
"addAddressButton", "buttonClick");
});
_container_.onUnloadDeferred.addCallback(function () {
atg.service.form.unWatchInputs('${formId}');
atg.keyboard.unRegisterFormDefaultEnterKey("${formId}");
});
</script>
</dsp:page>Once you have created the form, create a customized JavaScript file to identify the submit action for your new form. For example:
custom.commerce.csr.order.shipping.addElectronicAddress = function (){
atgSubmitAction({form:dojo.byId("mycsrAddElectronicAddress")});
};
This example creates a form similar to this:
