In CRM.COM software, we use a mechanism embedded in our framework to dynamically generate the HTML code of the pages, the Page Generator. Using a description language we define the components and the layout of the pages which is in XML format. These XML files are parsed by the Page Generator to generate the HTML code and return it to the browser that issued the request.

The main types of files we use in the software are:

Summary XML pages
Data Entry XML pages
- Definition XML files
- Layout XML files
Search XML files (Datasets)

Summary Pages

Summary pages are used to display multiple records in a tabular form. They give the ability to the user to search for a specific record in the database by specifying a set of criteria.

The user is also able to setup his summary page by specifying a number of other parameters such as the fields that are displayed on the summary page, how the records are ordered, which filters are visible , etc...

In this tutorial, we are going to create a summary page that lists Installed Item Types.

Creating the Summary Page XML

To create a new summary page, we need to create a single .xml file that will define our summary page.

Before proceeding with the creation of the summary page, it is required that you read the summary page documentation found here.

The first thing to do is to create a .xml file located in ../pages/summary/modulename directory.

In this case, we create a directory named ../pages/summary/inventory and then we create a new XML file named installedItemTypeSummary.xml as follows.

Installed Item Type Summary Page XML

<summary>
    <title>Installed Item Types</title>
     <sql>FROM INSTALLEDITEMTYPES
         LEFT OUTER JOIN PRODUCTS ON PRODUCTS.ProdID=INSTALLEDITEMTYPES.ProdID
         LEFT OUTER JOIN PRODUCTTYPES ON PRODUCTTYPES.ProdTypeID=INSTALLEDITEMTYPES.ProdTypeID 
         LEFT OUTER JOIN USERS CREATEDBY ON CREATEDBY.UserID=INSTALLEDITEMTYPES.InstItemTypeCreatedByUserID
        LEFT OUTER JOIN USERS UPDATEDBY ON UPDATEDBY.UserID=INSTALLEDITEMTYPES.InstItemTypeUpdatedByUserID 
        WHERE INSTALLEDITEMTYPES.INSTITEMTYPEDELETED=0
    </sql>
    <rowsperpage>100</rowsperpage>
    <primaryfield>INSTALLEDITEMTYPES.InstItemTypeID</primaryfield>
    <mainlinkfield>INSTALLEDITEMTYPES.InstItemTypeID</mainlinkfield>
    <groupby></groupby>
    <autosearch>true</autosearch>
    <hidefindbutton>false</hidefindbutton>
    <multiselect>false</multiselect>
    <userviewfilter></userviewfilter>
    
    <fieldlist>
        <field>
            <fieldname>INSTALLEDITEMTYPES.InstItemTypeName</fieldname>
            <caption>Name</caption>
            <summary>true</summary>
            <filter>true</filter>
            <fieldtype>string</fieldtype>
            <link>page.do?xml=inventory/installedItemTypeDetailBody&amp;act=itm&amp;fc=loadForm&amp;jndi=ejb/CRMUIInstalledItemType&amp;pv0=((INSTALLEDITEMTYPES.InstItemTypeID))&amp;pvc=1</link>
        </field>
        
        <field>
            <fieldname>INSTALLEDITEMTYPES.InstItemTypeAltCode</fieldname>
            <caption>Alternative Code</caption>
            <summary>true</summary>
            <filter>true</filter>
            <mouseover>false</mouseover>
            <expand>false</expand>
        </field>
        
        <field>
            <fieldname>INSTALLEDITEMTYPES.InstItemTypeDesc</fieldname>
            <caption>Description</caption>
            <summary>true</summary>
            <filter>false</filter>
            <mouseover>false</mouseover>
            <expand>false</expand>
        </field>
        
        <field>
            <fieldname>IsDefault</fieldname>
            <fieldfunction>INSTALLEDITEMTYPES.InstItemTypeDefault</fieldfunction>
            <caption>Is Default</caption>
            <fixedlookup>ejb/CRMUIInstalledItemType.getYesNoSelectBox</fixedlookup>
            <filter>true</filter>
            <filteronexpand>true</filteronexpand>
        </field>
        
        <field>
            <fieldname>IsTraceable</fieldname>
            <fieldfunction>INSTALLEDITEMTYPES.InstItemTypeIsTraceable</fieldfunction>
            <caption>Is Traceable</caption>
            <fixedlookup>ejb/CRMUIInstalledItemType.getYesNoSelectBox</fixedlookup>
            <filter>true</filter>
        </field>
        
        <field>
            <fieldname>INSTALLEDITEMTYPES.InstItemTypeDefault</fieldname>
            <caption>Is Default</caption>
            <fixedlookup>ejb/CRMUIInstalledItemType.getYesNoLookup</fixedlookup>
            <summary>true</summary>
        </field>
        
        <field>
            <fieldname>INSTALLEDITEMTYPES.InstItemTypeIsTraceable</fieldname>
            <caption>Is Traceable</caption>
            <fixedlookup>ejb/CRMUIInstalledItemType.getYesNoLookup</fixedlookup>
            <summary>true</summary>
        </field>
           <field>
               <fieldname>PRODUCTS.ProdID</fieldname>
               <caption>Product</caption>
            <filter>true</filter>
            <filteronexpand>true</filteronexpand>
            <filterlookupname>dataset;products.getproducts;prodid;prodnum</filterlookupname>
            <summary>false</summary>
           </field>
           
            <field>
               <fieldname>PRODUCTTYPES.ProdTypeID</fieldname>
               <caption>Product Type</caption>
            <filter>true</filter>
            <filteronexpand>true</filteronexpand>
            <filterlookupname>dataset;products.getproducttypes;prodtypeid;prodtypename</filterlookupname>
            <summary>false</summary>
           </field>
        <field>
            <fieldname>PRODUCTS.ProdNum</fieldname>
               <caption>Product No.</caption>
               <summary>true</summary>
               <expand>false</expand>    
           </field>
           
           <field>
            <fieldname>PRODUCTTYPES.ProdTypeName</fieldname>
               <caption>Product Type Name</caption>
               <summary>true</summary>
               <expand>false</expand>    
           </field>   
        <field>
            <fieldname>CREATEDBY.USERNAME</fieldname>
            <caption>Created by</caption>
            <summary>false</summary>
            <available>true</available>
            <expand>true</expand>
        </field>
        
        <field>
            <fieldname>INSTALLEDITEMTYPES.InstItemTypeCreatedDate</fieldname>
            <caption>Created on</caption>
            <fieldtype>date</fieldtype>
            <summary>false</summary>
            <expand>true</expand>
        </field>
        
        <field>
            <fieldname>UPDATEDBY.USERNAME</fieldname>
            <caption>Updated by</caption>
            <summary>false</summary>
            <available>true</available>
            <expand>true</expand>
        </field>
        <field>
            <fieldname>INSTALLEDITEMTYPES.InstItemTypeUpdatedDate</fieldname>
            <caption>Updated on</caption>
            <fieldtype>date</fieldtype>
            <summary>false</summary>
            <expand>true</expand>
        </field>
        
        <field>
               <fieldname>CREATEDBY.USERID</fieldname>
               <caption>Created By</caption>
            <filter>true</filter>
            <filteronexpand>true</filteronexpand>
            <filterlookupname>dataset;businessnetwork.searchusers;userid;userpersonname</filterlookupname>
            <summary>false</summary>
           </field>
           
           <field>
               <fieldname>UPDATEDBY.USERID</fieldname>
               <caption>Updated By</caption>
            <filteravailable>true</filteravailable>
            <filterlookupname>dataset;businessnetwork.searchusers;userid;userpersonname</filterlookupname>
            <summary>false</summary>
           </field>
    </fieldlist>
    
    <actions>
        <action>
            <caption>New</caption>
            <link>page.do?xml=inventory/installedItemTypeDetailBody&amp;act=new&amp;fc=createButton&amp;jndi=ejb/CRMUIInstalledItemType</link>
            <topmenu>true</topmenu>
        </action>
        <action>
            <caption>Set Default</caption>
            <link>javascript:displayModalCreate('inventory/setDefaultTypeDetailBody','ejb/CRMUIInstalledItemType','loadDefaultForm',null,'new',null,'','')</link>
        </action>
    </actions>
