The Grid, the Brad, and The Ugly

[1207] The Grid, the Brad, and The Ugly:
Using Grids to Improve Your Applications
Brad Balassaitis
Paul Calhoun

Paul Calhoun
• Vice President – QDilligence
• CTO – NetNotes Solutions Unlimited
• IBM – Champion 2013-2016
• Been teaching, administering and coding with Notes/Domino
since release 2.
• Been working with XPages since the beta release.
• Spends all spare time showing people cute pictures of his
grandkids !!! (You have been warned !!)

Brad Balassaitis
• Senior Consultant for PSC Group
• Certified Notes developer since R4
• IBM Champion 2014 - 2016
• Blog: xcellerant.net

Outline
• Client-Side Grids
• Dojo
• Gridx
• Sencha Ext JS
• Kendo UI Grid
• jQuery

Why Grids?
• UI
• Features
• Performance

Grid UI
• Modern UI + Themes

Grid Features
• Infinite scrolling or paging
• Columns – change width, rearrange, show/hide
• Sorting
• Filtering
• Expandable detail section
• Inline editing with UI widgets

Grid Performance
• Less server-side processing
• Less data sent to browser
 Data only – no HTML
• Client-side sorting/filtering
• Asynchronous server interaction
• Virtual Rendering
 # of DOM Elements
# Rows View Grid
50 5k 3k
500 37k 29k
5000 353k 290k
# Rows View Grid
50 844 944
500 7,594 944
5000 75,078 944

Considerations
• Cost
• Complexity
 Not drag-and-drop
 Experience of developers
• Overhead
 Loading additional library
• Scaling
 Pre-filter

Getting Started
• Add library to WebContent
• Include JS/CSS resources (page/theme level)
• REST service to provide data
• Define columns and create grid
• Add features

The Grid
• Built into Domino / XPages via the Extension Library
 So it’s “Free” (relatively speaking)
 Doesn’t require loading of any additional libraries (Code or styling)
• Doesn’t require extensive knowledge of
 Client Side Java Script
 CSS
 JSON or XML
• Easy to prototype and get into production

The Brad
• Brad has already done all the work for you !!
 http://xcellerant.net/dojo-grids-in-xpages/
 Blog series on using / implementing dojo grids in XPages from
soup to nuts (beginning to end)

The Ugly
• Why exactly am I doing this section again?
• It’s not <insert other grid technology> !!
 This is mostly subjective and developer preference
• “I already know grid technology “X”, so I won’t use grid technology “Y””
• “X” looks better than “Y”

The Parts
• Domino View
• XPage
• Extension Library
 Rest Service
 Dojo Grid Control
 Grid Columns

The View
• A Domino View that contains the primary columns to be
displayed in the grid

The XPage and Extension Library
• The XPage does NOT have to be in the same .nsf as the data
(view)
• Must have
 Extension Library from OPENNTF
or
 Domino 8.5.3 Upgrade Pack 1 or above

The REST Service
• Add the REST Service control from the Data Access drawer to
the XPage.
• Provide a value for the ‘pathinfo’
attribute
 This allows you to test the json
returned from the service from a
a url: xpagename.xsp/pathinfo
• Add a View JSON Service
 Click the plus button and choose
xe:viewJsonService

The REST Service (cont)
• Set contentType attribute to
 application/json
• Set defaultColumns attribute to
true
• Set var attribute value to
variable name that will be used
to access the row data
• Set viewName attribute to the
name of the View that contains
the data for the grid

The Dojo Data Grid Control
• Add the Dojo Data Grid control from the Dojo Layout drawer
• Accept or provide an id
• Choose the REST Service
on the same page as the
grid control

Add Columns to the Grid Control
• Sample the JSON output from the REST Service
• Use the pathInfo variable from the REST Service definition to
get a sample of the JSON output
• Notice the variables that
are used for the column
names

Add Columns to the Grid Control (cont)
• User the variable names from the JSON output as the values
for the field attribute of the Dojo Data Grid Column
• Set a value for the label attribute which will be come the
column header
• Set a width appropriate
to the data being displayed
• Add a Data Grid Column
for every view column to
be displayed in the grid
• Save and Test !!!

The Grid: Gridx
• Next-generation Dojo grid
 http://oria.github.io/gridx/news/metrics.html (gridx vs dgrid and dojo grid)
• Handle one million+ rows
• Many feature modules

The Brad
• Blog series on implementing and using gridx in XPages
 http://xcellerant.net/gridx-in-xpages/

The Ugly
• Relative to other current grids, UI isn’t as modern

Installation
• Download gridx library (free)
• Drag into WebContent folder
• Dojo Module Path
• Include Gridx Resources

Dojo Module Path
1. XPage or CC Properties
> Resources
2. Add… > Dojo Module
Path Resource
3. Prefix: gridx
4. url: /gridx

