We will be adding another page to the Client Management application which you created in the Client Quick Add lesson. This page will display a grid of clients, a search panel, and an add window.

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 change it from fit to form.
    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:
  6. Find the Data Source tab
    1. Click the Add button and Add a Unified Store
    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
      6. Click on Properties and add clientCreated(); to the Success textarea.
      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

     <script language="javascript">
    function clientCreated() {
        parent.newClientPage.close();
    }
</script>
  9. Click on Apply Source Code
  11. Click on Save Page at the top left of the screen, and click Ok to the Page Was Saved notification 

Step 2 - Create a Search 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 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 Builder
  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. In General Settings, check the Open Window in popup checkbox
    4. Set Window Width to 800
    5. Into CallBback Action Text add grdClients.getStore().reload(); 
    7. Click Save
  6. In the Data Source panel, add a Unified Store
  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
      7. Click on the First arrow to move the column to the top 
      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
        4. Double click on CommandName and change the name to Delete, set the icon to BulletCross and for action select storeClients_Delete
        5. Add another ActionCommand called Detail and change its icon to Magnifier
        7. Click Save
        8. Make sure grdClients is selected and click on Listeners in the Properties panel
          1. In the Listeners Configuration window, select Command as the listener
          2. In the Fn drop down menu, select PageManager.grid_command_grdClients
          4. Click Save
      9. Make sure grdClients it selected and click on TopBar in the Properties panel
        1. Add a button called New Client with icon Add
        2. Set its Listener to Click and its Fn to PageManager.pageAction_execute_newClientPage
        3. Add a button called Export with icon PageWhiteExcel
        4. Set its Listener to Click and its Fn to PageManager.grid_export_grdClients
        5. 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
      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
  11. Click on Save Page at the top left of the screen, and click Ok to the Page Was Saved notification 

Step 3 - Add Page to Application

  1. In the Navigation Menu, click on Application and then click on User Application
  2. Find your User Management application and click on it
  3. Right click on the house icon and click Add Page. 
    1. Call it “Client Search”
    2. The Target page will be Client Search
    3. Click Save
    4. Check that Appliction Permissions is set to allow for the Client Search Page
  4. From the Navigation Menu, click on Deployment Management and underneath it click on Deploy.
    1. Select the Environment.
    2. Click Preview
    3. Click Execute SQL. Wait till you get the green checkbox indicating everything was successful.
    4. Click Confirm.
    5. Logout and Log In.
    6. Select the Client Management application.
  5. Click on the Client Search page
    1. Search for any Clients in the Search panel
    2. Click on New Client to add a new Client
    3. Click on Export to export you list of clients into a downloadable Excel file