</summary>

As you can see, we define part of the SQL and all the fields and actions that we want our summary page to have. CRM.COM software will process this XML and construct the complete SQL, execute it and return the results on the screen.

To access the summary page, we use the following URL:

Summary page URL

http://localhost:9080/crm/page.do?act=summary&xml=inventory/installedItemTypeSummary

Data Entry Pages

Detail pages are used to display a single record. Through a detail page, the user can see all the records information, can modify, delete or apply other operations on a record.

In this tutorial, we are going to create the Installed Item Type detail page.

Creating the Data Entry Page XML Files

A data entry page consists of 2 .xml files, the definition .xml that is used to define the components of the page, and the layout .xml which is used to define the layout of the page.

Before proceeding with the creation of the data entry page, it is required that you read the Data Entry Page documentation.

The first thing to do is to create the configuration .xml located in ../pages/dataEntry/modulename directory.

In this case, we create a installedItemTypeDetailBody.xml located in ../pages/dataEntry/inventory directory.

Definition xml

<page>
  <id>installedItemTypeDetailBody</id>
  <name>Installed Item Type</name>
  <datapath>name</datapath>
  <datasources>
    <datasource>
      <key>form</key>
      <classname>com.crm.web.generator.datasource.DTODatasource</classname>
    </datasource>
  </datasources>
  <mainmenu>
    <components>
     <component>
        <id>cmdNew</id>
        <visiblemodes>read</visiblemodes>
        <elements>         
          <button>
            <id>1</id>
            <name>New</name>
            <setmode>new</setmode>
            <refresh>page</refresh>
            <functioncall>
              <functions>
                <function>
                  <type>ejb</type>
                  <classname>ejb/CRMUIInstalledItemType</classname>
                  <functionname>createButton</functionname>
                  <resultaction>replace</resultaction>
                  <datatype>root</datatype>
                </function>
              </functions>
            </functioncall>
          </button>
        </elements>        
      </component>
      
      <component>
        <id>cmdHome</id>
        <visiblemodes>read,edit</visiblemodes>
        <elements>
          <button>
            <id>1</id>
            <name>Home</name>
            <setmode>read</setmode>
            <refresh>page</refresh>
            <url>page.do?xml=inventory/installedItemTypeSummary&amp;act=summary</url>
          </button>                    
        </elements>
      </component>
      

      <component>
        <id>cmdEdit</id>
        <name>cmdEdit</name>
        <visiblemodes>read</visiblemodes>
        <elements>
          <button>
            <id>1</id>
            <name>Edit</name>
            <setmode>edit</setmode>
            <refresh>page</refresh>
            <functioncall>
              <functions>
                <function>
                  <type>ejb</type>
                  <classname>ejb/CRMUIInstalledItemType</classname>
                  <functionname>editButton</functionname>
                  <resultaction>replace</resultaction>
                  <datatype>root</datatype>
                  <parameters>
                    <parameter>
                      <value>[[getDTO]]</value>
                      <datatype>java.lang.Object</datatype>
                    </parameter>
                  </parameters>
                </function>
              </functions>
            </functioncall>
          </button>
        </elements>
      </component>
      <component>
        <id>cmdSave</id>
        <visiblemodes>edit,new</visiblemodes>
        <elements>
          <button>
            <id>1</id>
            <name>Save</name>
            <setmode>read</setmode>
            <refresh>page</refresh>
            <functioncall>
              <functions>
                <function>
                  <type>ejb</type>
                  <classname>ejb/CRMUIInstalledItemType</classname>
                  <functionname>saveButton</functionname>
                  <resultaction>replace</resultaction>
                  <datatype>root</datatype>
                  <parameters>
                    <parameter>
                      <value>[[getDTO]]</value>
                      <datatype>java.lang.Object</datatype>
                    </parameter>
                  </parameters>
                </function>
              </functions>
            </functioncall>
          </button>
        </elements>
      </component>
     
      <component>
            <id>cmdCancel</id>
            <name></name>
            <type></type>
            <visiblemodes>edit,new</visiblemodes>
            
            <elements>
                <button> 
                    <id>2</id> 
                    <name>Cancel</name> 
                    <setmode>read</setmode>
                    <refresh>cancel,page.do?xml=inventory/installedItemTypeSummary&amp;act=summary</refresh> 
                </button>                 
            </elements>
        </component>
        
      <component>
        <id>cmdDelete</id>
        <visiblemodes>read</visiblemodes>
        <elements>
          <button>
            <id>1</id>
            <name>Delete</name>
            <setmode>read</setmode>
            <refresh>page</refresh>
            <url>page.do?xml=inventory/installedItemTypeSummary&amp;act=summary</url>
            <functioncall>
              <functions>
                <function>
                  <type>ejb</type>
                  <classname>ejb/CRMUIInstalledItemType</classname>
                  <functionname>deleteButton</functionname>
                  <datatype>root</datatype>
                  <parameters>
                    <parameter>
                      <value>[[getDTO]]</value>
                      <datatype>java.lang.Object</datatype>
                    </parameter>
                  </parameters>
                </function>
              </functions>
            </functioncall>
          </button>
        </elements>
      </component>
    </components>
  </mainmenu>
  <main>
    <components>
          <component>
            <id>InstItemTypeName</id>
            <name>Name</name>
            <elements>
              <label>
                <id>InstItemTypeNameLabel</id>
                <value>Name</value>
              </label>
              <textbox>
                <id>institemtypename</id>
                <datapath>name</datapath>
                <size>normal</size>
              </textbox>
            </elements>
          </component>
    
    <component>
        <id>description</id>
        <name>Description</name>
        <elements>
              <label>
            <id>Desc_Label</id>
            <value>Description</value>
          </label>
                <textarea>
                    <id>description_Val</id>
                    <datapath>description</datapath>
                </textarea>
                <modal>
                    <id>Description_button</id>
                    <visiblemodes>edit,new,read</visiblemodes>
                    <name>Notes</name>
                    <type>notes</type>
                    <refresh>component,false:false:null:description</refresh>
                    <assignments>
                      <assignment>
                        <datapath>description</datapath>
                      </assignment>
                    </assignments>
                </modal>
        </elements>
      </component>
          <component>
            <id>InstItemTypeAltCode</id>
            <name>Alternative Code</name>
            <elements>
            <label>
                <id>InstItemTypeAltCodeLabel</id>
                <value>Alternative Code</value>
              </label>
              <textbox>
                <id>institemtypealtcode</id>
                <datapath>altCode</datapath>
                <size>large</size>
              </textbox>
            </elements>
          </component>
      
              <component>
                <id>Product</id>
                <name>Product</name>
                <visibilityconditions>'[[getValue,java.lang.String,isTraceable]]'!='1'</visibilityconditions> 
                <elements>
                    <label>
                        <id>Product_lbl</id>
                        <value>Product</value>
                    </label>
                    <searchtextbox>
                        <id>ProdNum_Value</id>
                        <datatype>alias</datatype>
                        <datapath>dummyProd</datapath>
                        <value>[[getValue,java.lang.String,product/number]]</value>
                        <url>page.do?xml=products/prodDetailBody&amp;act=itm&amp;jndi=ejb/CRMBOProduct&amp;fc=read&amp;pv0=[[getValue,java.lang.String,products/number]]&amp;pvc=1</url>
                        <modalref>FindProduct,false:false:null:Product</modalref>
                    </searchtextbox>
                    <modal>
                        <id>FindProduct</id>
                        <visiblemodes>edit,new</visiblemodes>
                        <name>Find</name>
                        <type>search</type>
                        <refresh>component,false:false:null:Product</refresh>
                        <setmode>edit</setmode>
                        <datatype>alias</datatype>
                        <datapath>dummyProd</datapath>
                        <datasetname>products.getproducts</datasetname>
                          <datasetsearchfield>prodnum</datasetsearchfield>
                        <datasetreturnhiddenfield>prodid</datasetreturnhiddenfield>
                          <autosearch>true</autosearch>
                        <assignments>
                          <assignment>
                            <classname>com.crm.dataobject.products.CRMDOProduct</classname>
                            <datapath>product</datapath>
                            <value>id</value>
                            <datatype>load</datatype>
                          </assignment>
                        </assignments>
                  </modal>
                </elements>
            </component>
    
            <component>
                <id>ProductType</id>
                <name>Product Type</name>
                <visibilityconditions>'[[getValue,java.lang.String,isTraceable]]'=='1'</visibilityconditions> 
                <elements>
                    <label>
                        <id>ProductType_lbl</id>
                        <value>Product Type</value>
                    </label>
                    <selectbox>
                        <id>ProductType_Value</id>
                        <lookuptype>dataset</lookuptype>
                        <lookupname>products.getproducttypes;prodtypeid;prodtypename</lookupname>
                        <datapath>productType</datapath>
                        <datapathid>id</datapathid>
                        <classname>com.crm.dataobject.products.CRMDOProductType</classname>
                        <datatype>load</datatype>
                        <reload>false</reload>
                        <refresh>page</refresh>
                    </selectbox>         
                </elements>
            </component>
    
          <component>
            <id>InstItemTypeIsTraceable</id>
            <name>Is Traceable</name>
            <elements>
            <label>
                <id>InstItemTypeIsTraceableLabel</id>
                <value>Is Traceable</value>
              </label>
              <checkbox>
                <id>InstItemTypeIsTraceable_val</id>
                <datapath>isTraceable</datapath>
                <truevalue>1</truevalue>
                <falsevalue>0</falsevalue>
                <truelabel>Yes</truelabel>
                <falselabel>No</falselabel>
                <refresh>page</refresh>
                <onchange>
                    <functions>
                      <function>
                        <type>ejb</type>
                        <classname>ejb/CRMUIInstalledItemType</classname>
                        <functionname>echoDTO</functionname>
                        <resultaction>replace</resultaction>
                        <datatype>root</datatype>
                        <parameters>
                          <parameter>
                            <value>[[getDTO]]</value>
                            <datatype>java.lang.Object</datatype>
                          </parameter>
                        </parameters>
                      </function>
                    </functions>
                </onchange>
              </checkbox>
            </elements>
          </component>
    </components>
  </main>
  <details>
    <tabs>
          <tab>
              <id>standardCosts</id>
            <name>Standard Costs</name>
            <datasourcesetkey>standardCosts</datasourcesetkey>
            <visibilityconditions>'[[getValue,java.lang.String,isTraceable]]'!='1'</visibilityconditions> 
            <functioncall>
              <functions>
                <function>
                  <type>ejb</type>
                  <classname>ejb/CRMUIInstalledItemType</classname>
                  <functionname>loadStandardCostTab</functionname>
                  <resultaction>setreplace</resultaction>
                  <datapath>standardCosts</datapath>
                  <datasourcesetkey>standardCosts</datasourcesetkey>
                  <parameters>
                     <parameter>
                     <value>[[getDTO]]</value>
                     <datatype>java.lang.Object</datatype>
                </parameter>
                  </parameters>
                </function>
              </functions>
            </functioncall>
            
         <tabmenu>
            <components>
           <component>
              <id>add</id>
              <name>Add</name>
              <elements>
                  <button>
                      <id>add_button</id>
                      <visiblemodes>edit,new</visiblemodes>
                      <name>Add</name>
                      <refresh>tab,standardCosts</refresh>
                      <functioncall>
                    <functions>
                      <function>
                        <type>ejb</type>
                        <classname>ejb/CRMUIInstalledItemType</classname>
                        <functionname>addStandardCostButton</functionname>
                        <datasourcesetkey>standardCosts</datasourcesetkey>
                        <resultaction>setappend</resultaction>
                        <parameters>
                          <parameter>
                            <value>[[getDTO]]</value>
                            <datatype>java.lang.Object</datatype>
                          </parameter>
                        </parameters>
                      </function>
                    </functions>
                  </functioncall>
                  </button>
              </elements>
            </component>

            <component>
              <id>remove</id>
              <elements>
                <button>
                  <id>remove_button</id>
                  <visiblemodes>edit,new</visiblemodes>
                  <name>Remove</name>
                  <refresh>tab,standardCosts</refresh>
                  <functioncall>
                    <functions>
                      <function>
                        <type>ejb</type>
                        <classname>ejb/CRMUIInstalledItemType</classname>
                        <functionname>removeStandardCostButton</functionname>
                        <datasourcesetkey>standardCosts</datasourcesetkey>
                        <resultaction>markdeleted</resultaction>
                        <parameters>
                          <parameter>
                            <value>[[getSelectedDTOs,java.lang.String,standardCosts]]</value>
                            <datatype>java.lang.Object</datatype>
                          </parameter>
                         </parameters>
                      </function>
                    </functions>
                  </functioncall>
                </button>
              </elements>
            </component>
            
            </components>
        </tabmenu>
        
         <components>
             
              <component>
                <id>removeLine</id>
                <elements>
                  <rowselector>
                    <datapath>id</datapath>
                  </rowselector>
                </elements>
              </component>

                <component>
                    <id>FromDate</id>
                    <name>From Date</name>
                    <elements>
                        <textbox>
                            <id>FromDate_txt</id>
                            <datapath>fromDate</datapath>
                            <datatype>java.util.Date</datatype>
                            <dataformatting>DATEONLY</dataformatting>
                            <readonly>false</readonly>
                        </textbox>
                        <modal>
                        <id>1</id>
                        <visiblemodes>edit,new</visiblemodes>
                        <name>Date</name>
                        <type>date</type>
                        <refresh>component,true:false:standardCosts:FromDate</refresh>
                        <setmode>edit</setmode>
                        <assignments>
                            <assignment>
                                <datapath>standardCosts[CURRENT_ROW]/fromDate</datapath>
                                <datatype>java.util.Date</datatype>
                            </assignment>
                        </assignments>
                    </modal>
                    </elements>
                </component>
                  
                   <component>
                    <id>ToDate</id>
                    <name>To Date</name>
                    <elements>
                        <textbox>
                            <id>ToDate_txt</id>
                            <datapath>toDate</datapath>
                            <datatype>java.util.Date</datatype>
                            <dataformatting>DATEONLY</dataformatting>
                            <readonly>false</readonly>
                        </textbox>
                        <modal>
                        <id>1</id>
                        <visiblemodes>edit,new</visiblemodes>
                        <name>Date</name>
                        <type>date</type>
                        <refresh>component,true:false:standardCosts:ToDate</refresh>
                        <setmode>edit</setmode>
                        <assignments>
                            <assignment>
                                <datapath>standardCosts[CURRENT_ROW]/toDate</datapath>
                                <datatype>java.util.Date</datatype>
                            </assignment>
                        </assignments>
                    </modal>
                    </elements>
                </component>


          <component>
            <id>unitCostAmount</id>
            <name>Unit Cost</name>
            <elements>
              <textbox>
                <id>unitCostAmountValue</id>
                <datapath>unitCostAmount</datapath>
                <size>smaller</size>
                <dataformatting>DIGITS:2</dataformatting>
                <datatype>java.math.BigDecimal</datatype>
                <readonly>false</readonly>
                <refresh>page</refresh>
              </textbox>
            </elements>
          </component>

                        
            </components>
          </tab>
    </tabs>
  </details>
