creating a great xpages user interface
DESCRIPTION
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.TRANSCRIPT
![Page 1: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/1.jpg)
Creating a Great XPages User Interface
Tweet about this event: #XPages and mention us: @teamstudio @TLCCLTD
@PaulDN February 13, 2014
![Page 2: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/2.jpg)
@teamstudio teamstudio.com
@TLCCLTD
tlcc.com
Courtney Carter Inbound Marketing Specialist
![Page 3: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/3.jpg)
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
![Page 4: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/4.jpg)
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
![Page 5: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/5.jpg)
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
![Page 6: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/6.jpg)
• 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
![Page 7: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/7.jpg)
Creating a Great XPages UI
1
#XPages
Your Hosts and Presenters Today:
Howard Greenberg TLCC
@TLCCLtd
Paul Della-Nebbia TLCC
@PaulDN
![Page 8: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/8.jpg)
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
![Page 9: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/9.jpg)
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
![Page 10: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/10.jpg)
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)
![Page 11: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/11.jpg)
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
![Page 12: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/12.jpg)
Asking Questions
6
Q & A at the end! Type in your questions as they come up
![Page 13: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/13.jpg)
Goal: Make a More Usable, Better Looking XPages Application!
7
Data View
View Panel
Demo100_ViewPanel Demo761_CustByNameView
![Page 14: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/14.jpg)
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
![Page 15: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/15.jpg)
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
![Page 16: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/16.jpg)
Application Configuration
10
![Page 17: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/17.jpg)
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
![Page 18: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/18.jpg)
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
![Page 19: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/19.jpg)
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
![Page 20: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/20.jpg)
Named versus Unnamed Facets
14
![Page 21: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/21.jpg)
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
![Page 22: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/22.jpg)
Data View
16
Data View
View Panel
![Page 23: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/23.jpg)
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)
![Page 24: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/24.jpg)
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
![Page 25: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/25.jpg)
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
![Page 26: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/26.jpg)
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
![Page 27: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/27.jpg)
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
![Page 28: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/28.jpg)
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
![Page 29: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/29.jpg)
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
![Page 30: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/30.jpg)
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
![Page 31: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/31.jpg)
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
![Page 32: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/32.jpg)
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
![Page 33: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/33.jpg)
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
![Page 34: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/34.jpg)
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
![Page 35: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/35.jpg)
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
![Page 36: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/36.jpg)
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
![Page 37: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/37.jpg)
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
![Page 38: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/38.jpg)
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
![Page 39: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/39.jpg)
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
![Page 40: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/40.jpg)
Dialog vs. Tooltip Dialog
34
Tooltip Dialog
Dialog
Demo360_DojoTooltipDialog
![Page 41: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/41.jpg)
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.
![Page 42: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/42.jpg)
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
![Page 43: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/43.jpg)
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
![Page 44: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/44.jpg)
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
![Page 45: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/45.jpg)
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
![Page 46: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/46.jpg)
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
![Page 47: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/47.jpg)
One onItemClick event per control
41
• Code to determine what the user clicked (submitValue property is returned) – CSJS … XSP.getSubmitValue() – SSJS … context.getSubmittedValue()
DemoXPage617
![Page 48: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/48.jpg)
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
![Page 49: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/49.jpg)
Toolbar control
43
DemoXPage652View DemoXPage652Input
Good control for functionality of Form and View Action Bars
![Page 50: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/50.jpg)
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
![Page 51: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/51.jpg)
Six Facets and Five Bar Areas
45
![Page 52: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/52.jpg)
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:
![Page 53: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/53.jpg)
Designing an Application Layout in a Custom Control
47
Demo761_CustByNameView
![Page 54: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/54.jpg)
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
![Page 55: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/55.jpg)
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
![Page 57: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/57.jpg)
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
![Page 58: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/58.jpg)
Questions????
52
Use the Q&A pane in WebEx to ask questions We will answer your questions verbally
![Page 59: Creating a Great XPages User Interface](https://reader034.vdocuments.site/reader034/viewer/2022042504/5491df17b47959763e8b549d/html5/thumbnails/59.jpg)
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