Creating a Great XPages User Interface
Tweet about this event: #XPages and mention us: @teamstudio @TLCCLTD
@PaulDN February 13, 2014
@teamstudio teamstudio.com
@TLCCLTD
tlcc.com
Courtney Carter Inbound Marketing Specialist
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
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
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
• 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
Creating a Great XPages UI
1
#XPages
Your Hosts and Presenters Today:
Howard Greenberg TLCC
@TLCCLtd
Paul Della-Nebbia TLCC
@PaulDN
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
3
• 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
Upcoming and Recorded Webinars
4
Next Webinar – In March 13th Application Layout Control with Howard and Paul
www.tlcc.com/xpages-webinar
View Previous Webinars (use url above)
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
Asking Questions
6
Q & A at the end! Type in your questions as they come up
Goal: Make a More Usable, Better Looking XPages Application!
7
Data View
View Panel
Demo100_ViewPanel Demo761_CustByNameView
Agenda
8
• Prerequisites & Configuration • Form Table control • Data View control • Dojo Form controls • Dialogs and Value pickers • Navigation controls • Introduction to Application Layout • Q & A
System Prerequisites
9
• 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
Application Configuration
10
Agenda
11
• Prerequisites & Configuration • Form Table control • Data View control • Dojo Form controls • Dialogs and Value pickers • Navigation controls • Introduction to Application Layout • Q & A
Form Table
12
• 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
What’s a facet?
13
• 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
Named versus Unnamed Facets
14
Agenda
15
• Prerequisites & Configuration • Form Table control • Data View control • Dojo Form controls • Dialogs and Value pickers • Navigation controls • Introduction to Application Layout • Q & A
Data View
16
Data View
View Panel
What’s Better About the Data View
17
• 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)
New Pagers
18
• 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
Agenda
19
• Prerequisites & Configuration • Form Table control • Data View control • Dojo Form controls • Dialogs and Value pickers • Navigation controls • Introduction to Application Layout • Q & A
Dojo Form Controls
20
• 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
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
Dojo Combo Box and Filtering Select
22
• 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
Dojo Number Text Box and Dojo Currency Text Box
23
• 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
Dojo Spinner
24
• 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
Dojo Slider
25
• 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
Agenda
26
• Prerequisites & Configuration • Form Table control • Data View control • Dojo Form controls • Dialogs and Value pickers • Navigation controls • Introduction to Application Layout • Q & A
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
Value Picker
28
• 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
Value Picker Validation
29
• 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
Dojo List Text Box and Value Pickers
30
• 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
Tooltip and Tooltip Dialog
31
• 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
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
Tooltip Dialog
33
• 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
Dialog vs. Tooltip Dialog
34
Tooltip Dialog
Dialog
Demo360_DojoTooltipDialog
InPlaceForm
35
• 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.
InPlaceForm Methods, Properties, and Events
36
• 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
36
Demo370_InPlaceForm
Inline View Editing Made Easy!
37
• Edit Domino data right in the view! • Use a Data View with an InPlace Form in the Details
Demo380_InPlaceForm_DataView
Agenda
38
• Prerequisites & Configuration • Form Table control • Data View control • Dojo Form controls • Dialogs and Value pickers • Navigation controls • Introduction to Application Layout • Q & A
Navigation Controls
39
• 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
Tree Nodes – Builds the list
40
• xe:basicLeafNode • xe:basicContainerNode • xe:separatorTreeNode • xe:dominoViewEntriesTreeNode • xe:dominoViewListTreeNode • xe:pageTreeNode • xe:repeatTreeNode • xe:loginTreeNode • xe:userTreeNode • xe:beanTreeNode
One onItemClick event per control
41
• Code to determine what the user clicked (submitValue property is returned) – CSJS … XSP.getSubmitValue() – SSJS … context.getSubmittedValue()
DemoXPage617
Navigator control
42
DemoXPage619 DemoXPage621a, 621b, 621c
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
Toolbar control
43
DemoXPage652View DemoXPage652Input
Good control for functionality of Form and View Action Bars
Agenda
44
• Prerequisites & Configuration • Form Table control • Data View control • Dojo Form controls • Dialogs and Value pickers • Navigation controls • Introduction to Application Layout • Q & A
Six Facets and Five Bar Areas
45
One onItemClick event for All Nodes in Configuration
46
• onItemClick – triggered when any node in any of its configuration properties is fired, including:
– bannerApplicationLinks – bannerUtilityLinks – titleBarTabs – placeBarActions – footerLinks
DemoXPage711, DemoXPage712
SSJS - get submitted value for clicked node:
CSJS - get the submit value for clicked node:
Designing an Application Layout in a Custom Control
47
Demo761_CustByNameView
Application Configuration for Bootstrap4XPages
48
• 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
Agenda
49
• Prerequisites & Configuration • Form Table control • Data View control • Dojo Form controls • Dialogs and Value pickers • Navigation controls • Introduction to Application Layout • Q & A
Want to Learn More?
51
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
Questions????
52
Use the Q&A pane in WebEx to ask questions We will answer your questions verbally
Download the demo - www.tlcc.com/feb-webinar Upcoming Events:
TLCC Olympic Sale
Engage in the Netherlands, March 17th-18th
TLCC TackItOn the day after!
Question and Answer Time!
53
Teamstudio Questions? [email protected] 877-228-6178
TLCC Questions?
[email protected] [email protected] 888-241-8522 or 561-953-0095
Howard Greenberg Courtney Carter
#XPages
@ptcalhoun
@TLCCLtd
@Teamstudio
@PaulDN
Paul Della-Nebbia
