Binding to multiple datasources on a single xPage


Published on

Binding to multiple datasources on a single xPage

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Binding to multiple datasources on a single xPage

  1. 1. xPages Example: Binding to multiple datasources on a single xPage Author: John Mackey Groupware Solutions Inc. J [email_address] Blog:
  2. 2. Overview <ul><li>Unlike Lotus Notes, xPages separates the presentation layer from the data </li></ul><ul><li>This presents new opportunities and allows different approaches for Web application development </li></ul><ul><li>xPages allows multiple datasources on the same page </li></ul><ul><li>A simple action “Save Datasources” handles the updates for all bound datasources </li></ul>
  3. 3. Bound to Order Form Bound to Customer Form Sample Screen shot of Orders page
  4. 4. First Step: Create your Notes forms - schema <ul><li>To get started you need to define your forms and fields </li></ul><ul><ul><li>This is not required but the xPages IDE will not be able to provide you with drop down fields and you will not be able to drag and drop from the Data Palette, so it is beneficial to create a form. </li></ul></ul>Here is the layout for the 2 forms:
  5. 5. Create your views <ul><li>There are 2 standard views: Customers & Orders </li></ul><ul><ul><li>Note: column 5 on the customers view uses @NoteID. That will be used to bind the Customer document in the Panel control. You have to strip out the “NT” prefix. </li></ul></ul>Customers Orders
  6. 6. Create the Customer xPage <ul><li>Create a new xPage named “Customers” </li></ul><ul><li>Set the Data Source </li></ul><ul><ul><li>Click Data from the Properties tab </li></ul></ul><ul><ul><li>Click the Add button and select “Domino Document” </li></ul></ul><ul><ul><li>Then select the form </li></ul></ul>
  7. 7. Create the Customer xPage (cont.) <ul><li>Next click on the Data palette link (this is cool!) </li></ul><ul><ul><li>Note: I noticed sometimes you need to click someplace on the form first before the Data Palette shows the fields </li></ul></ul><ul><ul><li>Select all the fields and drag them to the page canvas. You can rearrange or change them later </li></ul></ul><ul><ul><li>This will automatically create edit box controls in a table and setup the proper bindings </li></ul></ul>
  8. 8. Create the Orders xPage <ul><li>Follow the same basic steps from the Customer Page </li></ul><ul><ul><li>Create the new xPage named “Orders” </li></ul></ul><ul><ul><li>Set the datasource </li></ul></ul><ul><ul><li>Drag drop the fields </li></ul></ul><ul><li>Replace the “CustomerName” edit box control with a combobox control </li></ul><ul><ul><li>re-bind it to the CustomerName from the Data properties tab </li></ul></ul><ul><ul><li>Click on the Values tab and add a Formula item: </li></ul></ul><ul><ul><ul><li>@DbColumn(@DbName(),&quot;vCustomers&quot;,1) </li></ul></ul></ul>
  9. 9. Create the Orders xPage (cont) <ul><li>Add a default label of “--select--” with a value of 0 </li></ul><ul><li>use the “Up” arrows to position it as the first element </li></ul>
  10. 10. Create the Orders xPage (cont) <ul><li>Drag a Panel control to the page – this is where we bind the customer data to the xPage </li></ul><ul><ul><li>Name it “CustomerData” </li></ul></ul><ul><ul><li>Click on the Data tab for the panel and create a new Domino Document datasource named “customerDoc”, the form is “Customer”, the action is “Edit document” </li></ul></ul>
  11. 11. Create the Orders xPage (cont) <ul><li>We need to supply a document Id for the customer record </li></ul><ul><ul><li>Note: xPages use the document NoteId </li></ul></ul><ul><ul><li>We will grab the NoteId from a lookup to the vCustomers view </li></ul></ul><ul><ul><li>Click on the “Document ID” formula and enter the following Computed formula </li></ul></ul>
  12. 12. Create the Orders xPage (cont) <ul><li>Add the Customer fields to the Panel </li></ul><ul><ul><li>Click on the Data palette link </li></ul></ul><ul><ul><li>Drag and drop the fields you want to the Panel </li></ul></ul><ul><ul><li>Note: I replaced the ShippingInstructions with a Multi-line editbox in the below example </li></ul></ul>
  13. 13. Create the Orders xPage (cont) <ul><li>We need to set a property on the Panel control so that the Panel ignores any request parameters for the Orders page. </li></ul><ul><ul><li>For example: the page receives and uses parameters such as “editDocument” and “documentID”. For this use case we calculate the documentID for the Panel and so we want to ignore the page parameters. </li></ul></ul><ul><ul><li>Click on the All Properties on the Properties tab for the “CustomerData” Panel </li></ul></ul><ul><ul><li>Expand Data and set “ignoreRequestParams” to true </li></ul></ul>
  14. 14. Create the Orders xPage (cont) <ul><li>We need to make the page refresh when the Customer Name changes in the combobox </li></ul><ul><ul><li>Select the CustomerName combobox </li></ul></ul><ul><ul><li>Select the Events tab and then the onChange event </li></ul></ul><ul><ul><li>Include the following formula </li></ul></ul>
  15. 15. Create the View xPage <ul><li>You will need to create a view page for navigation </li></ul><ul><ul><li>Create a new xPage named “ViewCustomers” </li></ul></ul><ul><ul><li>Drag a Tabbed control to the page </li></ul></ul><ul><ul><ul><li>Create 2 tabs (right click – insert tab) </li></ul></ul></ul><ul><ul><ul><li>Name one “Customers”, the other “Orders” </li></ul></ul></ul><ul><ul><li>Drag a view control to the Customer tab </li></ul></ul><ul><ul><ul><li>Select your vCustomers view as the source </li></ul></ul></ul><ul><ul><ul><li>Do the same for Orders and select the vOrders view as the source </li></ul></ul></ul>
  16. 16. Create the View xPage (contd.) <ul><li>Make the first column a link </li></ul><ul><ul><li>Select the CustomerName column and set the link property </li></ul></ul><ul><ul><li>Also, select the view and set the “open selected documents using” property on the data tab </li></ul></ul><ul><ul><li>Do the same steps for the Orders view </li></ul></ul>Link property Form to use
  17. 17. Create the View xPage (contd.) <ul><li>Create 2 buttons so you can add Customers and Orders </li></ul><ul><ul><li>Drag a button </li></ul></ul><ul><ul><li>Use the following simple action (substitute for Orders) </li></ul></ul>
  18. 18. Final Steps <ul><li>Add the save buttons to the Orders & Customers page </li></ul><ul><ul><li>Drag a button </li></ul></ul><ul><ul><li>Select “Simple action” – Save Data Sources </li></ul></ul><ul><ul><li>Select the “ViewCustomers” page to open next </li></ul></ul><ul><li>Set the default xPage to open for the database on the database properties launch tab </li></ul>
  19. 19. Test the Application <ul><li>Create some Customers </li></ul><ul><li>Create some Orders and change the Customer information from the Orders page </li></ul><ul><li>Navigate to the Customer’s page and verify the Customer information was updated when the save occurred </li></ul>
  20. 20. Questions?? <ul><li>Contact me if you have any questions </li></ul><ul><ul><li>[email_address] </li></ul></ul><ul><li>or comment on my blog: </li></ul><ul><li>The Domino 8.5 discussion forum is: </li></ul><ul><ul><li> </li></ul></ul>