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 webinar 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.

1. Creating a Great XPages User Interface
Tweet about this event: #XPages
and mention us: @teamstudio @TLCCLTD
@PaulDN
February 13, 2014

2. Courtney Carter
Inbound Marketing Specialist
@teamstudio
teamstudio.com
@TLCCLTD
tlcc.com

3. Who We Are
• Our background is in creating tools for collaborative
computing in mid-size and large enterprises,
primarily for IBM Notes
• Easy-to-use tools for developers and administrators
• 2300+ active customers, 47 countries
• Offices in US, UK and Japan
• Entered mobile space in 2010 with Unplugged: easy
mobilization of Notes apps to Blackberry, Android
and iOS

4. Teamstudio Unplugged
• Your mobile Domino server: take your Notes apps
with you!
• End-users access Notes applications from mobile
devices whether online or offline
• Leverages existing skills and technology – XPages –
a replication model you already know
• Unplugged 3.0 recently released
• IBM Collaboration Solutions Award Winner 2013 and
2014

5. Unplugged Templates
•
Continuity – Mobile offline access to
BCM programs
•
OneView Approvals – Expense
approvals; anywhere, anytime
•
CustomerView – lightweight CRM
framework for field sales and field
service teams
• Contacts – customer information database
• Activities – customer activity log
• Media – mobile offline file storage and access

6. • Next Teamstudio/TLCC webinar: March 13, 2014
• Next Wireless Wednesdays webinar: Part 2 on March 5, 2014
o Learn Domino mobile development
• Promotion:
o Demo CustomerView and be entered to win an iPad
Mini

7. Creating a Great XPages UI
Your Hosts and Presenters Today:
Howard Greenberg
TLCC
@TLCCLtd
Paul Della-Nebbia
#XPages
TLCC
@PaulDN
1

8. TLCC Courses and Services
• The Leader in Notes and Domino Training since
1997
• Self Paced Distance Learning Courses for
Notes/Domino
– XPages, Development, and Administration (user too!)
• OnSite Private Classes
• Mentoring/Consulting Services
• Free demo courses
– Intro. To XPages Development
– Application Development 1
2

9. • Save hundreds and even Thousands of Dollars
on the most popular courses and packages
• Through February 28th
www.tlcc.com/admin/tlccsite.nsf/pages/connectsale
3

10. Upcoming and Recorded Webinars
Next Webinar – In March 13th
Application Layout Control with Howard and Paul
www.tlcc.com/xpages-webinar
View Previous Webinars
(use url above)
4

11. Engage User Conference
• In Europe? Don’t Miss Engage (formerly BLUG)
– March 16th and 17th
– FREE!
– Over 50 breakout sessions by
the leading experts, the list is now available
• Tack on an extra day of training on March 18th
– Admin topic: Managing a Cross System Identity
– Developer topic: Rapid XPages Development
• With Howard Greenberg
• Get TLCC’s Four Day Rapid XPages Development course as part of
the tuition!!!
– A $600 value by itself!
Click here for more information
5

12. Asking Questions
Q & A at the end!
Type in your
questions as they
come up
6

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

14. Agenda
• Prerequisites & Configuration
• Form Table control
• Data View control
• Dojo Form controls
• Dialogs and Value pickers
• Navigation controls
• Introduction to Application Layout
• Q&A
8

15. 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
9

16. Application Configuration
10

17. Agenda
• Prerequisites & Configuration
• Form Table control
• Data View control
• Dojo Form controls
• Dialogs and Value pickers
• Navigation controls
• Introduction to Application Layout
• Q&A
11

18. 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 ( * )
• Footer area (use for buttons)
• Multi-column
Note: Need IBM OneUIV2 Theme to display
(or BootStrap4Xpages)
Demo101_FormTable
12

19. 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
13

20. Named versus Unnamed Facets
14

21. Agenda
• Prerequisites & Configuration
• Form Table control
• Data View control
• Dojo Form controls
• Dialogs and Value pickers
• Navigation controls
• Introduction to Application Layout
• Q&A
15

22. Data View
Data View
View Panel
16

23. 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)
17

24. 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
Demo151DataView
Demo153DataView
Demo154DataView
18

25. Agenda
• Prerequisites & Configuration
• Form Table control
• Data View control
• Dojo Form controls
• Dialogs and Value pickers
• Navigation controls
• Introduction to Application Layout
• Q&A
19

26. 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
20

27. 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
Demo210_ValidationTextBox
21

28. 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
22

29. 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
• Currency Text Box adds ability to fix the currency symbol
– ISO 4217 three letter sequence
Demo230_Number
23

30. 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
24

31. 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
25

32. Agenda
• Prerequisites & Configuration
• Form Table control
• Data View control
• Dojo Form controls
• Dialogs and Value pickers
• Navigation controls
• Introduction to Application Layout
• Q&A
26

33. 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 )
27

34. 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)
Demo320_ValuePicker
28

35. 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
29

36. 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
•
•
•
•
•
Demo340_DojoListTextBox
30

37. 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
31

38. 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
32

39. 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
33

40. Dialog vs. Tooltip Dialog
Dialog
Tooltip Dialog
Demo360_DojoTooltipDialog
34

41. 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.
35

42. 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
36
36

43. 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
37

44. Agenda
• Prerequisites & Configuration
• Form Table control
• Data View control
• Dojo Form controls
• Dialogs and Value pickers
• Navigation controls
• Introduction to Application Layout
• Q&A
38

45. 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
39

46. 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
40

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

48. 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
DemoXPage619
DemoXPage621a, 621b, 621c
42

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

50. Agenda
• Prerequisites & Configuration
• Form Table control
• Data View control
• Dojo Form controls
• Dialogs and Value pickers
• Navigation controls
• Introduction to Application Layout
• Q&A
44

51. Six Facets and Five Bar Areas
45

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

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

54. 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
DemoXPage721
48

55. Agenda
• Prerequisites & Configuration
• Form Table control
• Data View control
• Dojo Form controls
• Dialogs and Value pickers
• Navigation controls
• Introduction to Application Layout
• Q&A
49

56. Get the Slides and Demo Database
www.tlcc.com/feb-webinar
50

57. Want to Learn More?
Rapid XPages Development using Application Layout and Dojo UI Controls Course
• Self paced course
• Four Days of content
• Lots of demos/activities
• An instructor is a click away
• On sale for only $599
• Save $300!
More information on the 8.5 version
More information on the 9.0 version
51

58. Questions????
Use the Q&A pane in WebEx
to ask questions
We will answer your questions
verbally
52

59. Question and Answer Time!
Paul Della-Nebbia
Howard Greenberg
Download the demo - www.tlcc.com/feb-webinar
Upcoming Events:
TLCC Olympic Sale
Engage in the Netherlands, March
TLCC TackItOn the day after!
TLCC Questions?
howardg@tlcc.com paul@tlcc.com
888-241-8522 or 561-953-0095
Courtney Carter
#XPages
@ptcalhoun
17th-18th
@TLCCLtd
@Teamstudio
@PaulDN
Teamstudio Questions?
contactus@teamstudio.com
877-228-6178
53