Custom product form 
The gadget spec URL could not be found

In this section, we will be implementing a complex custom form to maintain product, product color and product size details. The form that we will be implementing using the "HTML Forms" perspective is the same as the product form that we implemented using the "Forms" perspective.

The product form consists of the following:

  • Input form elements for product code, product description, product price, category code, and customizable. .
  • One-Many form for maintaining product color details.
  • One-many form for maintaining product size details.
  • Buttons to add and delete the product, product color and product size details.
The specification for the product form is the same as that of the customer form, except that this has an additional one-many form for the child model (ProductSize) of the product model's child model (ProductColor).

Here's the code to create the custom form to maintain product details described above.



<style>
.h22{height:22px;}
.h30{height:30px;}
.w40{width:40px;min-width:40px;}
.w60{width:60px;min-width:60px;}
.w75{width:75px;min-width:75px;}
.w100{width:100px;min-width:100px;}
.w120{width:120px;min-width:120px;}
.w150{width:150px;min-width:150px;}
.w200{width:200px;min-width:200px;}
.w400{width:400px;min-width:400px;}
</style>

<div>
   <div class="Form_Title">Product Form</div>
   <br>

   <table cellpadding=0 cellspacing=0  style='border-collapse:collapse'>
      <tr>
         <td class='h30 w150 vmiddle hleft Form_Elements'>
         Product Code
         </td>

         <td class='h30 w150 vmiddle hleft'>
         <input type="text" class="h22 vmiddle hleft textbox Form_Elements" name="ProductCode" value="${getRoot().getValue('ProductCode')}" data-id='${getRoot().getValue("SheetId")}' onchange='${id}.update(this)'/>
         </td>
      </tr>

      <tr>
         <td class='h30 w150 vmiddle hleft Form_Elements'>
         Product Description
         </td>

         <td class='h30 w150 vmiddle hleft'>
         <input type="text" class="h22 vmiddle hleft textbox Form_Elements" name="ProductDescription" value="${getRoot().getValue('ProductDescription')}" data-id='${getRoot().getValue("SheetId")}' onchange='${id}.update(this)'/>
         </td>
      </tr>

      <tr>
         <td class='h30 w150 vmiddle hleft Form_Elements'>
         Product Price
         </td>

         <td class='h30 w150 vmiddle hleft'>
         <input type="text" class="h22 vmiddle hleft textbox Form_Elements" name="ProductPrice" value="${getRoot().getDisplayValue('ProductPrice','##.##')}" data-id='${getRoot().getValue("SheetId")}' data-format='##.##' onchange='${id}.update(this)'/>
         </td>
      </tr>

      <tr>
         <td class='h30 w150 vmiddle hleft Form_Elements'>
         Category Code
         </td>

         <td class='h30 w150 vmiddle hleft'>
         <input type="text" class="h22 vmiddle hleft combobox Form_Elements" name="CategoryCode" value="${getRoot().getDisplayValue('CategoryCode','Text')}" data-format='Text' data-id='${getRoot().getValue("SheetId")}' onclick='${id}.dynamicSearch(this)'/>
         </td>
      </tr>

      <tr>
         <td class='h30 w150 vmiddle hleft Form_Elements'>
         Customizable
         </td>

         <td class='h30 w150 vmiddle hleft'>
         <input type="checkbox" class="h22 vmiddle hleft checkbox Form_Elements" name="Customizable" value="${getRoot().getValue('Customizable')}" data-id='${getRoot().getValue("SheetId")}' data-staticlist="[{'label':'True','idval':1.0},{'label':'False','idval':0.0}]" onchange='${id}.update(this, {'Customizable': parseValue(this.checked)})'/>
         </td>
      </tr>     
   </table>
</div>

<br>

<div>

<input type='button' name='Workflow' value='Save' class='h22 w60 button' data-id='${getRoot().getValue("SheetId")}' data-send='true'  data-status='Product details saved successfully!' data-target='Worktop' data-validate='true' onclick = "${id}.invoke(this)"/>

