In this webinar, Paul Della-Nebbia, an IBM Champion, will show how to implement a different alternative for displaying information from Domino views. Paul will cover how to use the Dojo Data Grid (included with XPages) to display a data grid that provides unique features like infinite scrolling, click to sort column headers, adjustable column widths, filtering, and the ability to drag and drop column headers to reorder. As the user scrolls through, the view data is retrieved as needed which improves performance and usability.

1. Presenting Data – An Alternative to the View Control
Tweet about this event
And mention us: @Teamstudio @TLCCLTD
@PaulDN
Mar. 17, 2015

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

3. Who We Are
• Teamstudio’s 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
• 1600+ active customers, 53 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 IBM Notes
apps with you!
• End-users access Notes applications from mobile
devices whether online or offline
• Leverages the powerful technology of XPages

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. XControls
• Set of Controls for IBM Domino XPages developers
working on new XPages apps and on app
modernization projects
• Re-write of the Teamstudio Unplugged Controls
project, but adds full support for PC browser-based
user interfaces as well as mobile interfaces
• Enables XPages developers to create controls that
are responsive
• Learn more: teamstudio.com/solutions/xfoundations

7. Teamstudio Services
• Professional services for modernization, web
enablement, project management, development,
and administration
o Modernization Services
o Unplugged Developer Assistance Program
o Application Upgrade Analysis
o Application Complexity Analysis
o Application Usage Auditing
• http://www.teamstudio.com/solutions/services/

8. • Usage Auditing promotion:
o Now through Mar. 31, 2015, sign up for a free demo of Usage Auditing, and be
automatically entered to win a Nexus 6.
• Engage: Mar. 30-31, 2015
o Come see us in Ghent, Belgium for a chance to win an iPhone 6!

9. 1
#XPages
Your Host Today:
Howard Greenberg
TLCC
@TLCCLtd
Presenting Data – An Alternative
to the View Control

10. How can TLCC Help YOU!
2
• Private classes at
your location or
virtual
•XPages Development
•Support Existing Apps
•Administration
• Let us help you
become an expert
XPages developer!
• Delivered via Notes
• XPages
• Development
• Admin
• User
Self-
Paced
Courses
Mentoring
Instructor-
Led
Classes
Application
Development
and
Consulting
Free
Demo
Courses!

11. Try a FREE XPages Course!!!
3
Introduction to XPages Development course
• Three Hour self paced course
• Has Demonstrations and Activities
• Requires Domino Designer
• Both an 8.5 and 9.0 version
• Perfect for beginners!
Register at www.tlcc.com/admin/tlccsite.nsf/pages/free+course
Great Price
It’s FREE!!!

12. Upcoming and Recorded Webinars
4
• April 17th Transformations - Smart Application Migration to XPages
• May 14th App.Next - The Future of Domino App. Development
• www.tlcc.com/xpages-webinar
View Previous Webinars
(use url above)

13. Asking Questions – Q and A at the end
5
Use the Orange Arrow button to
expand the GoToWebinar panel
Then ask your questions in the
Questions pane!
We will answer your questions
verbally at the end of the
webinar

14. Your Presenter Today:
6
#XPages
Paul Della-Nebbia
@PaulDN

15. Dojo DataGrid Features
• Infinite scrolling
• Adjustable, re-orderable, sortable columns
• Hover and selection highlighting
• In-Grid editing feature
• Enhanced DataGrid: Filtering plugin
7

16. Dojo DataGrid control - System Requirements
• Release 9 Domino and Designer
– Built in to release 9
• Available for Release 8.5 after installing one of the
following …
– IBM Upgrade Pack 1 for Release 8.5
- or -
– XPages Extension Library from OpenNTF
8

17. Steps to Create
1. Create a REST Service to provide a data source for
the Grid
2. Add the Dojo DataGrid control to the page and
bind it to the REST Service
3. Add Dojo DataGrid Column controls into the grid
for the field data to display
9

18. Step 1: Create the REST Service
i. Add the REST Service control to the XPage
ii. Choose one of the following service types:
xe:viewJsonService – read only service
xe:viewItemFileService – read/write service
iii. Set the appropriate properties for the service
– databaseName and viewName
– contentType=“application/json”
– defaultColumns=“true”
– sortColumn
– var
– And others depending on the application
iv. Set the pathInfo property for quick testing of the service
10

