Presenting Data – An Alternative to the View Control

Presenting Data – An Alternative to the View Control

Tweet about this event

And mention us: @Teamstudio @TLCCLTD

@PaulDN

Mar. 17, 2015

@Teamstudio

teamstudio.com

@TLCCLTD

tlcc.com

Courtney CarterInbound Marketing Specialist

Teamstudio

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

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

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

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

Teamstudio Services

• Professional services for modernization, web

enablement, project management, development,

and administrationo 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/

• 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!

1

#XPages

Your Host Today:

Howard GreenbergTLCC

@TLCCLtd

Presenting Data – An Alternative to the View Control

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

• UserSelf-

Paced Courses

Mentoring

Instructor-Led

Classes

Application Development

and Consulting

Free Demo

Courses!

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 PriceIt’s FREE!!!

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)

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

Your Presenter Today:

6

#XPages

Paul Della-Nebbia@PaulDN

Dojo DataGrid Features

• Infinite scrolling

• Adjustable, re-orderable, sortable columns

• Hover and selection highlighting

• In-Grid editing feature

• Enhanced DataGrid: Filtering plugin

7

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

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

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

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

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

Disabling Column Sorting

• For all columns

• For a specific column

13

Create a Custom Column in the REST Service

14

The arguments[0] object

• Represents a row object in the DataGrid

• Is passed to the onRowClick, onRowDblClick and onStyleRow events

15

Adding a column formatter function

16

Search and Filter properties of xe:viewJsonService

17

• search

• searchMaxDocs

• categoryFilter

• keys

• keysExactMatch

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();

In-Grid Editing with Style

19

OnStyleRow fires …

• New row is added

• Row is hovered

• Row is selected

• Row is changed

Deleting Selected Entries in a Dojo Data Grid

20

gridObj.selection.getSelected()

restServiceObj.deleteItem(selectedItem)

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();…

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

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:

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

#XPages

@TLCCLtd

@Teamstudio

@PaulDN

Upcoming Events:Engage, March 30/31 in Ghent, BelgiumMWLug User Group Meeting, Aug. 19-21, Atlanta

Question and Answer Time!

25

Teamstudio [email protected]

978-712-0924

TLCC [email protected] [email protected]

888-241-8522 or 561-953-0095

Howard GreenbergPaul Della-Nebbia Courtney Carter