IBM Notes and Domino 9 Social Edition includes many new controls to make it easier to develop a great web 2.0 user interface for your XPages applications. This session will focus on those new controls that deliver the most in terms of rapidly building an exceptional user experience. Learn how to use the form table and the data view controls to surface IBM Domino data with a modern web interface. Then learn to use navigators, dialogs, value pickers, the in place form, tooltips and Dojo UI controls to allow your users to interact with your application. Finally, you'll learn how to set up the application layout control to provide an interface framework with menus using the IBM OneUI interface or even Twitter Bootstrap. Speakers: Howard Greenberg and Paul Della-Nebbia from TLCC

1. JMP102:
Creating a Great
XPages User Interface
Howard Greenberg, TLCC
Paul Della-Nebbia, TLCC
© 2014 IBM Corporation

2. Acknowledgements and Disclaimers
Availability. References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates.
The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They are provided for informational purposes only, and are neither
intended to, nor shall have the effect of being, legal or other guidance or advice to any participant. While efforts were made to verify the completeness and accuracy of the information
contained in this presentation, it is provided AS-IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise
related to, this presentation or any other materials. Nothing contained in this presentation is intended to, nor shall have the effect of, creating any warranties or representations from IBM or
its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software.
All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and
performance characteristics may vary by customer. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you
will result in any specific sales, revenue growth or other results.
© Copyright IBM Corporation 2014. All rights reserved.
 U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 IBM, the IBM logo, ibm.com, Domino, and Notes are trademarks or registered trademarks of International Business Machines Corporation in the United States, other countries, or both. If
these and other IBM trademarked terms are marked on their first occurrence in this information with a trademark symbol (® or ™), these symbols indicate U.S. registered or common law
trademarks owned by IBM at the time this information was published. Such trademarks may also be registered or common law trademarks in other countries. A current list of IBM
trademarks is available on the Web at “Copyright and trademark information” at www.ibm.com/legal/copytrade.shtml
Other company, product, or service names may be trademarks or service marks of others.
2

3. Who are we?
 Howard Greenberg & Paul Della-Nebbia
– Teaching Notes and Domino since 1994
– Partners at TLCC, the Leader in Notes and Domino Training
– And Now, the Leader in XPages Training
3

4. About TLCC
 Lots of XPages Courses for both 9 and 8.5!
‒
‒
‒
‒
‒
Introduction to XPages Development … FREE !!
JavaScript for XPages Development
XPages Development 1
XPages Development 2
Rapid XPages Development Using the Application
Layout and Dojo UI Controls
‒ Mobile XPages for Domino
‒ Java 1 for XPages Developers
‒ Java 2 for XPages Developers
 Self Paced Training
‒ Learn anywhere!
‒ An Instructor is a click away
 Instructor Led (Private)
‒ Online or at your site
 TLCC Mentoring Services
4

5. Goal: Make a More Usable, Better Looking XPages
Application!
Data View
View Panel
Demo100_ViewPanel
Demo761_CustByNameView
5

6.  Prerequisites & Configuration
 Form Table control
 Data View control
 Dojo Form controls
 Dialogs and Value pickers
 Navigation controls
 Application Layout Design Framework
 Wrap up
6

7. System Prerequisites
 Notes and Domino 8.5.3 (Install Extension Library from
OpenNTF or IBM’s Update Pack 1)
– Domino Server
• Copy files or use an Update Site Database (preferred)
– Designer
• Install Plugin
– Notes client (only needed for XPINC apps)
• Use Update Site
 Notes and Domino 9 (Extension Library is already included for
Domino server, Designer, and Notes clients)
– Optionally install Bootstrap4XPages plugin - to use Bootstrap
and Bootstrap responsive themes
7

8. Application Configuration
8

9.  Prerequisites & Configuration
 Form Table control
 Data View control
 Dojo Form controls
 Dialogs and Value pickers
 Navigation controls
 Application Layout Design Framework
 Wrap up
