Page History

Step 1 - Create a Simple New Client Page

1. Click on Presentation and then Pages.
2. Click New Page 
3. From Categories, select General and from Templates select Blank; name the page New Client; click Save.
4. On save you will be redirected to the detail page of the New Client page, from here launch the Page Builder by clicking on Page Builder 
5. In the Sections tab in the Page Builder, make sure pnMain is selected
   
   1. Find Layout in Properties and delete fit and leave it blank.
   2. You will now add elements to to pnMain
      
      1. Add a panel called pnGeneralInfo, title General Information; set its height to 180, its padding to 20 and its border to false
         
         1. To pnGeneralInfo add a panel called pnTopColumns and set its layout to column, its border to false, and its height to 60
            
            1. Add two FormPanels to pnTopColumns, one called pnRight1 and one called pnLeft1, and set their ColumnWidths each to .5, and their borders to false
            2. Distribute 4 TextFields among the 2 column panels: First Name, Last Name, Email, and Mobile Phone
         2. To the bottom of pnClientDetails also add a TextArea called txtMailingAddress, FieldLabel Mailing Address, width 640
      2. Create a similar panel for Department Information for the following final result:
      3. 
6. Find the Data Source tab
   
   1. Click the Add button and Add a Unified Store
   2. 
   3. Set its ID to storeClients and click Create
   4. Make sure storeClients is selected and in the Properties panel at the right of the screen, click on Settings
      
      1. Set Data Source Type to Business Objects
      2. Set Data Source to Client
      3. Check the Create checkbox
      4. In the Create tab, match all the TextFields to attributes of the Client business object in the Controls Column
      5. 
      6. Click on Properties and add clientCreated(); to the Success textarea.
      7. 
      8. Click Save
      9. Click Save in the Configuration window
7. Make sure pnMain is selected and click on TopBar in the Properties panel
   
   1. Add a button called Save with Icon Accept; click Apply
   2. In the Listeners tab, select Click and from Fn select PageManager.ruleAction_execute_storeClients_Create

8. Click on the Source tab and add the following JavaScript to the Head tag

   Code Block
   language javascript linenumbers true
   <script language="javascript"> function clientCreated() { parent.newClientPage.close(); } </script>

9. Click on Apply Source Code
10. Image Added
11. Click on Save Page at the top left of the screen, and click Ok to the Page Was Saved notification Image Added

Step 2 - Create a Search Page

1. Click on Presentation and then Pages.
2. Click New PageImage Added
3. From Categories, select General and from Templates select Blank; name the page Client Search; click Save.
4. On save you will be redirected to the detail page of the Client Search page, from here launch the Page Builder by clicking on Page BuilderImage Added
5. In the Data Sources tab, click Add and add a Page Action; call it newClientPage
   
   1. Right click on newClientPage and click on Properties
   2. Set Data Source to New Client
   3. Into CallBback Action Text add grdClients.getStore().reload(); 
   4. Image Added
   5. Click Save
6. In the Data Source panel, add a Unified Store
7. Image Added
8. Call is storeClients
9. Right click on storeClient and click Properties
   
   1. Select Business Object for Data Source Type and Client as the Data Source
   2. Select the List and Delete checkboxes
   3. Click Save
10. Click on pnMain
    1. In Properties, set the layout of pnMain to border
    2. Drag a Grid into pnMain and call it grdClients
       
       1. Set its Region to Center
       2. Select grdClients in the Design panel and click on Settings in the Properties panel
       3. Set Data Source to storeClients[List]
       4. Add the following columns to the grid: First Name, Last Name, Email, Mobile Phone, and Mailing Address
       5. Click on Add Grid Column at the top of the Configuration window, and click on Command Column
       6. Image Added
       7. Click on the First arrow to move the column to the top Image Added
       8. Select the Command Column and change its header to Actions
          
          1. Click on the Command Columns tab
          2. Click on Add Command Column and click ActionCommand
          3. Image Added
          4. Double click on CommandName and change the name to Delete, set the idon to BulletCross and for action select storeClients_Delete
          5. Add another ActionCommand called Edit and change its icon to Pencil
          6. Image Added
          7. Click Save
    3. Drag an Exc Search Form into pnMain
       1. Call it searchClients and set its Region to East
       2. Click on Settings in the Properties panel
       3. Select First Name, Last Name, Email and Mobile Phone as search criteria
       4. Image Added
       5. Click Save
       6. Click on TopBar in the Properties panel
       7. Add a button called Search with icon Accept
          
          1. Set Listeners to Click
          2. Set Fn to PageManager.searchForm_search_searchClients
       8. Add a button called Clear with icon Cancel
          
          1. Set Listeners to Click
          2. Set Fn to PageManager.searchForm_clear_searchClients
       9. Click Save