xPages Example: Binding to multiple datasources on a single xPage

1
xPages Example Binding to multiple datasources
on a single xPage
Author John Mackey Groupware Solutions
Inc. John.Mackey_at_Groupwareinc.com Blog
http//www.jmackey.net
2
Overview

• Unlike Lotus Notes, xPages separates the
  presentation layer from the data
• This presents new opportunities and allows
  different approaches for Web application
  development
• xPages allows multiple datasources on the same
  page
• A simple action Save Datasources handles the
  updates for all bound datasources

3
Sample Screen shot of Orders page
Bound to Order Form
Bound to Customer Form
4
First Step Create your Notes forms - schema

• To get started you need to define your forms and
  fields
• 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.

Here is the layout for the 2 forms
5
Create your views

• There are 2 standard views Customers Orders
• Note column 5 on the customers view uses
  _at_NoteID. That will be used to bind the Customer
  document in the Panel control. You have to strip
  out the NT prefix.

Customers
Orders
6
Create the Customer xPage

• Create a new xPage named Customers
• Set the Data Source
• Click Data from the Properties tab
• Click the Add button and select Domino Document
• Then select the form

7
Create the Customer xPage (cont.)

• Next click on the Data palette link (this is
  cool!)
• Note I noticed sometimes you need to click
  someplace on the form first before the Data
  Palette shows the fields
• Select all the fields and drag them to the page
  canvas. You can rearrange or change them later
• This will automatically create edit box controls
  in a table and setup the proper bindings

8
Create the Orders xPage

• Follow the same basic steps from the Customer
  Page
• Create the new xPage named Orders
• Set the datasource
• Drag drop the fields
• Replace the CustomerName edit box control with
  a combobox control
• re-bind it to the CustomerName from the Data
  properties tab
• Click on the Values tab and add a Formula item
• _at_DbColumn(_at_DbName(),"vCustomers",1)

9
Create the Orders xPage (cont)

• Add a default label of --select-- with a value
  of 0
• use the Up arrows to position it as the first
  element

10
Create the Orders xPage (cont)

• Drag a Panel control to the page this is where
  we bind the customer data to the xPage
• Name it CustomerData
• 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

11
Create the Orders xPage (cont)

• We need to supply a document Id for the customer
  record
• Note xPages use the document NoteId
• We will grab the NoteId from a lookup to the
  vCustomers view
• Click on the Document ID formula and enter the
  following Computed formula

12
Create the Orders xPage (cont)

• Add the Customer fields to the Panel
• Click on the Data palette link
• Drag and drop the fields you want to the Panel
• Note I replaced the ShippingInstructions with a
  Multi-line editbox in the below example

13
Create the Orders xPage (cont)

• We need to set a property on the Panel control so
  that the Panel ignores any request parameters for
  the Orders page.
• 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.
• Click on the All Properties on the Properties tab
  for the CustomerData Panel
• Expand Data and set ignoreRequestParams to true

14
Create the Orders xPage (cont)

• We need to make the page refresh when the
  Customer Name changes in the combobox
• Select the CustomerName combobox
• Select the Events tab and then the onChange event
• Include the following formula

15
Create the View xPage

• You will need to create a view page for
  navigation
• Create a new xPage named ViewCustomers
• Drag a Tabbed control to the page
• Create 2 tabs (right click insert tab)
• Name one Customers, the other Orders
• Drag a view control to the Customer tab
• Select your vCustomers view as the source
• Do the same for Orders and select the vOrders
  view as the source

16
Create the View xPage (contd.)

• Make the first column a link
• Select the CustomerName column and set the link
  property
• Also, select the view and set the open selected
  documents using property on the data tab
• Do the same steps for the Orders view

Link property
Form to use
17
Create the View xPage (contd.)

• Create 2 buttons so you can add Customers and
  Orders
• Drag a button
• Use the following simple action (substitute for
  Orders)

18
Final Steps

• Add the save buttons to the Orders Customers
  page
• Drag a button
• Select Simple action Save Data Sources
• Select the ViewCustomers page to open next
• Set the default xPage to open for the database on
  the database properties launch tab

19
Test the Application

• Create some Customers
• Create some Orders and change the Customer
  information from the Orders page
• Navigate to the Customers page and verify the
  Customer information was updated when the save
  occurred

20
Questions??

• Contact me if you have any questions
• John.Mackey_at_Groupwareinc.com
• or comment on my blog http//www.jmackey.net
• The Domino 8.5 discussion forum is
• http//www-10.lotus.com/ldd/nd85forum.nsf