</page>

As you can see, in this .xml, we define our page's buttons, elements and tabs.

The next thing to do is to create the layout .xml. So, we create a installedItemTypeDetailBodylayout.xml located also in ../pages/dataEntry/inventory directory.

Layout XML

<page>
  <mainmenu>
    <components>
        <component>
        <id>cmdHome</id>
      </component>
      <component>
        <id>cmdNew</id>
      </component>      
      <component>
        <id>cmdEdit</id>
      </component>
      <component>
        <id>cmdDelete</id>
      </component>
      <component>
        <id>cmdSave</id>
      </component>
      <component>
        <id>cmdCancel</id>
      </component>
    </components>
  </mainmenu>
  <main>
    <view>
      <type>areas</type>
      <screenareas>
        <screenarea>
          <leftscreenarea>
            <sections>
              <section>
                <id>Main_Information</id>
              </section>
              <section>
                <id>Log_Information</id>
              </section>                  
            </sections>
          </leftscreenarea>
        </screenarea>
      </screenareas>
    </view>
    <sections>
      <section>
        <id>Main_Information</id>
        <name>Main Information</name>
        <disable>false</disable>
        <left>
          <components>
            <component>
              <id>InstItemTypeName</id>
            </component>
            <component>
              <id>description</id>
            </component>
            <component>
              <id>InstItemTypeAltCode</id>
            </component>
          </components>
        </left>
        <right>
          <components> 
            <component>
              <id>InstItemTypeIsTraceable</id>
            </component>      
            <component>
                <id>Product</id>
            </component>
            <component>
                <id>ProductType</id>
            </component>        
          </components>
        </right>
      </section>
      <section>
        <id>Log_Information</id>
        <name>Log Information</name>
        <disable>false</disable>
        <left>
          <components>
            <component><id>file:LogInfo/LogInfoGroup.xml</id></component>
          </components>
        </left>
        <right>
          <components>       
          </components>
        </right>
      </section>      
    </sections>
  </main>
  <details>
      <view>list</view>
    <tabs>
       <tab>
        <id>standardCosts</id>
        <disable>false</disable>
        <preload>true</preload>
        <components>
          <component>
            <id>removeLine</id>
          </component>
          <component>
            <id>FromDate</id>
          </component>
          <component>
            <id>ToDate</id>
          </component>
          <component>
            <id>unitCostAmount</id>
            </component>    
        </components>
      </tab>
    </tabs>
  </details>
</page>

In this .xml we define our page's sections and areas, the order and alignment of our components and tabs.

Developing the View layer

Summary Pages

Creating the Summary Page XML

Data Entry Pages

Creating the Data Entry Page XML Files