Page History

...

Step 1 - Create a Simple New Client Page

Click on Presentation and then Pages.
Click New Page
From Categories, select General and from Templates select Blank; name the page New Client; click Save.
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
In the Sections tab in the Page Builder, make sure pnMain is selected
1. Find Layout in Properties and delete fit and leave it blankchange it from fit to form.
2. You will now add elements to to pnMain
  1. Add a panel called pnGeneralInfo, title General Information; set its height to 180, its padding to 20 and its border to false
    1. To pnGeneralInfo add a panel called pnTopColumns and set its layout to column, its border to false, 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. Distribute 4 TextFields among the 2 column panels: First Name, Last Name, Email, and Mobile Phone
    2. To the bottom of pnClientDetails also add a TextArea called txtMailingAddress, FieldLabel Mailing Address, width 640
  2. Create a similar panel for Department Information for the following final result:
Find the Data Source tab
1. Click the Add button and Add a Unified Store
3. Set its ID to storeClients and click Create
4. 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
  4. In the Create tab, match all the TextFields to attributes of the Client business object in the Controls Column
  6. Click on Properties and add clientCreated(); to the Success textarea.
  8. Click Save
  9. Click Save in the Configuration window
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 select PageManager.ruleAction_execute_storeClients_Create

Click on the Source tab and add the following JavaScript to the Head tag

Code Block

language	javascript
linenumbers	true

 <script language="javascript">
    function clientCreated() {
        parent.newClientPage.close();
    }
</script>

Click on Apply Source Code
Click on Save Page at the top left of the screen, and click Ok to the Page Was Saved notification

Step 2 - Create a Search Page

Click on Presentation and then Pages.
Click New Page
From Categories, select General and from Templates select Blank; name the page Client Search; click Save.
On save you will be redirected to the detail page of the Client Search page, from here launch the Page Builder by clicking on Page Builder
In the Data Sources tab, click Add and add a Page Action; call it newClientPage
1. Right click on newClientPage and click on Properties
2. Set Data Source to New Client
3. In General Settings, check the Open Window in popup checkbox
4. Set Window Width to 800
5. Into CallBback Action Text add grdClients.getStore().reload();
7. Click Save
In the Data Source panel, add a Unified Store
Call is storeClients
Right click on storeClient and click Properties
1. Select Business Object for Data Source Type and Client as the Data Source
2. Select the List and Delete checkboxes
3. Click Save
Click on pnMain
1. In Properties, set the layout of pnMain to border
2. Drag a Grid into pnMain and call it grdClients
  1. Set its Region to Center
  2. Select grdClients in the Design panel and click on Settings in the Properties panel
  3. Set Data Source to storeClients[List]
  4. Add the following columns to the grid: First Name, Last Name, Email, Mobile Phone, and Mailing Address
  5. Click on Add Grid Column at the top of the Configuration window, and click on Command Column
  7. Click on the First arrow to move the column to the top
  8. Select the Command Column and change its header to Actions
    1. Click on the Command Columns tab
    2. Click on Add Command Column and click ActionCommand
    4. Double click on CommandName and change the name to Delete, set the idon icon to BulletCross and for action select storeClients_Delete
    5. Add another ActionCommand called Edit Detail and change its icon to PencilImage Removed Magnifier
    6. Image Added
    7. Click Save
    8. Make sure grdClients is selected and click on Listeners in the Properties panel
      1. In the Listeners Configuration window, select Command as the listener
      2. In the Fn drop down menu, select PageManager.grid_command_grdClients
      3. Image Added
      4. Click Save
  9. Make sure grdClients it selected and click on TopBar in the Properties panel
    1. Add a button called New Client with icon Add
    2. Set its Listener to Click and its Fn to PageManager.pageAction_execute_newClientPage
    3. Add a button called Export with icon PageWhiteExcel
    4. Set its Listener to Click and its Fn to PageManager.grid_export_grdClients
    5. Click Save
3. Drag an Exc Search Form into pnMain
  1. Call it searchClients and set its Region to East
  2. Click on Settings in the Properties panel
  3. Select First Name, Last Name, Email and Mobile Phone as search criteria
  5. Click Save
  6. Click on TopBar in the Properties panel
  7. Add a button called Search with icon Accept
    1. Set Listeners to Click
    2. Set Fn to PageManager to PageManager.searchForm_search_searchClients
  8. Add a button called Clear with icon Cancel
    1. Set Listeners to Click
    2. Set Fn to PageManagerto PageManager.searchForm_clear_searchClients
  9. Click Save
Click on Save Page at the top left of the screen, and click Ok to the Page Was Saved notification Image Added

Step 3 - Add Page to Application

In the Navigation Menu, click on Application and then click on User Application
Find your User Management application and click on it
Right click on the house icon and click Add Page. Image Added
1. Call it “Client Search”
2. The Target page will be Client Search
3. Click Save
4. Check that Appliction Permissions is set to allow for the Client Search Page
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.
5. Logout and Log In.
6. Select the Client Management application.
Click on the Client Search page
1. Search for any Clients in the Search panel
2. Click on New Client to add a new Client
3. Click on Export to export you list of clients into a downloadable Excel file
4. Image Added

Child pages

Versions Compared

Old Version 3

New Version Current

Key

Step 1 - Create a Simple New Client Page

Step 2 - Create a Search Page

Step 3 - Add Page to Application