Simple Insert Form

Design the page

Next we'll create a page for creating a new record for the Customer Business Object.

1. Read the Pages document on how to create pages. Create a page with the following information:

   Property	Value
   Template	General -> Blank
   Page Name	NewCustomer
   Form Type	Modify

2. Open this page's Page Builder
3. Go to the Data Source tab on the top left of the Page Builder
4. Click on the arrow next to the Add button and select Unified Store. The Create window shows up.
5. Set the ID value to storeCustomer.
6. Click the Create button on the top left of the window.
7. Make sure the storeCustomer is selected in the left panel and click the  button in the right Properties panel. The Configuration windows shows up.

8. Fill in the following properties:

   Property	Value
   Data Source Type	Business Objects
   Data Source	Customer

9. We want to use this store to create a new record. Check the Create checkbox.
10. Click the  button on the bottom right of the window.
11. Click on the Sections tab on the upper left side to see all the major layouts on your page. You should see  in the node. Click on pnMain. You should see something like this:
    

12. The pnMain is our starting panel that extends to the entire size of the browser. We're going to configure it so that we can put form elements in it and have it line up nicely. To do this we need to change some of it's properties. On the bottom half of the right panel is a list of properties for pnMain. Find and and set the following properties:

    Property	Value	Description
    AutoScroll	true	In case your have a lot of fields in your form, this will make a scroll bar in your panel.
    Border	false	By default this panel has a gray bolder around it, we don't need it so set this property to false.
    Cls	edit-form	This is a special CSS class that gives the standard AppBase look-and-feel to editable forms. It has some standard colors and other styles.
    Layout	form	This manages how the child elements will look inside this panel. Setting it to "form" puts form elements one under the other with a labels.
    Padding	20	This puts a bit of space between the edges of this panel and form elements in it. Just makes it look nice.

    Click on the  button on the bottom of this Property panel.

13. Go to the Data Source tab on the top left of the Page Builder.
14. Click on . The toolbar shows a list of all fields we set up in the Unified Store. You screen should look like:
    
15. Select the FirstName field from the Toolbox and drag it to the top left box in the middle pnMain panel.
    
16. When you drop it in the box, the Add Field popup appears. Set the Width to 250 and click the  button on the top-left of this window.
17. Drag in LastName in the box right under where you dragged in FirstName. Set the Width to 250 and click the  button on the top-left of this window.
18. Drag in AccountID in the box right under where you dragged in LastName. Set the Width to 250 and click the  button on the top-left of this window.
19. Click on the Preview tab on the top of the Page Builder.  You should see something like this:
    
20. Now we're going to add a button to the page that will interact with our Unified Store that we created earlier to create a new customer. Click on the Sections tab on the upper left side to see all the major layouts on your page. You should see  in the node. Click on pnMain.
21. Click the  button in the right Properties panel. The Configuration windows shows up.

22. Click on the arrow next to the  button and select Button. A row appears, select it. On the right the field Text and Icon are populated. Set the following properties in it:

    Property	Value
    Text	Save
    Icon	Disk

23. Click the  button on the bottom right of this window.
24. Select the pnMain_TopBar_bt row again that was created when you clicked Add->Button in the earlier step. 
25. Select the Listeners tab. A page shows up with a list of listeners and their properties.
26. Select Click from the Listeners grid. 
27. In the Fn property, select PageManager.ruleAction_execute_storeCustomer_Create. This will execute the Create function in the Unified Store when the button is prrssed.
28. Click the  button on the bottom right of this window.
29. Click the  button on the bottom right of this window.
30. Click on the Preview tab on the top of the Page Builder.  You should now see a toolbar on the top of your form with a Save button:
    
31. The page in the preview should be fully functional at this point. Click the  and OK when the confirmation popup come up.
32. We're going to do one more set of steps before testing this page out. Go to the Data Sources tab in the left panel and select the storeCustomer, then click the  button in the right Properties panel. The Configuration window pops up.
33. Select the Create tab.
34. Click the Properties button in the Schema toolbar. The Create Properties window shows up.
35. In the Success text area, write: alert('Success');
36. Click Save in the Create Properties window..
37. Click Save on the bottom of the Configuration window.
38. Go to the Preview tab on the top of the Page Builder.
39. In the form we just created, add some test information like this:
    
40. Click Save in the form. Upon a successful save you should see a pop-up with the words Done.
41. The page in the preview should be fully functional at this point. Click the  and OK when the confirmation popup come up.

You're done!