Using Patterns and Wizards

Inserting a Pattern

To insert a pattern for an HTMLBusiness function:

1. Select the required HTML template and go to change mode.

2. Click on Tag Browser in the navigation area of SE80.

3. Restrict your selection by choosing the listbox entry Tag in ITS HTML Templates.

4. Select the HTMLBusiness function from the tree display.

5. Insert this function in the right place in the editor using Drag & Drop

   The system inserts the source code needed to call the HTMLBusiness function you have chosen at the correct position in the HTML template. Note that the function's optional parameters are commented out.

Example: Inserted pattern for a non-editable field.

`SAP_TemplateNonEditableField("id"
    <!--,fieldLabel=""-->
    <!--,fieldLabelWidth=""-->
    <!--,type="SAP_WEBGUI""-->
    <!--,value=""-->
    <!--,size=""-->
    <!--,inspectionText=""-->
    <!--,width=""-->
    <!--,paddingTop=0-->
            

Using Wizards

To start a wizard:

1. Select the required HTML template and go to change mode.

2. Click on Tag Library in the navigation area of SE80.

3. Restrict your selection by choosing the listbox entry Tag in ITS HTML Templates.

4. Choose the wizard you want to use from the tree display and insert it into the HTML template using Drag & Drop.

5. The wizard is started in a separate dialog box and will guide you until you are finished.

6. Choose Complete to trigger generation of the source code.

   The system inserts this source code for the HTMLBusiness functions or other functions (JavaScript functions) into the HTML template.

<script language="JavaScript">
function myName_onClick() {
    document.myName_form.elements['~event'].value = 'myEvent';
    document.myName_form.submit();
  }
</script>

<form  name="maName_form"
       action="`wgateURL()`"
       method="post">
  <input type="hidden" name="~event" value="">
  `SAP_TemplateUpstateButton("myName_BUTTON"
    <!--,type="SAP_WEBGUI"-->
    <!--,buttonLabel=""-->
    ,onclick="myName_onClick()"
    <!--,quickinfo=""-->
    <!--,disableOnClick=""-->
    <!--,enableDownState=""-->
    <!--,state="enabled"-->)`
</form>