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

Get the Slides and Demo Database

50

www.tlcc.com/feb-webinar

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? contactus@teamstudio.com 877-228-6178

TLCC Questions?

howardg@tlcc.com paul@tlcc.com 888-241-8522 or 561-953-0095

Howard Greenberg Courtney Carter

#XPages

@ptcalhoun

@TLCCLtd

@Teamstudio

@PaulDN

Paul Della-Nebbia