<input type='button' value='Delete' class='h22 w60 button' data-id='${getRoot().getValue("SheetId")}' data-send='true'  data-status='Product details deleted successfully!' data-target='Worktop' data-validate='true' onclick='${id}.remove(this)'/>

</div>

In the product form, we have additionally used the dynamic dropdown list for category code. The "dynamicSearch" controller method must be used to fetch the dropdown list values for category code from the "Category" data model.


Now that we have added the form elements for maintaining the product details, let's get started with the required form elements for maintaining product color and product size details. Firstly, we will add a button to create a new instance in the "CustomerAddress" model. 
Required specifications for the action element to create a new child instance (ProductColor and : 
  • data-path: This parameter must be used to specify the path to access the child model where a new instance is to be created. The format for specifying the data path is "/referenceCellName/childModelname"
  • "onclick" event has been used to invoke the "create" controller method to add a new child model instance.

<a href='javascript:void(0);' data-id='${getRoot().getValue("SheetId")}' data-path="/ProductCode/ProductColor"  data-send='true'  onclick="${id}.create(this)"><img class='image NormalFormCell' src='/runtime/images/create.png'/></a>



<a href='javascript:void(0);' data-id='${instance.getValue("SheetId")}' data-path="/ProductCode/ProductSize" data-send='true'  onclick="${id}.create(this)"><img class='image NormalFormCell' src='/runtime/images/create.png'/></a>   
Required specifications for the action element to delete an existing child instance (ProductColor): 
    • data-path: This parameter must be used to specify the path to access the child model where a new instance is to be created. The format for specifying the data path is "/referenceCellName/childModelname/SheetId" where SheetId is the SheetId of the child instance to be deleted.
    • "onclick" event has been used to invoke the "remove" controller method to delete the child model instance.

    <a href='javascript:void(0);' data-id='${instance.getValue("SheetId")}' data-path='/ProductCode/ProductColor/${instance.getValue('SheetId')}' data-send='true'  onclick="${id}.remove(this)"><img class='image NormalFormCell' src='/runtime/images/delete.png'/></a>


    Required specifications for the action element to delete an existing second level child instance (ProductSize): 
      • data-path: This parameter must be used to specify the path to access the child model where a new instance is to be created. The format for specifying the data path is "parentSheetId/referenceCellName/childModelname/childSheetId" where parentSheetId is the SheetId of the parent instance and childSheetId is the SheetId of the instance to be deleted.
      • "onclick" event has been used to invoke the "remove" controller method to delete the child model instance.

      <a href='javascript:void(0);' data-id='${sizeinstance.getValue("SheetId")}' data-path='/${instance.getValue('SheetId')}/ProductCode/ProductSize/${sizeinstance.getValue('SheetId')}' data-send='true'  onclick="${id}.remove(this)"><img class='image NormalFormCell' src='/runtime/images/delete.png'/></a>


        
      Here's the code to maintain product color and product size details.


      <table cellpadding=0 cellspacing=0  style='border-collapse:collapse'>
         <tr>
            <td class='h30 w40'>
            <a href='javascript:void(0);' data-id='${getRoot().getValue("SheetId")}' data-path="/ProductCode/ProductColor"  data-send='true'  onclick="${id}.create(this)"><img class='image NormalFormCell' src='/runtime/images/create.png'/></a>
            </td>

            <td class='h30 w400 Form_Title'>
            Product Colour and Size
            </td>
         </tr>
      </table>

      <table cellpadding=0 cellspacing=0  style='border-collapse:collapse'>
         <tr class="List_Heading">
            <td class='h22 w120 vmiddle hcenter List_Heading Form_Elements'>
            Attachment
            </td>

            <td class='h22 w120 hcenter List_Heading Form_Elements'>
            Product Colour
            </td>

            <td class='h22 w120 vmiddle List_Heading hcenter Form_Elements'>
            Add Product Colour
            </td>

            <td class='h22 w120 vmiddle hcenter List_Heading Form_Elements'>
            Remove Colour(?)
            </td>
         </tr> 

         <tr class="h22"></tr>

         {for instance in getRoot().getList('ProductCode','ProductColor','CreatedAt',false)}
         <tr>
            <td class='h30 w150 vtop hcenter Form_Elements'>
            {if instance.getValue('Attachment')}
               <a href='${getAttachmentUrl(instance)}/attachment' target='_blank'>${instance.getValue('Attachment')}</a>
            {elseif selectedAttachment==instance.getValue('SheetId')}
                <input type='file' name='Attachment' data-id='${instance.getValue("SheetId")}' onchange='${id}.updateAttach(this)'/>
            {else}
                <a href='javascript:void(0);' onclick="${id}.setSelectedAttachment('${instance.getValue('SheetId')}')">Attach</a>
            {/if}
            </td>

            <td class='h30 w120 vtop hcenter Form_Elements'>
            <input type="text" class="h22 hleft textbox Form_Elements" name="ProductColor" value="${instance.getValue('ProductColor')}" data-id='${instance.getValue("SheetId")}' onchange='${id}.update(this)'/>
            </td>
                 
            <td class='h30 w120 vtop hcenter Form_Elements'>
            <table cellpadding=0 cellspacing=0  style='border-collapse:collapse'>
               <tr>
                  <td class='h22 w60 vtop hcenter'>
              <a href='javascript:void(0);' data-id='${instance.getValue("SheetId")}' data-path="/ProductCode/ProductSize" data-send='true'  onclick="${id}.create(this)"><img class='image NormalFormCell' src='/runtime/images/create.png'/></a>   
                  </td>
               </tr>
            </table> 

            <table cellpadding=0 cellspacing=0  style='border-collapse:collapse'>
               <tr>
                  <td class='h22 w100 vmiddle hcenter Form_Elements'>
                  Product Size
                  </td>

                  <td class='h22 w100 vmiddle hcenter Form_Elements'>
                  Remove Size(?)
                  </td>
                </tr> 

               {for sizeinstance in instance.getList('ProductCode','ProductSize','CreatedAt',false)}
               <tr>
                  <td class='h22 w100 vmiddle hcenter Form_Elements'>
                  <input type='text' class='vmiddle hcenter textbox Form_Elements' name='ProductSize' data-id='${sizeinstance.getValue("SheetId")}' data-format='Text' value='${sizeinstance.getValue('ProductSize')}' onchange='${id}.update(this)'/>
                  </td>

                  <td class='h22 w100 vmiddle hcenter Form_Elements'>
                  <a href='javascript:void(0);' data-id='${sizeinstance.getValue("SheetId")}' data-path='/${instance.getValue('SheetId')}/ProductCode/ProductSize/${sizeinstance.getValue('SheetId')}' data-send='true'  onclick="${id}.remove(this)"><img class='image NormalFormCell' src='/runtime/images/delete.png'/></a>
                  </td>
               </tr>
               {/for}
            </table>

            </td>     

            <td class='h30 w100 vtop hcenter Form_Elements'>
            <a href='javascript:void(0);' data-id='${instance.getValue("SheetId")}' data-path='/ProductCode/ProductColor/${instance.getValue('SheetId')}' data-send='true'  onclick="${id}.remove(this)"><img class='image NormalFormCell' src='/runtime/images/delete.png'/></a>
            </td>
         </tr>

         <tr class="h22"></tr>
      {/for}
      </table>


      Boundary must be defined for this form because this form processes the data from the current model (Product) and its child model (ProductColor). Additionally, it also processes the data from the child model (ProductSize) of Product model's child mode (ProductColor). To define the boundary for this form, 

      • Open the product form 
      • Click on the "Boundary" tab at the bottom of the HTML forms perspective.
      • Click on the "One-Many" icon and select the checkbox for "ProductColor(ProductCode)".
      • Click on the "One-Many" icon for "ProductColor(ProductCode)" and select the checkbox for "ProductSize(ProductCode)".

      You can use the preview option to validate the product form design. The product form will be displayed as shown in the screen capture.


      ċ
      ProductForm.txt
      (7k)
      Boobesh Ramalingam,
      Oct 11, 2011, 9:09 PM
      v.1