Step 1 – Create a Client Detail Page

The Detail Screen will load from the Client List and populate with all the Client's information

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 Detail; click Save.
4. On save you will be redirected to the detail page of the Client Detail page, from here click on the Parameters tab
   
   1. 1. Add a new parameter, name Id, type Integer, and set Required to Yes
      2. 
   2. Go to the General tab and launch the Page Builder by clicking on Page Builder
5. In Data Sources click the Add button and add a Unified Store
6. 
7. Set its ID to storeClients and click Create
8. 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 Detail checkbox
   4. Find the Id parameter and double click on its Value column
   5. Select Id as the page parameter
   6. 
   7. Click on Properties and check the Auto Load checkbox
   8. Click Save, and Save again in the Configuration window
9. Click Save
10. 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 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 change the control type to Label; click Create
             5. 
             6. 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 Label; 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:
       3. 
11. Click on Save Page at the top left of the screen, and click Ok to the Page Was Saved notification 

Step 2 – Adding the Detail Screen to the Client Search Page

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
   5. 
   6. In the General Settings tab, check the Open Window in popup checkbox and set Width to 700 and Height to 400
   7. Click Apply and click Save
3. In the Sections tab, click on grdClients and then click on Settings
   
   1. Click on Add Grid Column and click on Command Column
   2. Set this column to the top of the list
   3. Select this column to be able to edit its settings
      
      1. Leave Header blank and set width to 60
      2. Click on the Command Columns tab
      3. Click Add Command Column and click ActionCommand
      4. Set Command Name to Detail and set the Icon to Magnifier
      5. Set Action to clientDetailPage
4. Make sure grdClients it still selected and click on Listeners
   
   1. Select Command
   2. Set Fn to PageManager.grid_command_grdClients
   3. Click Save
5. Click on Save Page at the top left of the screen, and click Ok to the Page Was Saved notification 
6. Deploy your solution and log out and log in. See click on your solution to see the page:
7.