19. Step 2: Add the Dojo DataGrid control
i. Add the Dojo DataGrid control to the page
ii. Bind the DataGrid to the REST Service
iii. Set the appropriate properties for the DataGrid
– autoHeight
– rowsPerPage
– And others depending on the application
iv. Add dojoAttributes to the DataGrid
– autoWidth=“true”
– columnReordering=“true”
– canSort
11

20. Step 3: Add the Dojo DataGrid Column controls
i. Add a Dojo DataGrid Column controls into the
DataGrid and set these properties
– field
– label
– width
– And others depending on the application
ii. Repeat to add additional columns
12

21. Disabling Column Sorting
• For all columns
• For a specific column
13

22. Create a Custom Column in the REST Service
14

23. The arguments[0] object
• Represents a row object in the DataGrid
• Is passed to the onRowClick, onRowDblClick and
onStyleRow events
15

24. Adding a column formatter function
16

25. Search and Filter properties of xe:viewJsonService
17
• search
• searchMaxDocs
• categoryFilter
• keys
• keysExactMatch

26. Enabling In-Grid Editing
18
1. Must use xe:viewItemFileService (read/write)
– Set jsId=“restServiceObj” for client-side access
2. Add Dojo Data Grid, bind to REST service and …
– Set jsId=“gridObj” for client-side access
– Optionally set singleClickEdit=“true”
3. For each column to enable in-grid editing …
– set editable="true"
4. To save changes call in a client-side script …
restServiceObj.save();
5. To cancel changes call …
restServiceObj.close();
gridObj._refresh();

27. In-Grid Editing with Style
19
OnStyleRow fires …
• New row is added
• Row is hovered
• Row is selected
• Row is changed

28. Deleting Selected Entries in a Dojo Data Grid
20
gridObj.selection.getSelected()
restServiceObj.deleteItem(selectedItem)

29. Creating Entries Directly in a Grid
21
1. Must use xe:viewJsonService
2. Set jsId=“restServiceObj2” for client-side access
3. Add Dojo Data Grid, bind to REST service and …
– Set jsId=“gridObj” for client-side access
4. Add a Dialog control to enter the values for the new
entry and code a Save button
…
var rsStore = restServiceObj2;
rsStore.newItem(newEntry);
rsStore.save();
rsStore.close();
gridObj._refresh();
…

30. The Dojo Enhanced DataGrid and the Filter Plugin
22
1. Must use xe:viewItemFileService
2. Add the following Dojo Modules and StyleSheets
3. Add the dojox.grid.EnhancedGrid type and the filter
plugin in the Dojo properties for the grid

31. Want to Learn More???
• How to improve XPages performance
• Understand events on an XPage
• XPINC (XPages in the Notes client) performance
• Migration strategies for converting traditional
Notes applications to XPages
• Localize your XPages applications for different
languages
• Use Custom Controls
• Add charts to your XPages using DojoX chart
widgets
• "XAgents" that return XML, JSON and HTML data
• Use the Dojo Data Grid
• Create a custom REST Service to aggregates data
• Use the Relational controls to access relational
data from an XPage
23
Until April 3rd get this course for only $599, save $300
Learn more about the XPages Development 2 for Notes and
Domino 9 course
TLCC’s XPages Development 2 Course covers many
advanced XPages techniques like:

32. Questions????
24
Use the Orange Arrow button to
expand the GoToWebinar panel
Then ask your questions in the
Questions panel!
Remember, we will answer your
questions verbally

33. #XPages
@TLCCLtd
@Teamstudio
@PaulDN
Upcoming Events:
Engage, March 30/31 in Ghent, Belgium
MWLug User Group Meeting, Aug. 19-21, Atlanta
Question and Answer Time!
25
Teamstudio Questions?
contactus@teamstudio.com
978-712-0924
TLCC Questions?
howardg@tlcc.com paul@tlcc.com
888-241-8522 or 561-953-0095
Howard GreenbergPaul Della-Nebbia Courtney Carter