Step 1 – Create Client Grid

The Client List will display a list of all the client records.

  1. Click on Presentation and then Pages.
  2. Click New Page
  3. From Categories, select General and from Templates select Blank; name the page Navigation Result; click Save.
  4. On save you will be redirected to the detail page of the Navigation Result page, from here launch the Page Builder by clicking on Page Builder
  5. In the Page Builder, find the DOM tab and click on PageManager
    1. Click on Settings
    2. Click on the Resources tab and click Add
    3. Set Name to NavLib, type to Ready
    4. Click on the magnifying glass on the far right of the Uri and load the Navigation Library by clicking on the green checkmark
    6. Click Save and click Save again in the Configuration window
    In Data Sources click the Add button and add a Unified Store
  7. Set its ID to storeResult and click Create
  8. Make sure storeResult 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 List checkbox and check the Delete checkbox
    4. Click on the Delete tab and click on Properties

    5. Into the Success text area add the following code:

      EcxPageNav.Util.closeManagedTab(window.__deleteRecord, navDetail);

       

       

    6. Click Save
  9. Click Save
  10. Make sure pnMain is selected and in Properties set its layout to border
  11. Into the pnMain design surface drag a Grid and call is grdResult, set its title to Clients
    1. Set its region to center
    2. Click on Settings
      1. Set Data Source to storeResult[List]
      2. Add the following columns to the grid: Age, Department, FirstName, Id and LastName
      3. Click on any of the columns to adjust their attributes, for example set Department to Auto Expand
      4. Use the arrows to rearrange the order of the columns
      6. Click on the General tab and check the Use Paging checkbox; from Selection Model select Row Selection
      7. Click Apply
      8. Click Save
  12. In the Data Sources tab, click Add and add a Page Action; call it navNew
    1. Right click on navNew and click on Properties
    2. Set Data Source to Navigation New
      1. In the General Settings tab, check Open Window in Pop Up and click Apply

      2. In the Callback Action tab add the following code:

        window.__newRecordId = args['Id'];
window.__newRecordName = args['FirstName'];
grdResult.getStore().reload();

         

         

      3. Click Save
  13. Add another store, this time a Script Action, call it scriptOpenNewPage

    1. Into the configuration window, add the following code:

            EcxPageNav.Util.openManagedPage({}, navNew);

    2. Click Save
  14. Make sure grdResult is selected and click on TopBar
    1. Click Add and add a new button
    2. Set Text to New and Icon to Add; click Apply
    4. Click on the Listeners tab and select the Click listener
    5. Set Fn to PageManager.scriptAction_execute_scriptOpenNewPage; click Apply
    6. Add another button called Export with Icon TableSave; click Apply
    7. Set Fn to PageManager.grid_export_grdResult; click Apply
    8. Click Save
  15. Click on Save Page at the top left of the screen, and click Ok to the Page Was Saved notification 

Step 2 – Create Client Search

The Client Search will quickly allow for searches among records

  1. Drag an Exc Search Form into pnMain
    1. Call it searchResult and set its Region to East and click Save in the Properties panel
    2. Click on Settings in the Properties panel
    3. Set Data Source to storeResult[List]
    4. Select First Name, Last Name, and ID as search criteria
    6. Click Save
    7. Click on TopBar in the Properties panel
    8. Add a button called Search with icon Magnifier
      1. Set Listeners to Click
        Set Fn to PageManager.searchForm_search_searchResult
      2. Click Apply
    9. Add a button called Clear with icon Erase
      1. Set Listeners to Click
      2. Set Fn to PageManager.searchForm_clear_searchResult
      3. Click Apply
    10. Click Save
  2. Click on Save Page at the top left of the screen, and click Ok to the Page Was Saved notification 

  • No labels