9

10. Form Table
 Quickly create input area for editing and
reading
 Server-side validation error messages
– Either at top or next to field control
 Header area
– title and description at top
– content area
 labels can be positioned above or left of
the input controls
 required field indicator ( * )
Note: Need IBM OneUIV2 Theme to display (or
BootStrap4Xpages)
 Footer area (use for buttons)
 Multi-column
Demo101_FormTable
10

11. What’s a facet?
 Not a flat surface of a jewel, think the other definition
– “part or element of something”
 It is a place to add control(s) to a control
 Either Named or Unnamed
– Example of Unnamed
• Where the Form Column and Form Row controls
go in the Form Table control
• Can have as many as you want
– Example of Named
• Footer area of Form Table
• Uses the XP:Key to denote where the facet area is
attached to
• Can only have ONE (but can add a panel)
 Used Extensively on XPages Controls
11

12. Named versus Unnamed Facets
12

13.  Prerequisites & Configuration
 Form Table control
 Data View control
 Dojo Form controls
 Dialogs and Value pickers
 Navigation controls
 Application Layout Design Framework
 Wrap up
13

14. Data View
Data View
View Panel
14

15. What’s Better About the Data View
 A completely different interface
– styling differences for links, pagers, column headings, column text, etc…
 A Summary column (or facet to add anything)
 A row detail area
– shown or hidden all at once or individually
– can have other controls to allow:
• in-view editing
• look-ups to other data
• single page read-only applications
 additional pager types and locations available
 additional columns are right-aligned
 Note: Need IBM OneUIV2 Theme to display (or Bootstrap4XPages)
15

16. New Pagers
 New pagers in addition to standard pager control
– Use with any iterator control (repeat, Data
Table, View)
 pagerDetail – show/hide details for all rows (Data
View only)
 pagerSizes - choose the number of rows per
page to display
 pagerAddRows - append more rows (great for
mobile)
 pagerExpand – expand/collapse all rows)
 pagerSaveState – Not really a pager,
save/restore the view state (return to same page)
– Used with viewStateBean
16
Demo151DataView
Demo153DataView
Demo154DataView

17.  Prerequisites & Configuration
 Form Table control
 Data View control
 Dojo Form controls
 Dialogs and Value pickers
 Navigation controls
 Application Layout Design Framework
 Wrap up
17

18. Dojo Form Controls
 An easy way to increase input usability!
 Client-side – does not require a server round-trip
 Uses Dojo Toolkit
– 1.8 for Domino 9, 1.6 for 8.5.3
 Either extends a control with added functionality
– Dojo Combo Box
 Or, adds entirely new functionality
– Dojo Slider Rule or Dojo Number Spinner
18

19. Dojo Validation Text Box
 Immediately validate text entry using:
– Required: user must enter something
– A Regular Expression to validate content
 User sees prompt when entering field
 User gets immediate feedback
 No JavaScript alerts!
 Must Require User Input
– Either set the required property to true
– Or, provide a Required Validator
 Optionally, provide a Regular Expression
 Server Side Validators (like length) still use Error
Message Control
19
Demo210_ValidationTextBox

20. Dojo Combo Box and Filtering Select
 Provides Type Ahead along with a drop-down selection
– Dojo Combo Box allows the entry of values not in list
– Dojo Filtering Select only allows user to select supplied values
 Optionally can limit the number of items shown
 Filtering Select adds support for:
– label | value pairs
– built-in validation for entered values
– Can provide a tooltip prompt
 Tip! Create a standard Combo Box to build Select Items and copy
via source view to the Dojo Combo Box or Filtering Select
Demo220_FilteringSelect
20

21. Dojo Number Text Box and Dojo Currency Text Box
 Add number constraints with messages displayed as a tooltip
– User gets immediate feedback
 Can provide a tooltip prompt
 Can set a pattern (to standardize format instead of allowing for
locale changes)
 Can set decimal places
 Display Options
