The Grid the Brad and the Ugly: Using Grids to Improve Your Applications

[1207] The Grid, the Brad, and The Ugly: Using Grids to Improve Your ApplicationsBrad BalassaitisPaul 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

Client-Side Grids

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 Grid50 5k 3k

500 37k 29k5000 353k 290k

# Rows View Grid50 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

Dojo

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 aa 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 containsthe 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 columnnames

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 tobe displayed in the grid

• Save and Test !!!

The Rendered Grid

Demo

Gridx

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 Path1. XPage or CC Properties

> Resources2. Add… > Dojo Module

Path Resource3. Prefix: gridx4. url: /gridx

Gridx Resources <xp:this.resources>

<!-- Claro Theme -->

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

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

<!-- Module Path to locate Gridx Library -->

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

<!-- -Main GridX Stylesheet -->

<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 – Filter Bar

Gridx Features• Details on Demand

Expandable detail section No loaded unless requested (then cached) Asynchronous call to retrieve data

Gridx Features

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></xp:this.resources>

• 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 – UI Widgets

Inline Editing – Saving Changes

Inline Editing – Options for Saving Changes1. Enable Domino Data Service, POST/PATCH updates via XHR2. 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

Inline Editing: Saving Changes• 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; }}

Inline Editing: Saving Changes• 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>

Inline Editing: Saving Changes• 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'; } });...

Inline Editing: Saving Changes• 4. Grid event handler

• Call the client-side JS function

modules: [... { moduleClass:Edit, onBegin:beforeEdit, onApply:saveChange }, CellWidget]

Processing Multiple Documents

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

Sencha Ext JS

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 Java Code (cont)

The Java Code (cont)

The Java Code (cont)

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)• Using the Ext JS API

Create the data store and point it to the XAgent

The XPage Source (cont)• Using the Ext JS API

Define the grid and it’s attributes

The XPage Source (cont)• The Panel contains a <div> that is used as the target for

rendering the grid REMINDER- This is all happening CLIENT SIDE !!!

Ext JS Grid

Kendo UI Grid

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 Grid: Kendo UI Grid

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)

Kendo UI Grid - Features• Persistence

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

Kendo UI Grid - Features• 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

Kendo UI Grid - Features• 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

Kendo UI Grid - Features• Filter Popups

Optional checkbox selection for multiple values

Kendo UI Grid - Features• Filter Row

Kendo UI Grid - Features• Editing

Features• Built-in add/edit/delete buttons

• Validation

• Control over editable fields

Styles• Inline

• Popup

• Batch

Kendo UI Grid

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></xp:this.resources>

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 Featuressortable: true,resizable: true,reorderable: true,

jQuery

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.

Thank you

Acknowledgements and DisclaimersAvailability. 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.