We will be adding detail viewer functionality to the Client Search page.

Step 1 - Create a Simple Client 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 Client Details; click Save.
  4. On save you will be redirected to the detail page of the New Client page, from here click on the Parameters tab
    1. Add a new parameter, name Id, type Integer, and set Required to Yes
  5. Go to the General tab and launch the Page Builder by clicking on Page Builder
  6. Add a Unified Store called storeClients and open its Configuration window
    1. Data Source Type will be Business Object and Data Source will be Client
    2. Check the Details checkbox
    3. Click on the Details tab
      1. Find the Id parameter and double click on its Value column
      2. Select Id as the page parameter
      4. Click on Properties and check the Auto Load checkbox
      5. Click Save, and Save again in the Configuration window
  7. 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
    2. Add panels as in previous examples, but stop before adding text areas
    3. Instead of adding textareas from the Toolbox panel, click on storeClients in the Data Sources tab
      1. In Toolbox find FirstName and drag it into pnLeft1
      2. Change its Control Type from TextField to Label
      3. Delete FirstName from the Text row
      5. Click Create
      6. Add the remaining Client attributes in this manner: Last Name, Email, Mobile Phone, Mailing Address, Department, Office Phone, Title, Reports To, and Description
  8. In Preview, your page should look like this
  10. Click on Save Page at the top left of the screen, and click Ok to the Page Was Saved notification 

 

Step 2 - Attaching the Detail Page to the Client Search

  1. Find the Client Search Page
  2. Add a new Data Source, a Page Action, called clientDetailPage
    1. Open its Configuration screen
    2. Set Data Source to Client Details
    3. From the Select store adapter dropdown select storeClients[List]
    4. Add a Parameter, call it Id and select Id from the Columns dropdown
    6. In the General Settings tab, check the Open Window in popup checkbox and set Width to 700 and Height to 350
    7. Click Apply and click Save
  3. In the Sections tab, click on grdClients and then click on Settings
    1. Click on the Actions column
    2. Click on the Command Columns tab
    3. Double click on the Details command action and select clientDetailPage as its Action
    5. Click Save
  4. Click on Save Page at the top left of the screen, and click Ok to the Page Was Saved notification 
  5. Deploy your solution, log out and log back in to see your page, it should look like this:

 

 

 

  • No labels