Gridx Resources
<xp:this.resources>

<xp:styleSheet href="/.ibmxspres/dojoroot/dijit/themes/claro/claro.css"></xp:styleSheet>
<xp:styleSheet href="/.ibmxspres/dojoroot/dijit/themes/claro/document.css"></xp:styleSheet>

<xp:dojoModulePath url="/gridx" prefix="gridx"></xp:dojoModulePath>

<xp:styleSheet href="gridx/resources/claro/Gridx.css"></xp:styleSheet>
</xp:this.resources>

Gridx - Sample Grid
<xc:ccGridxResources></xc:ccGridxResources>
<div id="gridX_Here" style="height:300px; width:300px;"></div>
<script>
require(["gridx/Grid", "dojo/store/JsonRest“, "gridx/core/model/cache/Async", "dojo/domReady!” ],
function(Grid,JsonRest, Cache) {
var store = new JsonRest({
idProperty: '@noteid',
target: "X_REST.xsp/gridData"
});
var columns = [
{id: 'first', field: 'firstname', name: 'First', width: '70px'},
{id: 'last', field: 'lastname', name: 'Last'},
{id: 'state',field: 'state', name: 'State', width: '40px'}
];

Gridx - Sample Grid (con’t)
grid = new Grid({
id: "my_gridX",
cacheClass: Cache,
store: store,
structure: columns
});
//Put it into the DOM tree.
grid.placeAt('gridX_Here');
grid.startup();
});
</script>

Opening a Document
• Connect an event handler to a row event
• Read the unid from the row data and build a URL
grid.connect(grid, "onRowDblClick", function(eventInfo) {
var unid = grid.row(eventInfo.rowId).item()['@unid'];
location.href = "MyPageName.xsp?action=openDocument&documentId=" + unid;
});

