9. Search Views Screen

Step 1 – Create Department List

1. Click on Presentation and then Pages.
2. Click New Page
3. From Categories, select General and from Templates select Blank; name the page Department Search; click Save.
4. On save you will be redirected to the detail page of the Department Search 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. 
7. Set its ID to storeDepartments and click Create
8. Make sure storeDepartments is selected and in the Properties panel at the right of the screen, click on Settings
   
   1. Set Data Source Type to Business Views
   2. Set Data Source to Dashboard View
   3. Delete the Id elements, leaving only ClientId and ClientDepartment
   4. Check the List checkbox
9. Click Save
10. Make sure pnMain is selected and in Properties set its layout to border
11. Into the pnMain design surface drag a Grid and call is grdDepartments
1. Set its region to center
2. Click on Settings and set its Data Source to storeDepartments[List]
   
   1. Move both ClientId ClientDepartment into the column panel
   2. Move ClientDepartment to the top of the list and change its Header to Department and its Width to 200
   3. Change the Header of ClientId to Number of Clients and set it to Auto Expand
   4. In the General tab, check Use Paging and set Selection Mode to Row Selection
   5. Click Save
3. Click on TopBar
   
   1. Add a new button, call it Export and set its Icon to PageWhiteExcel; click Apply
   2. In the Listeners tab, set its Listener to Click and set Fn to PageManager.grid_export_grdDepartments; click Apply
   3. Click Save

1. Drag an Ecx Search Form into pnMain and call it searchDepartments; set its region to east
   
   1. Click on Settings
      
      1. Set the Data Source to storeDepartments[List]
      2. Add ClientId and ClientDepartment as search criteria
      3. Set the Control Label of Client Id to Number of Clients; click Apply
      4. Set the Control Label of Client Department to Department; click Apply
      5. Click Save
   2. Click on TopBar
      
      1. Add a button called Search with icon Magnifier
      2. Set its click listener to function PageManager.searchForm_search_searchDepartments; click Apply
      3. Add another button called Clear with icon Erase
      4. Set its click listener to function PageManager.searchForm_clear_searchDepartments; click Apply
      5. Click Save
2. Click on Save Page at the top left of the screen, and click Ok to the Page Was Saved notification 
3. Add the page to your application and deploy. The page will look like this in your solution:
4.