– Decimal
– Percent
– Currency
Demo230_Number
 Currency Text Box adds ability to fix the currency symbol
– ISO 4217 three letter sequence
21

22. Dojo Spinner
 User can type in a number or use up/down arrows
 Extension of Dojo Number Text Box
 Set constraints and tooltips
 Set a value for the increment/decrement when:
– User uses up or down arrow keys or clicks arrow (smallDelta)
– User uses page up or down key (largeDelta)
Demo240_Spinner
22

23. Dojo Slider
 Horizontal or Vertical (two different controls)
 User can drag slider, use arrows, or click on slider to set value
 Optional Slider Rule and Slider Rule Labels
 Set a value for the increment/decrement when:
– User uses up or down arrow keys or clicks arrow (smallDelta)
– User uses page up or down key (largeDelta)
 User does not see value selected
– Can add via the onchange Client side event
– Get the value via CSJS and write to a computed field
Demo250_Slider
23

24.  Prerequisites & Configuration
 Form Table control
 Data View control
 Dojo Form controls
 Dialogs and Value pickers
 Navigation controls
 Application Layout Design Framework
 Wrap up
24

25. Dialog Control
 Displays a modal dialog
 Related controls (optional but useful!)
– dialogButtonBar – placeholder for buttons
– dialogContent – placeholder for content
 Opening and Closing a Dialog Control
– Client Side JavaScript
• XSP.openDialog("#{id:dialogId }")
• XSP.closeDialog("#{id:dialogId }","#{id:refreshId }" );
– Server Side JavaScript (use getComponent(“id”) for dialogComponent)
• dialogComponent.show( )
• dialogComponent.hide(refreshId )
25

26. Dialog Control Strategies
Different ways to accept input and pass values back to “calling” page
 Use the same data source for both “calling” page and dialog
– easy to implement
 Have a different data source for dialog content
– Dialog close button saves data source in dialog
 Bind the same scoped variables in dialog and on “calling” page
 Pass values using the getValue() and setValue() methods
– Use getValue() to get values from dialog controls
– Use setValue() to write to controls on “calling” page
– Least preferred way!
Demo310DataView
Demo310Input
26

27. Value Picker
 Present a dialog to user to select a value(s)
 Data Providers
– xe:simpleValuePicker - hard coded or computed choices
– xe:dominoViewValuePicker – uses Domino view
– xe:beanValuePicker – the choices are from a Java bean
 Value Picker is for selection only, must be bound to a control
like an Edit Box which is bound to the data source
 Options
– Support for Label | Value pairs (value is always first sorted
column in view)
– Single or Multi-value
– Optionally use checkboxes
– Add search capability
– Type Ahead in Edit Box (values are from Value Picker)
27
Demo320_ValuePicker

28. Value Picker Validation
 Can set target control to only allow values that are in the Value Picker
– Use case: When user types in a value in the target control (Edit Box)
 New Validator: xe:pickerValidator
Demo330_ValuePickerValidation
28

29. Dojo List Text Box and Value Pickers
 Works Great Together!
 In Edit mode user can delete entries with the X
 In Read mode only the values show
 Specify a MultipleSeparator
 Works with Label | Value Pairs too
– displayLabel property set to true
 Use onChange event to trigger refresh if needed
29
Demo340_DojoListTextBox

30. Tooltip and Tooltip Dialog
 Both display a tooltip with content
– Non-modal, they go away when user clicks elsewhere or moves cursor
 Tooltip is for displaying text when user hovers over a control
– Tooltip goes away when user moves cursor off control
– Doesn’t work for all controls or for panels
– Tie the Tooltip control to the desired control the user hovers over
 Tooltip Dialog is opened via code
30

31. Tooltip
 Used for displaying information when user hovers over a control
– Goes away when user moves mouse off control (onMouseOut)
– No need for any code
 for property defines what control
 Either use:
– label property for one value (Simple)
– Put content between tooltip tags and set dynamicContent=“true” (Complex)
Demo350_Tooltip
31

