Step 1 – Create a Client Business Object

The Client Business Object will hold the data displayed on the pages in the Page Builder tutorials.

  1. From the Navigation Menu click on Data Management, and click on Business Objects.
  2. Click New Business Object.
    1. Name the Business Object Client.
    2. Select CRM under Catagories and select Contact under Templates.
    3. Click Save.
  3. From the Navigation Menu, click on Deployment Management and underneath it click on Deploy.
    1. Select the Environment.
    2. Click Preview
    3. Click Execute SQL. Wait till you get the green checkbox indicating everything was successful.
    4. Click Confirm.

Step 2 – Create a New Client 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 New Client; click Save.
  4. On save you will be redirected to the detail page of the New Client page, from here launch the Page Builder by clicking on Page Builder
  5. In Data Sources click the Add button and add a Unified Store
  6. Set its ID to storeClients and click Create
  7. Make sure storeClients 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
  8. Click Save
  9. 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 60
          1. Add two FormPanels to pnTopColumns, one called pnRight1 and one called pnLeft1, 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 lick on storeClients and find all the storeClients fields in the Toolbox
          4. Drag FirstName and LastName into pnLeft1; make sure text is left blank and click Create
          5. Follow the same steps in pnRight2 except add Email and MobilePhone
        2. In the Sections tab, click on pnGeneralInfo and find pnGeneralInfoon the design surface
          1. Again, click on storeClients 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 600
          3. Click Create
      2. Create a similar panel for Department Information for the following final result when viewed in Preview:
  10. 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_storeClients_Create
    3. Click Apply and click Save
  11. Click on Save Page at the top left of the screen, and click Ok to the Page Was Saved notification 

Final Screen Shot

Your Page Builder should look something like this