Page History

Step 1 – Create Navigation Detail 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 Navigation Detail; click Save.
4. On save you will be redirected to the detail page of the Navigation Detailpage
   
   1. Click on the Paramters tab and click Add
   2. Set name to Id, Type to Integer, and Required to Yes
5. Click on the General tab and launch the Page Builder by clicking on Page Builder
6. 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
   5. 
   6. Click Save and click Save again in the Configuration window
      
    
7. In Data Sources click the Add button and add a Unified Store
8. 
9. Give it name storeDetail
   
   1. Set its Data Source to Client
   2. Check the Detail and Delete checkboxes
   3. Click on the Detail tab and Properties
      
      1. Into Before Load paste: showMyLoadingMask('Loading...');
      2. Into Load paste: hideMyLoadingMask();
      3. 
      4. Click Save
   4. In the Detail tab, set the Id attribute to Value Id
   5. Click on the Delete tab and click Properties
      
      1. Add the following to Success: gotDeleted.execute();
      2. Click Save
      3. In the Delete tab, set the Id attribute to ValueId
   6. Click Save in the Configuration window
10. The Detail page will look similar to the Update and New pages, except instead of text area or text fields or menus, everything will be labels
    

    1. The TopBar will include several custom labels, the code for which can be found here:

       Code Block

       <TopBar> <ext:Toolbar runat="server" Height="33px" Cls="mainHeader" AutoRender="False" ID="pnMain_TopBar_tb" Style="border-bottom-color: White; padding-top: 5px;" Border="true"><Items> <ext:Label runat="server" Text="Client" Icon="Lorry" Cls="EcxDetailBaseName" AutoRender="False" ID="lbBaseTitle"></ext:Label> <ext:Label runat="server" Cls="EcxDetailRecordName" AutoRender="False" ID="lbSpecificTitle"></ext:Label> <ext:ToolbarFill runat="server" AutoRender="False" ID="ToolbarFill1"></ext:ToolbarFill> <ext:Button runat="server" Icon="Pencil" Text="Edit" AutoRender="False" ID="pnMain_TopBar_bt1"> <Listeners> <Click Fn="PageManager.scriptAction_execute_scriptOpenUpdatePage"></Click> </Listeners> </ext:Button> <ext:Button runat="server" Icon="BulletCross" Text="Delete" AutoRender="False" ID="pnMain_TopBar_bt2"> <Listeners> <Click Fn="PageManager.ruleAction_execute_storeDetail_Delete"></Click> </Listeners> </ext:Button> <ext:Button runat="server" Icon="Cancel" Text="Close" AutoRender="False" ID="pnMain_TopBar_bt"> <Listeners> <Click Handler="EcxPageNav.Util.closeMe();"></Click> </Listeners> </ext:Button> </Items> </ext:Toolbar> </TopBar>

       This code can simply be pasted into the Source tab

    2. The page will look like this:
       
11. Select storeDetail and click on Settings
    
    1. Notice the Controls tab prepopulates with your labels
    2. To First Name, also add the lblSpecificTitle control which was created in the TopBar above
    3. 
    4. Click Save
12. Click Save in the Configuration window
13. Select pnMain and click on TopBar
    
    1. Click on the buttons to see their listeners which have already been prepopulated from pasting into the source code
    2. In the case of button Close we see a Handler added to the configuration
14. Click Save
15. Add a Script Action called gotDeleted
    
    1. Click on Properties

    2. Add the following code

       Code Block
       EcxPageNav.Util.executeParentCallback(); EcxPageNav.Util.closeMe();

    3. Click Save
16. Add a Page Action called navUpdate
    
    1. Click on Settings
    2. Set its Data Source to Navigation Update and its Store Adapter to storeDetail[Detail]
    3. Set Id to value Id
    4. Add another parameter called BaseName and set its value to lbBaseTitle
    5. Add another parameter called RecordName and set its value to lbSpecificTitle
    6. 
    7. Click on General Settings, check Open Window in popup and set Width to 650; click Apply

    8. Into Callback action add

       Code Block
       storeDetail_Detail.reload(); EcxPageNav.Util.executeParentCallback();

17. Click Save
18. Add a Script Action called scriptOpenUpdatePage
    
    1. Click on Properties
    2. Set Script Action Text to: EcxPageNav.Util.openManagedPage(arguments[0].record, navUpdate);
    3. Set the store adapter to storeDetail[Detail]
    4. Add an argument called aggArgs and set its column to Id
    5. Click Save
19. Click on Save Page at the top left of the screen, and click Ok to the Page Was Saved notification