32. Tooltip Dialog
 Useful to allow user to edit information
– Requires code to open
– Closes when user clicks outside toolip or via code (button or link)
 Open via Client Side JavaScript
– XSP.openTooltipDialog("#{id:tooltipDialogId }","#{id:tooltipTargetId }")
– No Server Side equivalent
 Close via Client Side or Server Side JavaScript
– Client Side: XSP.closeTooltipDialog("#{id:tooltipDialogId }","#{id:refreshId }" );
– Server Side: dialogComponent.hide(refreshId )
 Put all content inside TooltipDialog tags
– No label property like Tooltip
32

33. Dialog vs. Tooltip Dialog
Dialog
Tooltip Dialog
Demo360_DojoTooltipDialog
33

34. InPlaceForm
 Displays a dialog “in-line” on the page
– Shifts contents down (unlike Tooltip Dialog)
– Only closed via buttons
 Related controls (optional but useful!)
– dialogButtonBar – placeholder for buttons
– dialogContent – placeholder for content
 Creates components when opened
 Opened and closed via SSJS
 Great for use in a Data View, Repeat, etc.
34

35. InPlaceForm Methods, Properties, and Events
 Open the InPlace Form
– inPlaceFormComponent.show( )
 Close the InPlace Form
– inPlaceFormComponent.hide( )
 Toggle the InPlaceForm
– inPlaceFormComponent.toggle( )
 Determine if InPlaceForm is being shown/hidden
– inPlaceFormComponent.isVisible( )
 Events (SSJS only)
– beforeContentLoad
– afterContentLoad
Demo370_InPlaceForm
35

36. Inline View Editing Made Easy!
 Edit Domino data right in the view!
 Use a Data View with an InPlace Form in the Details
Demo380_InPlaceForm_DataView
36

37.  Prerequisites & Configuration
 Form Table control
 Data View control
 Dojo Form controls
 Dialogs and Value pickers
 Navigation controls
 Application Layout Design Framework
 Wrap up
37

38. Navigation Controls
 Dozen or so navigation type controls
 Most use TreeNodes for items
 Set submitValue property for each item
– onItemClick event to find out what user clicked (CSJS or SSJS)
 Navigator control is most useful when combined with Application
Layout control
– selected property used to determine which item is highlighted
38

39. Tree Nodes – Builds the list
 xe:basicLeafNode
 xe:basicContainerNode
 xe:separatorTreeNode
 xe:dominoViewEntriesTreeNode
 xe:dominoViewListTreeNode
 xe:pageTreeNode
 xe:repeatTreeNode
 xe:loginTreeNode
 xe:userTreeNode
 xe:beanTreeNode
39

40. One onItemClick event per control
 Code to determine what the user clicked (submitValue property is returned)
– CSJS … XSP.getSubmitValue()
– SSJS … context.getSubmittedValue()
40
DemoXPage617

41. Navigator control
 Best navigator control for use in LeftColumn
facet of Application Layout control
– node for currently displayed page is
automatically selected (pageTreeNode)
– selected property can be coded when
other types of nodes
• dominoViewEntriesTreeNode
• dominoViewListTreeNode
41
DemoXPage619
DemoXPage621a, 621b, 621c

42. Toolbar control
 Good control for functionality of Form and View Action Bars
42
DemoXPage652View
DemoXPage652Input

43. Popup Menu control
 Popup menu navigation
 Code an event on a button or link to popup the menu using XSP.openMenu
DemoXPage642
43

44.  Prerequisites & Configuration
 Form Table control
 Data View control
 Dojo Form controls
 Dialogs and Value pickers
 Navigation controls
 Application Layout Design Framework
 Wrap up
44

45. Six Facets and Five Bar Areas
45

46. One onItemClick event for All Nodes in Configuration
 onItemClick – triggered when any node in any of its configuration properties is fired,
