| Panel | ||
|---|---|---|
| ||
Developing the View layerIn 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 pages we use in the software are three:
...
| Panel | ||
|---|---|---|
| ||
|
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.
| Code Block | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
<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&act=itm&fc=loadForm&jndi=ejb/CRMUIInstalledItemType&pv0=((INSTALLEDITEMTYPES.InstItemTypeID))&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&act=new&fc=createButton&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:
| Info | ||
|---|---|---|
| ||
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.
| Code Block | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
<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&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&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&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&act=itm&jndi=ejb/CRMBOProduct&fc=read&pv0=[[getValue,java.lang.String,products/number]]&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.
| Code Block | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
<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> |
...
The page generator renders HTML pages by generating static and dynamic pages using JSP elements and CRM.COM components.
|