The following example creates the editElectronic.jsp that was created in the above example.
Note: When writing your JSP file, ensure that all tags are closed appropriately. The following example may be missing end tags due to formatting.
The pop-up page is served on both the success and error conditions. If the success condition is met, the pop-up page is closed automatically and the caller page determines the appropriate actions to take once the pop-up page is closed.
Create the
editElectronic.jsppage. For example:<%-- This page is used to edit the electronic shipping group.
param - nickname
This parameter is used to initialize shipping group from the
ShippingGroupMapContainer.
param - success
This parameter is used to close the popup panel and refresh the parent
page. This parameter is added to the request on edit form submission.
--%>
<%@ include file="/include/top.jspf"%>
<dsp:page xml="true">
<dsp:importbean var="updateShippingGroupFormHandler"
bean="/atg/commerce/custsvc/order/
UpdateElectronicShippingGroupFormHandler"/>
<dsp:importbean var="sgConfig"
bean="/atg/commerce/custsvc/ui/
ElectronicShippingGroupConfiguration"/>
<dsp:importbean bean="/atg/dynamo/droplet/Switch"/>
<dsp:importbean bean="/atg/dynamo/droplet/ErrorMessageForEach"/>
<dsp:importbean var="electronicAddressForm"
bean="/atg/commerce/custsvc/ui/fragments/order/
ElectronicAddressForm"/>
<dsp:getvalueof var="nickname" param="nickname"/>
<dsp:getvalueof var="success" param="success"/>Identify the success and error URLs for the form. For example:
<%-- forms success and error url --%>
<c:url var="successErrorURL"
context="/${sgConfig.editPageFragment.servletContext}"
value="${sgConfig.editPageFragment.URL}">
<c:param name="nickname" value="${nickname}"/>
<c:param name="${stateHolder.windowIdParameterName}"
value="${windowId}"/>
<c:param name="success" value="true"/>
</c:url>Define the layered resource bundles used. For example:
<%-- Uses layered resource bundle --%>
<dsp:layeredBundle basename="atg.commerce.csr.order.WebAppResources">
<div id="atg_commerce_csr_editShippingAddress"
class="atg_commerce_csr_popupPanel
atg_commerce_csr_addressFormPopup">
<dsp:layeredBundle basename="${sgConfig.resourceBundle}">
<fmt:message var="editPageFragmentTitle"
key="${sgConfig.editPageFragmentTitleKey}"/>
</dsp:layeredBundle>
<h2>
<c:out value="${editPageFragmentTitle}"/>
</h2>
<div class="atg_commerce_csr_popupPanelCloseButton"></div>Within the
<div class>, define what happens whether or not there is an error to display. For example:<div>
<%--When there is an error, display the error on the page. --%>
<dsp:droplet name="Switch">
<dsp:param bean=
"UpdateElectronicShippingGroupFormHandler.formError"
name="value"/>
<dsp:oparam name="true">
<br/><br/>
<span class="atg_commerce_csr_common_content_alert">
<fmt:message key="common.error.header"/></span>
<br>
<span class="atg_commerce_csr_common_content_alert">
<UL>
<dsp:droplet name="ErrorMessageForEach">
<dsp:param bean=
"UpdateElectronicShippingGroupFormHandler.formExceptions"
name="exceptions"/>
<dsp:oparam name="output">
<LI>
<dsp:valueof param="message"/>
</dsp:oparam>
</dsp:droplet>
</UL>
</span>
</dsp:oparam>
<dsp:oparam name="false">
<c:if test="${success}">
<%--When there is no error on the page submission, close the
popup page and refresh the parent page. The parent page
only will refresh if the result parameter value is ok.
--%>
<script type="text/javascript">
hidePopupWithResults
('atg_commerce_csr_editShippingAddress',{result : 'ok'});
</script>
</c:if>
</dsp:oparam>
</dsp:droplet>
</div>Identify the form components to use. For example:
<c:set var="formId" value="mycsrEditShippingAddressForm"/>
<dsp:form id="${formId}"
formid="${formId}">
<dsp:input type="hidden" priority="-10" value=""
bean="UpdateElectronicShippingGroupFormHandler.
updateShippingGroup"/>
<dsp:input type="hidden" value="${successErrorURL }"
bean="UpdateElectronicShippingGroupFormHandler.
updateShippingGroupErrorURL"/>
<dsp:input type="hidden" value="${successErrorURL }"
bean="UpdateElectronicShippingGroupFormHandler.
updateShippingGroupSuccessURL"/>
<dsp:input type="hidden"
bean="UpdateElectronicShippingGroupFormHandler.
shippingGroupByNickname"
value="${fn:escapeXml(nickname) }" priority="5"/>
<c:if test="${empty updateShippingGroupFormHandler.shippingGroup }">
<dsp:setvalue bean="UpdateElectronicShippingGroupFormHandler.
shippingGroupByNickname"
value="${fn:escapeXml(nickname) }"/>
</c:if>
<ul class="atg_dataForm atg_commerce_csr_addressForm">
<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.workingShippingGroup.
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>
</ul>
<div class="atg_commerce_csr_panelFooter">
<input type="button"
name="${formId}SaveButton"
value="<fmt:message key='common.save' />"
onclick="custom.commerce.csr.order.shipping.editShippingAddress
('${successErrorURL}');return false;"
dojoType="atg.widget.validation.SubmitButton"/>
<%-- When the user clicks on the cancel button, hide the popup panel.
--%>
<input type="button"
value="<fmt:message key='common.cancel'/>"
onclick="hidePopupWithResults
( 'atg_commerce_csr_editShippingAddress', {result :
'cancel'});return false;"/>
</div>
</dsp:form>
<%-- end of editShippingAddressForm --%>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:
<%--) The following code is for JS validation--%>
<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}").addAddressButton.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>Save the
editElectronic.jspfile.