including:
– bannerApplicationLinks
SSJS - get submitted value for clicked node:
– bannerUtilityLinks
– titleBarTabs
– placeBarActions
– footerLinks
CSJS - get the submit value for clicked node:
DemoXPage711, DemoXPage712
46

47. Designing an Application Layout in a Custom Control
Demo761_CustByNameView
47

48. Designing an Application Layout in a Custom Control
 Enable all six facet areas in the
applicationLayout by adding an Editable
Area control (xp:callback) to each facet
 Add Property Definitions to the custom
control to pass property values from the
XPage to ccAppLayout (like
navigationPath, enableSearch,
enableSalesBar enablePartsBar, etc…)
48

49. Designing an Application Layout in a Custom Control
(procedure)
 Step 1: Create a Custom Control and drag in an Application Layout control
– Choose a OneUI version 2.1 theme
49

50. Designing an Application Layout in a Custom Control
(procedure continued)
 Step 2: Set the configuration properties:
– Banner nodes
– Title Bar nodes (tabs)
– Place Bar nodes (buttons)
– Footer links
– Legal text
50

51. Designing an Application Layout in a Custom Control
(procedure continued)
 Step 3: Enable required columns (not the recommended approach)
– Left column
– Middle column
– Right column
51

52. Designing an Application Layout in a Custom Control
(procedure continued)
 Step 3: Enable ALL SIX facet areas in the applicationLayout by adding an
Editable Area control (xp:callback) to each facet
52

53. Designing an Application Layout in a Custom Control
(procedure continued)
 Step 3 continued: Establish a Naming Convention for facets and panels
53

54. Designing an Application Layout in a Custom Control
(procedure continued)
 Step 4: Add Property Definitions to the custom control to pass property values from the
XPage to ccAppLayout (like navigationPath, enableSearch, enableSalesBar, etc…)
54

55. Navigation and Context – You are Here!
Demo761_AppLayout (custom control)
Demo761_CustByNameView
55

56. Application Configuration for Bootstrap4XPages
 Install Bootstrap4XPages plugin
– Domino sever
– Domino Designer
– Notes client (for XPiNC)
 Application settings (xsp.properties)
– xsp.library.depends=
com.ibm.xsp.extlib.library,
org.openntf.xsp.bootstrap.library
– xsp.theme= (one of these)
• bootstrapv2.3.2
• bootstrapv2.3.2r
• bootstrapv3.0.0
56
DemoXPage721

57.  Prerequisites & Configuration
 Form Table control
 Data View control
 Dojo Form controls
 Dialogs and Value pickers
 Navigation controls
 Application Layout Design Framework
 Wrap up
57

58. Get the Slides and Demo Database
http://www.tlcc.com/JMP102
58

59. Key Points
 Great stuff in the Extension Library
– Build better looking apps faster
 Data View and Form Table make your apps look very Web 2.0
 OneUI is a very good idea
 The Application Layout control is used to Rapidly develop a consistent user interface that
can implement the “One UI” design framework (awesome)
 Application Layout control + Bootstrap4XPages (totally awesome)
59

60. Other Suggested Sessions
 BP202 - Rapid XPages Development Using the Application Layout Control, Thursday at 11:00
– with Howard and Paul!
 SHOW102 - XPages: Still No Experience Necessary, Wednesday at 10:30
 CUST104 - XPages at SMC Corporation: See how XPages can drive business forward, Wednesday at 11:15
 AD302 - Get the Best Out of Bootstrap with Bootstrap4XPages, Tuesday at 3:00
 AD503 - XPages Mobile Development in IBM Domino 9.0.1 and Beyond, Thursday at 10:00
 BP204 - It's Not Infernal: Dante's Nine Circles of XPages Heaven, Tuesday at 10:00
 BP203 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality, Tuesday at 1:30
Reminder: Slides and Demo Database are at:
http://www.tlcc.com/JMP102
60

61.  Access Connect Online to complete your session surveys using any:
– Web or mobile browser
– Connect Online kiosk onsite
61