Page History

Step 2 - Create A Page

This application will only have one page. On the left will be a list of all clients and the right will be a form for adding new ones.

1. From the Navigation Menu, click on Presentations and then on Pages. Click on New Page.
   
   1. From Categories select General and from Templates select Blank. 
   2. Name the page Client Quick Add. 
   3. Click Save.
2. Click on Page Builder button 
3. Find the Data Sources tab
   
   1. Click the Add button and Add a Unified Store
   2. 
   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 and List checkboxes
      4. 
      5. Click Save
4. Click on the Sections tab at the top left of the screen
5. Click on pnMain and see pnMain appear in the Design panel
6. 
   
   1. Find the Properties panel at the right of the screen
      
      1. Set the Layout of pnMain to Border
      2. Click Save at the bottom of the Properties panel
      3. 
   2. From the Toolbox panel at the bottom left of the screen, drag Grid to pnMain
      
      1. Assign it ID grdClients
      2. Assign it title Clients List
      3. 
      4. In Properties, set its Region to West and Width to 200
      5. Click Save at the bottom of the Properties panel
      6. Make sure grdClients is selected and click on Settings in the Properties panel at the right of the screen
         
         1. Set Data Source to storeClients[List]
         2. Move FirstName and LastName into the columns panel
         3. Click Save
         4. 
   3. Drag another Panel to pnMain
      
      1. Assign it ID pnClientDetails
      2. 
      3. Make sure pnClientDetails is slected and in Properties set its Region to Center
      4. Click Save at the bottom of the Properties panel
      5. Double click on pnClientDetails in the Design tab to see the pnClientDetails design screen
      6. 
      7. To pnClientDetails 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
      8. Create a similar panel for Department Information (see final screen shot)
7. Right click on storeClients in the Data Source tab and click on Properties
   
   1. 
   2. In the Create tab, match all the TextFields to attributes of the Client business object in the Controls Column
   3. 
   4. Click on Properties and add the following code into the Success textarea: grdClients.getStore().reload();
   5. Image Added
   6. Click Save
   7. Click Save to save to configuration window
8. In the Sections tab, click on pnClientDetails
   
   1. In the Properties panel, click on TopBar 
   2. Click Add and add a Button, set its text to Save
   3. Click Apply
   4. Click on the Listeners tab
      
      1. Selected Click from Listeners
      2. In Fn select PageManager.ruleAction_execute_storeClients_Create
      3. 
      4. Click Save
9. Click on Save Page at the top left of the screen, and click Ok to the Page Was Saved notification 
10. Click on the Preview tab
    
    1. Type information info the fields and click Save
    2. Click Refresh and see the first and last name columns in the grid populate
    3. 

Step 3 - Security Role, Application and Deploy

1. From the Navigation Menu, click on Security and underneath it click on Roles.
   
   1. Add a Role named ClientWorker. Click Save.
2. Go to Applications and make a new User Application called “Client Management”. Upon Save you’ll get redirected to the Application Builder.
   
   1. Right click on the house icon and click Add Page. 
   2. Call it “Client Quick Add”, set it’s icon to User.
   3. The Target page will be Client Quick Add.
   4. Check the Start Page checkbox.
   5. Click Save.
3. Click on the Application Permissions tab and then the Edit button. Set the ClientWorker to Allow and click Save.
4. 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. On the top left where it says Application Studio, switch to System Setup.
6. From the Navigation Menu, click on User Management and underneath it click on Users.
7. Find yourself in that list and click on the blue link.
8. Go to the User Roles tab.
   
   1. Click Edit and move the ClientWorker for your solution to the right and click Save.
9. Logout and Log In.
10. Select the Client Management application.

Screenshot