Page History

...

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 UpdateDetail; click Save.
4. On save you will be redirected to the detail page of the Navigation Update 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. Load the Navigation Library to this page as instructed here: Navigation Library PagesIn 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. Image Added
   6. Click Save and click Save again in the Configuration window
      Image Added
    
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 lblSpecificName lblSpecificTitle control which was created in the TopBar above
    3. Image Added
    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 RecordsName 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 

Image Added