3 Forms Tutorial: Add Templates

You add a new template, user.editinterests.isml, that shows the interest and newsletter choices on the browser.

  1. In UX Studio, from the Navigator view, select the cartridge/templates/default/account/user directory.
  2. Click File > New and select ISML Template.
  3. Select the parent folder (template/account/user).
  4. Enter the template name editpreferences.
  5. Click Finish.
  6. Use the following to create the contents:
    <!--- TEMPLATENAME: editpreferences.isml renders fields
    			on browser --->
    		<isdecorate template="account/pt_account">
    		 <iscontent type="text/html" charset="UTF-8"
    			compact="true">
    		 <!-- Start: user/editpreferences -->
    		 <isinclude template="util/modules">
    		 <div id="service">
    		
    			<h1>${Resource.msg('user.editpreferences.001','user',null)}</h1>
    		 <div class="editprofile">
    		
    			<h2>${Resource.msg('user.editpreferences.002','user',null)}</h2>
    		 <form action="${URLUtils.httpsContinue()}"
    			method="post" id="EditProfileForm">
    		
    			<h3>${Resource.msg('user.editpreferences.003','user',null)}</h3>
    		 <div id="editprofile">
    		 <fieldset>
    		 <table class="simple">
    		 <tr>
    		
    			<isinputfield formfield="${pdict.CurrentForms.
    			preferences.outerwear}"
    			type="checkbox">
    		
    		 </tr>
    		 <tr>
    		
    			<isinputfield formfield="${pdict.CurrentForms.
    			preferences.footwear}"
    			type="checkbox">
    		
    		 </tr>
    		 </table>
    		 </fieldset>
    		 </div>
    		
    			<h3>${Resource.msg('user.editpreferences.004','user',null)}</h3>
    		 <div id="editprofile">
    		 <fieldset>
    		 <table class="simple">
    		 <tr>
    		
    			<isinputfield formfield="${pdict.CurrentForms.
    			preferences.newsletter}"
    			type="checkbox">
    		
    		 </tr>
    		 </table>
    		 ...
    		 </fieldset>
    		 <fieldset>
    		
    			<input class="image imageright" type="image"
    			name="${pdict.CurrentForms.
    			preferences.apply.htmlName}"
    			value="Edit" src="${URLUtils.staticURL('/images/bttn_apply.gif')}"
    			/>
    		
    		 </fieldset>
    		 </div> 
    		 </form>
    		 </div>
    		 </div>
    		 <!-- End: user/editpreferences -->
    		</isdecorate>