Gridx - Adding Feature Modules
• Require a module (AMD or page-level)
• Add it to the grid's modules attribute
<script>
require(["gridx/Grid“, "gridx/modules/ColumnResizer“, "dojo/store/JsonRest“,
"gridx/core/model/cache/Async“, "dojo/domReady!” ], function(Grid, Resizer, JsonRest, Cache) {
....
grid = new Grid({
id: "my_gridX",
cacheClass: Cache,
store: store,
structure: columns,
modules: [
Resizer
]
});

Gridx Features
• Sorting - initial, custom, programmatic, nested
• Resizing, rearranging, showing/hiding columns
• Row selection
• Column/Row locking
• Exporting
• Virtual Scrolling
• Persistence

Gridx Features
• Column Header Menus

Gridx Features
• Toolbars
• Selection

Gridx Features
• Quick Filter
 Full Text Search

Gridx Features
• Filter Bar
 Field-specific
 Data type-specific
 Multiple rules
 Client-side
 No coding required!

Gridx Features
• Details on Demand
 Expandable detail section
 No loaded unless requested (then cached)
 Asynchronous call to retrieve data

Server-Side Updates
• Use client-side code to asynchronously trigger server-side code
and wait for a response
• Two Key Uses:
1. Inline Editing
2. Document Processing

Inline Editing
• Require Edit module
• Add Edit module to grid
• Define editable column(s)
 editable: true
• Optionally use a UI widget
• Save Changes

Inline Editing – UI Widgets
• Add CellWidget module to grid
• Include Dojo widget on page
<xp:this.resources>
<xp:dojoModule name="dijit.form.NumberSpinner"></xp:dojoModule>
• Specify widget in column definition
{ id: 'rating', field: 'Rating', name: 'Rating', dataType: 'number', width: '75px',
editable: true,
editor: 'dijit.form.NumberSpinner',
editorArgs:{
props: 'smallDelta: 1, constraints: {min:1, max:5, places:0}'
}
}

Inline Editing – Saving Changes

Inline Editing – Options for Saving Changes
1. Enable Domino Data Service, POST/PATCH updates via XHR
2. RPC Method
 Provides opportunity to process as needed (take other action aside
from just direct field update)
 Does not require enabling DDS
3. POST to Custom REST service
 (Same benefits)

Inline Editing – Grid Events
• Edit Events
 onBegin - before cell goes into edit mode
• Use to track original value and see whether it changed in onApply
 onApply - after cell is edited
• Attaching Event Handlers
 Module definition
{
moduleClass: Edit,
onBegin: beforeEdit,
onApply: saveChange
}

Inline Editing: Saving Changes
• Requirements
1. SSJS function process the change
2. RPC method to accept UNID, field, value and call the SSJS method
3. Client-side Javascript function to call RPC method
4. Grid event handler

• 1. SSJS function process the change
function rpcUpdateField (unid, fieldName, fieldValue) {
var doc:NotesDocument = database.getDocumentByUNID(unid);
if (doc != null) {
doc.replaceItemValue(fieldName, fieldValue);
doc.save(true);
return true;
} else {
return false;
}
}

• 2. RPC method to accept UNID, field, value and call the SSJS method
 One line to call SSJS function
<xe:jsonRpcService id="jsonRpcService1" serviceName="rpcGrid">
<xe:this.methods>
<xe:remoteMethod name="updateField” script="rpcUpdateField (unid, fieldName, fieldValue);">
<xe:this.arguments>
<xe:remoteMethodArg name="unid"></xe:remoteMethodArg>
<xe:remoteMethodArg name="fieldName"></xe:remoteMethodArg>
<xe:remoteMethodArg name="fieldValue"></xe:remoteMethodArg>
</xe:this.arguments>
</xe:remoteMethod>
</xe:this.methods>
</xe:jsonRpcService>

• 3. Client-side Javascript function to call RPC method
• Wait for response and set cell color to green or red
function saveChange() {
...
rpcGrid.updateField(rowUNID, fieldName, newValue).addCallback(function(updateSuccessful) {
if (updateSuccessful) {
node.style.backgroundColor = 'green';
} else {
node.style.backgroundColor = 'red';
}
});
...

• 4. Grid event handler
• Call the client-side JS function
modules: [
...
{
moduleClass:Edit,
onBegin:beforeEdit,
onApply:saveChange
},
CellWidget
]

Processing Multiple Documents
• Inline icon, toolbar button, or header menu action
• Requirements
1. SSJS function process the changes
2. RPC method to accept array of UNIDs and call the SSJS method
3. Client-side Javascript event handler
• Call RPC method and wait for response
• Display growl message
4. Grid event handler

The Grid
• One of the most mature / established JS libraries available
• Extensive documentation and support
• Over a dozen grid types
 http://examples.sencha.com/extjs/6.0.1/examples/kitchensink/#grids
• Support for “Spreadsheet” style grids including locking columns
and rows
• Built in ability to export to EXCEL
• In-Line Editing, filtering and much, much, much more !!

The Brad
• I don’t know ?
• What do you think Brad ?
 <pause here for witty comeback from Brad>

The Ugly
• It’s not Free
 Although there is a Free Trial
 Different “levels” from standard to premium
• Standard currently starts at $895 (5 license minimum = $4,475)
• Ext JS is a VERY robust framework (not a bad thing)
 BUT… this can make it difficult to pull just the pieces you want
• Not specifically designed to run on Domino/XPages
 You have to code everything from scratch

The Parts
• Domino View
• Ext JS Libraries and Style Sheets
• XPage
 One to render the grid
 One XAgent to return the JSON
• Java Code to produce the JSON

The View and Libraries
• A Domino View that contains the data to be rendered in the grid
• From the download of Ext JS copy all of the following to the
WebContent folder of the application that will implement the grids

The Java Code
• First we need Java code to produce the JSON
• To produce the JSON we need a JSON API
 It just so happens there is one that is included in the Extension
Library !!!!
• com.ibm.commons.util.io.json.*
 Used to create JSON Objects and Arrays

The XAgent
• An XAgent is and XPage that does not render any UI but only
contains code.
 It is in essence a Java Servlet
• In the XPages afterRenderResponse event add the following
code

The XPage
• The Xpage only has two controls
 Script Output Control
• This is where all of the JavaScript will be written
 Panel
• This is where the grid will be rendered

The XPage Source
• Using the Ext JS API
 Define the data model
 Set Configuration attributes and required components

The XPage Source (cont)
 Create the data store and point it to the XAgent

 Define the grid and it’s attributes

• The Panel contains a <div> that is used as the target for
rendering the grid
 REMINDER- This is all happening CLIENT SIDE !!!

The Grid: Kendo UI Grid
• jQuery-based
• Part of Kendo UI (layout, forms, grids, charts/maps, etc)
• Much more modern look and feel (Bootstrap)
• Templates for toolbar, rows, details
• Instantiation: Programmatic, HTML Table, MVVM, Angular
• Bind to local data, remote data, web sockets
• Mobile Components
• Offline

The Brad
• Blog series coming...

The Ugly
• Licensing: $999 per developer
• 100 MB library
 30+ MB of examples
 Custom builder available with license
 2.4 MB js file is actually loaded in browser (+90 k jQuery)

Kendo UI Grid - Features
• Sorting
• Filtering
• Grouping
• Reordering, Column Locking
• Paging
• Export to Excel or PDF
• Virtualization
• Persistence
• Hierarchy (Expandable Details)

• Persistence
 Programmatically save and restore grid state
 Column order
 Column widths
 Sorting
 Filters
 Grouping

• Grouping / Categorization
 Grid-level property -- groupable: true
 Drag column header to top to group
 Aggregation
• Define aggregates for a column (count, average, sum, min, max)
 Group header templates per column to display aggregate info

• Filtering
 Type-specific filtering on one or more columns
 Enabled with a single property
 Option 1: Popups in column header
• Optional Checkbox selection of one or more column values
 Option 2: Filter Row

• Filter Popups
 Optional checkbox selection for multiple values

• Filter Row

• Editing
 Features
• Built-in add/edit/delete buttons
• Validation
• Control over editable fields
 Styles
• Inline
• Popup
• Batch

Kendo UI Grid
• Installation
 Drag library into WebContent
 Add 2 JS libraries and 2 stylesheets
<xp:this.resources>
<xp:styleSheet href="KendoUI/styles/kendo.common.min.css"></xp:styleSheet>
<xp:styleSheet href="KendoUI/styles/kendo.default.min.css"></xp:styleSheet>
<xp:script src="KendoUI/js/jquery.min.js" clientSide="true"></xp:script>
<xp:script src="KendoUI/js/kendo.all.min.js" clientSide="true"></xp:script>

Kendo UI Grid
• AMD Issue
 As with many jQuery plugins, newer versions of dojo break them
because of amd loading conflicts
• http://xomino.com/select2-v4-needs-amd-fixing-in-domino-r9-xpages/
• Edit the js file before importing into the NSF
typeof define=="function"&&define.amd?define:function(_,f){f()});
typeof define=="function"&&define.amd&&false?define:function(_,f){f()});

Kendo UI Grid – Simple Grid
<div id=“grid”></div>
<script>
$(document).ready(function(){
$("#grid").kendoGrid({
columns: [
{field: "FirstName", title: "First Name"},
{field: "LastName", title: "Last Name"}
],
dataSource: {
transport: {read: "xRest.xsp/People"}
}
});
}
</script>

Kendo UI Grid – Adding Features
sortable: true,
resizable: true,
reorderable: true,

The Grid
• Hold on I’m thinking….
• Yea, no, I can’t think of any.
 Disclaimer: This is MY experience with jQuery and jQuery grids
in general.
 Your milage may vary
• In the early days jQuery was the goto library because it was the
most “moder” (it had rounded corners)
• Of course check out xomino.com for all things jQuery and
XPages

The Brad
• DataTables - Very popular, lots of features, good docs, Bootstrap
• SlickGrid - Fast and pretty simple, not supported recently
• Flexigrid – simple, basic grid features
• jsGrid – nice looking, editing, inflexible search
• jqGrid – Bootstrap UI, feature-rich, simple
• jqxGrid – feature-rich, decent-looking
• jQuery Bootgrid or Ingrid – add basic grid features to a table

The Ugly
• There is no single source for jQuery beyond the core
• Most anything you want to do beyond basics requires a plug in
• You don’t always know where those plug ins
 Came From
 Will be supported
 Will even be maintained
• There are a LOT of grid plug-ins to choose from. No real clear
picture of best one to implement for XPages.

Acknowledgements and Disclaimers
Availability. References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM
operates.
The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They are provided for informational
purposes only, and are neither intended to, nor shall have the effect of being, legal or other guidance or advice to any participant. While efforts were made to
verify the completeness and accuracy of the information contained in this presentation, it is provided AS-IS without warranty of any kind, express or implied. IBM
shall not be responsible for any damages arising out of the use of, or otherwise related to, this presentation or any other materials. Nothing contained in this
presentation is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms
and conditions of the applicable license agreement governing the use of IBM software.
All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved.
Actual environmental costs and performance characteristics may vary by customer. Nothing contained in these materials is intended to, nor shall have the effect
of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results.

Acknowledgements and Disclaimers cont.
© Copyright IBM Corporation 2015. All rights reserved.
• U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
• Please update paragraph below for the particular product or family brand trademarks you mention such as WebSphere, DB2, Maximo, Clearcase, Lotus, etc.
• IBM, the IBM logo, ibm.com, [IBM Brand, if trademarked], and [IBM Product, if trademarked] are trademarks or registered trademarks of International
Business Machines Corporation in the United States, other countries, or both. If these and other IBM trademarked terms are marked on their first occurrence
in this information with a trademark symbol (® or ™), these symbols indicate U.S. registered or common law trademarks owned by IBM at the time this
information was published. Such trademarks may also be registered or common law trademarks in other countries. A current list of IBM trademarks is
available on the Web at “Copyright and trademark information” at www.ibm.com/legal/copytrade.shtml
If you have mentioned trademarks that are not from IBM, please update and add the following lines:
[Insert any special 3rd party trademark names/attributions here]
Other company, product, or service names may be trademarks or service marks of others.

The Grid, the Brad, and The Ugly

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (18)

Similar to The Grid, the Brad, and The Ugly

Similar to The Grid, the Brad, and The Ugly (20)

Recently uploaded

Recently uploaded (20)

The Grid, the Brad, and The Ugly