6. Navigation Detail

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 Update; click Save.
4. On save you will be redirected to the detail page of the Navigation Update page
   
   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. Load the Navigation Library to this page as instructed here: Navigation Library Pages
7. In Data Sources click the Add button and add a Unified Store
   
8. 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 Value Id
   6. Click Save in the Configuration window
9. 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:

      <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:
      
10. Select storeDetail and click on Settings
    
    1. Notice the Controls tab prepopulates with your labels
    2. To First Name, also add the lblSpecificName control which was created in the TopBar above
    3. Click Save
11. Click Save in the Configuration window
12. 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
13. Click Save
14. Add a Script Action called gotDeleted
    
    1. Click on Properties

    2. Add the following code

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

    3. Click Save
15. 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

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

16. Click Save
17. 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
18. Click on Save Page at the top left of the screen, and click Ok to the Page Was Saved notification