Step 1 – Create a new page

  1. Click on Presentations and then Pages.
  2. Click New Page
  3. From Categories, select General and from Templates select Blank; name the page Navigation New; click Save.
  4. On save you will be redirected to the detail page of the Navigation New 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
  6. In Data Sources click the Add button and add a Unified Store
  8. Set its ID to storeNew and click Create
  9. Make sure storeNew 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. Click on the Create tab and click on Properties

      1. Into the Success textbox paste the following code:

        var callbackParams = {
Id: args.data.DATA.root_Client.Journal.Item.Key,
FirstName: FirstName1.getValue() 
};
EcxPageNav.Util.executeParentCallback(callbackParams); 
EcxPageNav.Util.closeMe();
  10. Click Save
  11. 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, set its padding to 20 and click Save at the bottom of the Properties panel.
    2. You will now add elements to to pnMain
      1. Add a Form Panel called pnGeneralInfo, title General Information; set its border to false
        1. To pnGeneralInfo add a panel called pnTopColumns1 and set its border to False; set its layout to column and its height to 90
          1. Add two FormPanels to pnTopColumns, one called pnLeft1 and one called pnRight1, and set their ColumnWidths each to .5, and their borders to false
          2. Double click on pnLeft1 to see its design surface
          3. In Data Sources click on storeNew and find all the storeNew fields in the Toolbox
          4. Drag FirstName, LastName, and Age into pnLeft1; make sure text is left blank and click Create
          5. Follow the same steps in pnRight1 except add Email and MobilePhone
        2. In the Sections tab, click on pnGeneralInfo and find pnGeneralInfoon the design surface
          1. Again, click on storeNew in Data Sources and drag the MailingAddress field from the Toolbox onto pnGeneralInfo
          2. Change its control type from TextField to TextArea; make sure Text is set to blank; in Properties, set its width to 400
          3. Click Create
      2. Create a similar panel for Department Information for the following final result when viewed in Preview:
      4. To create the Department combobox paste the following text into the Source tab
        1. <ext:ComboBox runat="server" HiddenName="Department1_Value" FieldLabel="Department" AutoRender="False" ID="Department1">
<Template ID="XTemplate1" EnableViewState="False"></Template>
<Items>
<ext:ListItem Text="Professional Services" Value="Professional Services"></ext:ListItem>
<ext:ListItem Text="Solution Delivery" Value="Solution Delivery"></ext:ListItem>
<ext:ListItem Text="Engineering" Value="Engineering"></ext:ListItem>
<ext:ListItem Text="Quality Assurance" Value="Quality Assurance"></ext:ListItem>
</Items>
</ext:ComboBox>
        2. Click Apply Source Code
  12. 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_storeNew_Create
    3. Click Apply and click Save
  13. Click on Save Page at the top left of the screen, and click Ok to the Page Was Saved notification 
  • No labels