SlideShare a Scribd company logo
AD 117
Xpages & jQuery DataTables
Simplifying View creation while maximizing
functionality in XPage applications.
• Notes & Domino developer for 17-18 years
– Focused on XPages for past 5-6 years
• As a consultant was able to work at some very interesting
companies
• Currently a Senior Developer for Mutual Boiler Re
– We are kind of a niche inside a niche
• First time speaker!
• My blog: http://xpage.me
• Twitter: @michaelgsmith
Michael G. Smith - About Me
• Introduction to DataTables
– Try to cut through the fat and focus on the most useful stuff
– This is not a comprehensive overview
• Roadmap to quickly surface view data in your Xpage apps
– Brand new or existing apps
• Share my experiences and lessons learned
– I learned a lot just working on this presentation!
• How to take everything and utilize it in an enterprise application
– Scalability
• You should be able to walk away and utilize these concepts
immediately
– If I’ve done my job
Goals for this session
• What is DataTables?
• Why DataTables?
• Getting started with DataTables
• Putting the “Data” in DataTables
• The DataTables lifecycle
• Advanced configuration
• Domino View Management
• Putting it all together
Agenda
• Simply defined, it is:
– A client side framework/library
– A jQuery plugin
– It’s HUGE!
• It is NOT:
– the XPages control
• From the DataTables online manual:
The stated goal of DataTables is "To enhance the accessibility of data in HTML
tables”.
• My definition:
– A great tool for creating Domino-like rich views in XPage and web
applications
What is DataTables?
• Very easy to hit the ground running
• Integrates well with Bootstrap
• Further separates data from design
• Became more and more impressed with it’s capabilities
• “A” way, not “The” way
• Extremely well documented through online reference material
and support forums
– When using example code try to make sure it is from v 1.10 or later
• Excellent at handling data types
• Great replacement for views and embedded views
– Embedded views on tabs – only load data when tab is clicked
Why DataTables?
• Adding files to your project
– CDN
– Locally (WebContent)
– Package Manager (Bower/NPM)
• Dependencies
– jQuery 1.7 or later
• My Demos
– DataTables 1.10.2
– jQuery 1.11.2
Getting started with DataTables
• Styling options
– Default DataTables css
– Bootstrap
• Requires a reduced DataTables css
• Use the Bootstrap table classes when assigning classes to the table
markup
– Other frameworks
• Foundation
• jQuery UI
– Use the DataTables theme creator to match your UI
– https://datatables.net/manual/styling/theme-creator
Getting started with DataTables (cont.)
• Add appropriate source files to your theme
– Core DataTables
• DataTables CSS
• jQuery
• DataTables js
– Bootstrap
• Bootstrap css
• DataTables Bootstrap css
• jQuery js
• Bootstrap js
• DataTables js
Getting started with DataTables (cont.)
Putting the “Data” in DataTables
• From the Docs:
Data for a DataTable can essentially come from three different
locations:
– HTML - ideal for when your table already exists and has been
populated with data.
– Javascript Array - used when your data exists in a Javascript array
– An Ajax data source
• Let’s start with a simple xp:repeat
Putting the “Data” in DataTables
Putting the “Data” in DataTables (cont.)
• Adding a DataTable to a xp:repeat
• Simple xp:repeat Demo
Putting the “Data” in DataTables (cont.)
• DataTables default configuration
Adding a DataTable to a xp:repeat (cont.)
• DataTables default configuration
Adding a DataTable to a xp:repeat (cont.)
• DataTables default configuration
Adding a DataTable to a xp:repeat (cont.)
• DataTables configuration options
Adding a DataTable to a xp:repeat (cont.)
• Demo – adding simple configuration
Adding a DataTable to a xp:repeat (cont.)
• Simply add classes to your table markup
• From the DataTables reference:
Adding style to the xp:repeat
• By applying classes to the markup we turn this:
Adding style to the xp:repeat (cont.)
• Into this:
Adding style to the xp:repeat (cont.)
• In Bootstrap:
Adding style to the xp:repeat (cont.)
Creating a DataTable from REST data
• Use the “ajax” option to retrieve data:
Creating a DataTable from REST data
• DataTables expects:
– Array of arrays
• Columns object must be defined or ..
• Markup must contain thead with th/td cells for each data column
– Array of objects (JSON)
• Columns object must be defined!
Creating a DataTable from REST data (cont.)
• Array of arrays
– Defining the columns object
• Need one object per column
• With no data field, the order of the objects must correspond to the
order of the returned data
• Use the data field to match up objects with 0 based index of the row
array (order doesn’t matter)
Creating a DataTable from REST data (cont.)
• Array of arrays
– Using markup
• Must have a thead element and a th or td for each column
• Order matters
Creating a DataTable from REST data (cont.)
• Array of objects (JSON)
– Columns object must be defined!
Creating a DataTable from REST data
• Array of objects (JSON)
– Map the “data” field of the columns object to the appropriate field
in the returned JSON object
Creating a DataTable from REST data
• The most common ways to retrieve REST data in Domino:
Creating a DataTable from REST data (cont.)
• The most common ways to retrieve REST data in Domino:
• xeViewJsonService
– Pros
• Easy to hit the ground running
• Domino handles data serialization
– Cons
• More difficult to fine tune the data returned (i.e. reduce payload size)
Creating a DataTable from REST data (cont.)
• The most common ways to retrieve REST data in Domino:
• xeCustomRestService
– Pros
• More granular control
• Easier to define the column definitions at the rest service
– Cons
• Need to be aware of data types and make sure data is serialized
properly
• Need to actually write the code that builds the data
Creating a DataTable from REST data (cont.)
• The most common ways to retrieve REST data in Domino:
• XAgent
– Pros
• More granular control (even more?)
• Easier to define the column definitions at the rest service
– Cons
• Need to be aware of data types and make sure data is serialized
properly
• Need to actually write the code that builds the data
Creating a DataTable from REST data (cont.)
• REST demo:
Creating a DataTable from REST data (cont.)
The DataTables Lifecycle
• Use callbacks to provide a “rich” view experience
– initComplete()
– drawCallback()
– rowCallback()
– createdRow()
• Similarities to the XPages lifecycle
• Be cognizant of your users
– Don’t slow down user experience by adding too much client side
processing
The DataTables “Lifecycle” (callbacks)
• Callback demo
The DataTables “Lifecycle” (callbacks) (cont.)
Advanced Configuration
• Adding click events
– Use the “createdRow” or “rowCallback” callbacks
• DataTables docs say createdRow is more efficient
• This *should* result in better browser performance, i.e. javascript
objects won’t be left behind when the DataTable is destroyed
– Be aware when double clicking, click event is also fired unless the
timeout method is used
• This is a browser issue, not DataTables
• Demo
Advanced Configuration
• Renderers
– Possibly the most powerful aspect of DataTables
– Executed whenever DataTables needs to get the data for a cell in the
column.
– This function might be called multiple times, as DataTables will call it
for the different data types that it needs:
• display
• sorting
• filtering
– Orthogonal Data
• Each data point has the ability to take multiple forms
• Demo:
Advanced Configuration (cont.)
• Renderers
Advanced Configuration (cont.)
• Filtering programmatically
– The real power of DataTables can be exploited through the use of
the API
– Tables can be searched by row, column or globally across all data
– Must call the draw() event after performing search
• Demo
Advanced Configuration (cont.)
• Filtering programmatically
Advanced Configuration (cont.)
• Filtering programmatically
Advanced Configuration (cont.)
• Lazy Loading
– Grab additional data via REST and use DataTables api to insert rows
• Demo
Advanced Configuration
• Categorization
– Not built in to DataTables but easy to add using the api and callbacks
– Outdated, but sometimes still a requirement during the app
modernization process
• Gently ease users into new tech by keeping some familiarity
• Demo
Advanced Configuration
• Reloading data
– Avoid the dreaded “Can’t reinitialize DataTable” message
• When referencing your table be sure to use the same class it was
instantiated with
– When data is reloaded current sort remains intact
Advanced Configuration
Putting it all together
• Manage your Domino views
– Separation of data and functionality
– Use views as strictly back end data containers
• Load em up with data!
– Minimize “click to sort” columns to reduce view index size
– Domino ISO-8601 dates can be problematic if not careful
• Ex. 1957-03-14T21:54:30Z
• My preference: creating a text column
– Strip out unnecessary columns, i.e. colors, icons
• May need to create REST only views in coexistence scenarios
– Fewer views
• No more specialized views with only a handful of columns
• Utilize categories and keys and ftsearch
Putting it all together
• Managing your Domino views (cont.)
– Make sure columns have an itemName !!!
Putting it all together (cont.)
• In order to apply all of this to an enterprise application we need
to be able to “connect” the data to the configurations
• My solution: REST View Manager
– Configure DataTable configurations in a browser and store json in a
Notes Document
• Minimizes need to touch designs
• Makes view customization by users much easier to implement and
manage
– Use a custom control that can be dragged and dropped into any
Xpage or custom control and configured through custom properties
– Opens the door to allowing users to customize their views
Putting it all together (cont.)
• REST View Manager
Putting it all together (cont.)
• REST View Manager
Putting it all together (cont.)
nsf
REST configuration
created client side
Xpage
DataTable
Client
Side
Server
side
REST Service
Read view config
Read view config
GET data
Save view config
• The Grand Finale Demo!
– Create a new REST configuration
– Create an Xpage
– Add the ccRestView custom control to the xpage
– Configure the ccRestView custom control with new REST
configuration
– Revel in view data!
Putting it all together (cont.)
• http://datatables.net
• Extensions
• Error handling
• DataTables 1.10.6
– Uses AMD loader
Additional Topics

More Related Content

What's hot

Break out of The Box - Part 2
Break out of The Box - Part 2Break out of The Box - Part 2
Break out of The Box - Part 2
Karl-Henry Martinsson
 
AD102 - Break out of the Box
AD102 - Break out of the BoxAD102 - Break out of the Box
AD102 - Break out of the Box
Karl-Henry Martinsson
 
 Active Storage - Modern File Storage? 
 Active Storage - Modern File Storage?  Active Storage - Modern File Storage? 
 Active Storage - Modern File Storage? 
Michael Yagudaev
 
AD1387: Outside The Box: Integrating with Non-Domino Apps using XPages and Ja...
AD1387: Outside The Box: Integrating with Non-Domino Apps using XPages and Ja...AD1387: Outside The Box: Integrating with Non-Domino Apps using XPages and Ja...
AD1387: Outside The Box: Integrating with Non-Domino Apps using XPages and Ja...
panagenda
 
Advanced Site Studio Class, June 18, 2012
Advanced Site Studio Class, June 18, 2012Advanced Site Studio Class, June 18, 2012
Advanced Site Studio Class, June 18, 2012
Lee Klement
 
Uno! Deux! Three! Making Localization of XPages as Easy as 1-2-3
Uno! Deux! Three! Making Localization of XPages as Easy as 1-2-3Uno! Deux! Three! Making Localization of XPages as Easy as 1-2-3
Uno! Deux! Three! Making Localization of XPages as Easy as 1-2-3
Kathy Brown
 
Getting started with rails active storage wae
Getting started with rails active storage waeGetting started with rails active storage wae
Getting started with rails active storage wae
Bishal Khanal
 
S.M.A.R.T. Biml - Standardize, Model, Automate, Reuse and Transform (SQLSatur...
S.M.A.R.T. Biml - Standardize, Model, Automate, Reuse and Transform (SQLSatur...S.M.A.R.T. Biml - Standardize, Model, Automate, Reuse and Transform (SQLSatur...
S.M.A.R.T. Biml - Standardize, Model, Automate, Reuse and Transform (SQLSatur...
Cathrine Wilhelmsen
 
Lessons from a Dying CMS
Lessons from a Dying CMSLessons from a Dying CMS
Lessons from a Dying CMS
Sandy Smith
 
BP204 - Take a REST and put your data to work with APIs!
BP204 - Take a REST and put your data to work with APIs!BP204 - Take a REST and put your data to work with APIs!
BP204 - Take a REST and put your data to work with APIs!
Craig Schumann
 
Biml for Beginners - Generating SSIS Packages with BimlScript (SQLSaturday Go...
Biml for Beginners - Generating SSIS Packages with BimlScript (SQLSaturday Go...Biml for Beginners - Generating SSIS Packages with BimlScript (SQLSaturday Go...
Biml for Beginners - Generating SSIS Packages with BimlScript (SQLSaturday Go...
Cathrine Wilhelmsen
 
Gaelyk - SpringOne2GX - 2010 - Guillaume Laforge
Gaelyk - SpringOne2GX - 2010 - Guillaume LaforgeGaelyk - SpringOne2GX - 2010 - Guillaume Laforge
Gaelyk - SpringOne2GX - 2010 - Guillaume Laforge
Guillaume Laforge
 
XPages Blast - Lotusphere 2013
XPages Blast - Lotusphere 2013XPages Blast - Lotusphere 2013
XPages Blast - Lotusphere 2013
Tim Clark
 
XPages Blast - Lotusphere 2012
XPages Blast - Lotusphere 2012XPages Blast - Lotusphere 2012
XPages Blast - Lotusphere 2012
Tim Clark
 
Local Storage for Web Applications
Local Storage for Web ApplicationsLocal Storage for Web Applications
Local Storage for Web Applications
Markku Laine
 
Indexes: The neglected performance all rounder
Indexes: The neglected performance all rounderIndexes: The neglected performance all rounder
Indexes: The neglected performance all rounder
Markus Winand
 
Theme preprocess functions: An Introduction (DrupalCamp NYC 10 2011)
Theme preprocess functions: An Introduction (DrupalCamp NYC 10 2011)Theme preprocess functions: An Introduction (DrupalCamp NYC 10 2011)
Theme preprocess functions: An Introduction (DrupalCamp NYC 10 2011)
c4rl
 
Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8
Acquia
 
HTML 5
HTML 5HTML 5
HTML 5
Rajan Pal
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
Nathan Smith
 

What's hot (20)

Break out of The Box - Part 2
Break out of The Box - Part 2Break out of The Box - Part 2
Break out of The Box - Part 2
 
AD102 - Break out of the Box
AD102 - Break out of the BoxAD102 - Break out of the Box
AD102 - Break out of the Box
 
 Active Storage - Modern File Storage? 
 Active Storage - Modern File Storage?  Active Storage - Modern File Storage? 
 Active Storage - Modern File Storage? 
 
AD1387: Outside The Box: Integrating with Non-Domino Apps using XPages and Ja...
AD1387: Outside The Box: Integrating with Non-Domino Apps using XPages and Ja...AD1387: Outside The Box: Integrating with Non-Domino Apps using XPages and Ja...
AD1387: Outside The Box: Integrating with Non-Domino Apps using XPages and Ja...
 
Advanced Site Studio Class, June 18, 2012
Advanced Site Studio Class, June 18, 2012Advanced Site Studio Class, June 18, 2012
Advanced Site Studio Class, June 18, 2012
 
Uno! Deux! Three! Making Localization of XPages as Easy as 1-2-3
Uno! Deux! Three! Making Localization of XPages as Easy as 1-2-3Uno! Deux! Three! Making Localization of XPages as Easy as 1-2-3
Uno! Deux! Three! Making Localization of XPages as Easy as 1-2-3
 
Getting started with rails active storage wae
Getting started with rails active storage waeGetting started with rails active storage wae
Getting started with rails active storage wae
 
S.M.A.R.T. Biml - Standardize, Model, Automate, Reuse and Transform (SQLSatur...
S.M.A.R.T. Biml - Standardize, Model, Automate, Reuse and Transform (SQLSatur...S.M.A.R.T. Biml - Standardize, Model, Automate, Reuse and Transform (SQLSatur...
S.M.A.R.T. Biml - Standardize, Model, Automate, Reuse and Transform (SQLSatur...
 
Lessons from a Dying CMS
Lessons from a Dying CMSLessons from a Dying CMS
Lessons from a Dying CMS
 
BP204 - Take a REST and put your data to work with APIs!
BP204 - Take a REST and put your data to work with APIs!BP204 - Take a REST and put your data to work with APIs!
BP204 - Take a REST and put your data to work with APIs!
 
Biml for Beginners - Generating SSIS Packages with BimlScript (SQLSaturday Go...
Biml for Beginners - Generating SSIS Packages with BimlScript (SQLSaturday Go...Biml for Beginners - Generating SSIS Packages with BimlScript (SQLSaturday Go...
Biml for Beginners - Generating SSIS Packages with BimlScript (SQLSaturday Go...
 
Gaelyk - SpringOne2GX - 2010 - Guillaume Laforge
Gaelyk - SpringOne2GX - 2010 - Guillaume LaforgeGaelyk - SpringOne2GX - 2010 - Guillaume Laforge
Gaelyk - SpringOne2GX - 2010 - Guillaume Laforge
 
XPages Blast - Lotusphere 2013
XPages Blast - Lotusphere 2013XPages Blast - Lotusphere 2013
XPages Blast - Lotusphere 2013
 
XPages Blast - Lotusphere 2012
XPages Blast - Lotusphere 2012XPages Blast - Lotusphere 2012
XPages Blast - Lotusphere 2012
 
Local Storage for Web Applications
Local Storage for Web ApplicationsLocal Storage for Web Applications
Local Storage for Web Applications
 
Indexes: The neglected performance all rounder
Indexes: The neglected performance all rounderIndexes: The neglected performance all rounder
Indexes: The neglected performance all rounder
 
Theme preprocess functions: An Introduction (DrupalCamp NYC 10 2011)
Theme preprocess functions: An Introduction (DrupalCamp NYC 10 2011)Theme preprocess functions: An Introduction (DrupalCamp NYC 10 2011)
Theme preprocess functions: An Introduction (DrupalCamp NYC 10 2011)
 
Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8
 
HTML 5
HTML 5HTML 5
HTML 5
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 

Viewers also liked

A Beard, An App, A Blender
A Beard, An App, A BlenderA Beard, An App, A Blender
A Beard, An App, A Blender
edm00se
 
What the App? : A Modernization Strategy for Your Business Applications
What the App? : A Modernization Strategy for Your Business ApplicationsWhat the App? : A Modernization Strategy for Your Business Applications
What the App? : A Modernization Strategy for Your Business Applications
John Head
 
Speed geeking-lotusscript
Speed geeking-lotusscriptSpeed geeking-lotusscript
Speed geeking-lotusscript
Bill Buchan
 
AD1542 Get Hands On With Bluemix
AD1542 Get Hands On With BluemixAD1542 Get Hands On With Bluemix
AD1542 Get Hands On With Bluemix
Martin Donnelly
 
IBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages ApplicationsIBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages Applications
beglee
 
AD1279 "Marty, You're Not Thinking Fourth Dimensionally" - Troubleshooting XP...
AD1279 "Marty, You're Not Thinking Fourth Dimensionally" - Troubleshooting XP...AD1279 "Marty, You're Not Thinking Fourth Dimensionally" - Troubleshooting XP...
AD1279 "Marty, You're Not Thinking Fourth Dimensionally" - Troubleshooting XP...
Paul Withers
 
Connect 2016-Move Your XPages Applications to the Fast Lane
Connect 2016-Move Your XPages Applications to the Fast LaneConnect 2016-Move Your XPages Applications to the Fast Lane
Connect 2016-Move Your XPages Applications to the Fast Lane
Howard Greenberg
 
Building Responsive Applications Using XPages
Building Responsive Applications Using XPagesBuilding Responsive Applications Using XPages
Building Responsive Applications Using XPages
Teamstudio
 
Using Cool New Frameworks in (Mobile) Domino Apps
Using Cool New Frameworks in (Mobile) Domino AppsUsing Cool New Frameworks in (Mobile) Domino Apps
Using Cool New Frameworks in (Mobile) Domino Apps
Teamstudio
 
D8 l55g formation-introduction-a-ibm-lotus-domino-8-5-xpages
D8 l55g formation-introduction-a-ibm-lotus-domino-8-5-xpagesD8 l55g formation-introduction-a-ibm-lotus-domino-8-5-xpages
D8 l55g formation-introduction-a-ibm-lotus-domino-8-5-xpages
CERTyou Formation
 

Viewers also liked (10)

A Beard, An App, A Blender
A Beard, An App, A BlenderA Beard, An App, A Blender
A Beard, An App, A Blender
 
What the App? : A Modernization Strategy for Your Business Applications
What the App? : A Modernization Strategy for Your Business ApplicationsWhat the App? : A Modernization Strategy for Your Business Applications
What the App? : A Modernization Strategy for Your Business Applications
 
Speed geeking-lotusscript
Speed geeking-lotusscriptSpeed geeking-lotusscript
Speed geeking-lotusscript
 
AD1542 Get Hands On With Bluemix
AD1542 Get Hands On With BluemixAD1542 Get Hands On With Bluemix
AD1542 Get Hands On With Bluemix
 
IBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages ApplicationsIBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages Applications
 
AD1279 "Marty, You're Not Thinking Fourth Dimensionally" - Troubleshooting XP...
AD1279 "Marty, You're Not Thinking Fourth Dimensionally" - Troubleshooting XP...AD1279 "Marty, You're Not Thinking Fourth Dimensionally" - Troubleshooting XP...
AD1279 "Marty, You're Not Thinking Fourth Dimensionally" - Troubleshooting XP...
 
Connect 2016-Move Your XPages Applications to the Fast Lane
Connect 2016-Move Your XPages Applications to the Fast LaneConnect 2016-Move Your XPages Applications to the Fast Lane
Connect 2016-Move Your XPages Applications to the Fast Lane
 
Building Responsive Applications Using XPages
Building Responsive Applications Using XPagesBuilding Responsive Applications Using XPages
Building Responsive Applications Using XPages
 
Using Cool New Frameworks in (Mobile) Domino Apps
Using Cool New Frameworks in (Mobile) Domino AppsUsing Cool New Frameworks in (Mobile) Domino Apps
Using Cool New Frameworks in (Mobile) Domino Apps
 
D8 l55g formation-introduction-a-ibm-lotus-domino-8-5-xpages
D8 l55g formation-introduction-a-ibm-lotus-domino-8-5-xpagesD8 l55g formation-introduction-a-ibm-lotus-domino-8-5-xpages
D8 l55g formation-introduction-a-ibm-lotus-domino-8-5-xpages
 

Similar to MWLUG 2016 : AD117 : Xpages & jQuery DataTables

Taming the shrew Power BI
Taming the shrew Power BITaming the shrew Power BI
Taming the shrew Power BI
Kellyn Pot'Vin-Gorman
 
Building better SQL Server Databases
Building better SQL Server DatabasesBuilding better SQL Server Databases
Building better SQL Server Databases
ColdFusionConference
 
What's new in pandas and the SciPy stack for financial users
What's new in pandas and the SciPy stack for financial usersWhat's new in pandas and the SciPy stack for financial users
What's new in pandas and the SciPy stack for financial users
Wes McKinney
 
Learning Tableau - Data, Graphs, Filters, Dashboards and Advanced features
Learning Tableau -  Data, Graphs, Filters, Dashboards and Advanced featuresLearning Tableau -  Data, Graphs, Filters, Dashboards and Advanced features
Learning Tableau - Data, Graphs, Filters, Dashboards and Advanced features
Venkata Reddy Konasani
 
Exciting Features for SQL Devs in SQL 2012
Exciting Features for SQL Devs in SQL 2012Exciting Features for SQL Devs in SQL 2012
Exciting Features for SQL Devs in SQL 2012
Brij Mishra
 
Java Developers, make the database work for you (NLJUG JFall 2010)
Java Developers, make the database work for you (NLJUG JFall 2010)Java Developers, make the database work for you (NLJUG JFall 2010)
Java Developers, make the database work for you (NLJUG JFall 2010)
Lucas Jellema
 
Datastage Introduction To Data Warehousing
Datastage Introduction To Data WarehousingDatastage Introduction To Data Warehousing
Datastage Introduction To Data Warehousing
Vibrant Technologies & Computers
 
Build a modern data platform.pptx
Build a modern data platform.pptxBuild a modern data platform.pptx
Build a modern data platform.pptx
Ike Ellis
 
SAP BO and Teradata best practices
SAP BO and Teradata best practicesSAP BO and Teradata best practices
SAP BO and Teradata best practices
Dmitry Anoshin
 
Real-world BISM in SQL Server 2012 SSAS
Real-world BISM in SQL Server 2012 SSASReal-world BISM in SQL Server 2012 SSAS
Real-world BISM in SQL Server 2012 SSAS
Lynn Langit
 
Storage Systems For Scalable systems
Storage Systems For Scalable systemsStorage Systems For Scalable systems
Storage Systems For Scalable systems
elliando dias
 
Data Lakehouse, Data Mesh, and Data Fabric (r2)
Data Lakehouse, Data Mesh, and Data Fabric (r2)Data Lakehouse, Data Mesh, and Data Fabric (r2)
Data Lakehouse, Data Mesh, and Data Fabric (r2)
James Serra
 
Taming the shrew, Optimizing Power BI Options
Taming the shrew, Optimizing Power BI OptionsTaming the shrew, Optimizing Power BI Options
Taming the shrew, Optimizing Power BI Options
Kellyn Pot'Vin-Gorman
 
Webinar - Macy’s: Why Your Database Decision Directly Impacts Customer Experi...
Webinar - Macy’s: Why Your Database Decision Directly Impacts Customer Experi...Webinar - Macy’s: Why Your Database Decision Directly Impacts Customer Experi...
Webinar - Macy’s: Why Your Database Decision Directly Impacts Customer Experi...
DataStax
 
Self-serve analytics journey at Celtra: Snowflake, Spark, and Databricks
Self-serve analytics journey at Celtra: Snowflake, Spark, and DatabricksSelf-serve analytics journey at Celtra: Snowflake, Spark, and Databricks
Self-serve analytics journey at Celtra: Snowflake, Spark, and Databricks
Grega Kespret
 
MongoDB using Grails plugin by puneet behl
MongoDB using Grails plugin by puneet behlMongoDB using Grails plugin by puneet behl
MongoDB using Grails plugin by puneet behl
TO THE NEW | Technology
 
Machine Learning with ML.NET and Azure - Andy Cross
Machine Learning with ML.NET and Azure - Andy CrossMachine Learning with ML.NET and Azure - Andy Cross
Machine Learning with ML.NET and Azure - Andy Cross
Andrew Flatters
 
Improve power bi performance
Improve power bi performanceImprove power bi performance
Improve power bi performance
Annie Xu
 
Dynamic DDL: Adding structure to streaming IoT data on the fly
Dynamic DDL: Adding structure to streaming IoT data on the flyDynamic DDL: Adding structure to streaming IoT data on the fly
Dynamic DDL: Adding structure to streaming IoT data on the fly
DataWorks Summit
 
Big Data Warehousing Meetup: Dimensional Modeling Still Matters!!!
Big Data Warehousing Meetup: Dimensional Modeling Still Matters!!!Big Data Warehousing Meetup: Dimensional Modeling Still Matters!!!
Big Data Warehousing Meetup: Dimensional Modeling Still Matters!!!
Caserta
 

Similar to MWLUG 2016 : AD117 : Xpages & jQuery DataTables (20)

Taming the shrew Power BI
Taming the shrew Power BITaming the shrew Power BI
Taming the shrew Power BI
 
Building better SQL Server Databases
Building better SQL Server DatabasesBuilding better SQL Server Databases
Building better SQL Server Databases
 
What's new in pandas and the SciPy stack for financial users
What's new in pandas and the SciPy stack for financial usersWhat's new in pandas and the SciPy stack for financial users
What's new in pandas and the SciPy stack for financial users
 
Learning Tableau - Data, Graphs, Filters, Dashboards and Advanced features
Learning Tableau -  Data, Graphs, Filters, Dashboards and Advanced featuresLearning Tableau -  Data, Graphs, Filters, Dashboards and Advanced features
Learning Tableau - Data, Graphs, Filters, Dashboards and Advanced features
 
Exciting Features for SQL Devs in SQL 2012
Exciting Features for SQL Devs in SQL 2012Exciting Features for SQL Devs in SQL 2012
Exciting Features for SQL Devs in SQL 2012
 
Java Developers, make the database work for you (NLJUG JFall 2010)
Java Developers, make the database work for you (NLJUG JFall 2010)Java Developers, make the database work for you (NLJUG JFall 2010)
Java Developers, make the database work for you (NLJUG JFall 2010)
 
Datastage Introduction To Data Warehousing
Datastage Introduction To Data WarehousingDatastage Introduction To Data Warehousing
Datastage Introduction To Data Warehousing
 
Build a modern data platform.pptx
Build a modern data platform.pptxBuild a modern data platform.pptx
Build a modern data platform.pptx
 
SAP BO and Teradata best practices
SAP BO and Teradata best practicesSAP BO and Teradata best practices
SAP BO and Teradata best practices
 
Real-world BISM in SQL Server 2012 SSAS
Real-world BISM in SQL Server 2012 SSASReal-world BISM in SQL Server 2012 SSAS
Real-world BISM in SQL Server 2012 SSAS
 
Storage Systems For Scalable systems
Storage Systems For Scalable systemsStorage Systems For Scalable systems
Storage Systems For Scalable systems
 
Data Lakehouse, Data Mesh, and Data Fabric (r2)
Data Lakehouse, Data Mesh, and Data Fabric (r2)Data Lakehouse, Data Mesh, and Data Fabric (r2)
Data Lakehouse, Data Mesh, and Data Fabric (r2)
 
Taming the shrew, Optimizing Power BI Options
Taming the shrew, Optimizing Power BI OptionsTaming the shrew, Optimizing Power BI Options
Taming the shrew, Optimizing Power BI Options
 
Webinar - Macy’s: Why Your Database Decision Directly Impacts Customer Experi...
Webinar - Macy’s: Why Your Database Decision Directly Impacts Customer Experi...Webinar - Macy’s: Why Your Database Decision Directly Impacts Customer Experi...
Webinar - Macy’s: Why Your Database Decision Directly Impacts Customer Experi...
 
Self-serve analytics journey at Celtra: Snowflake, Spark, and Databricks
Self-serve analytics journey at Celtra: Snowflake, Spark, and DatabricksSelf-serve analytics journey at Celtra: Snowflake, Spark, and Databricks
Self-serve analytics journey at Celtra: Snowflake, Spark, and Databricks
 
MongoDB using Grails plugin by puneet behl
MongoDB using Grails plugin by puneet behlMongoDB using Grails plugin by puneet behl
MongoDB using Grails plugin by puneet behl
 
Machine Learning with ML.NET and Azure - Andy Cross
Machine Learning with ML.NET and Azure - Andy CrossMachine Learning with ML.NET and Azure - Andy Cross
Machine Learning with ML.NET and Azure - Andy Cross
 
Improve power bi performance
Improve power bi performanceImprove power bi performance
Improve power bi performance
 
Dynamic DDL: Adding structure to streaming IoT data on the fly
Dynamic DDL: Adding structure to streaming IoT data on the flyDynamic DDL: Adding structure to streaming IoT data on the fly
Dynamic DDL: Adding structure to streaming IoT data on the fly
 
Big Data Warehousing Meetup: Dimensional Modeling Still Matters!!!
Big Data Warehousing Meetup: Dimensional Modeling Still Matters!!!Big Data Warehousing Meetup: Dimensional Modeling Still Matters!!!
Big Data Warehousing Meetup: Dimensional Modeling Still Matters!!!
 

Recently uploaded

The Ultimate Guide to Phone Spy Apps: Everything You Need to Know
The Ultimate Guide to Phone Spy Apps: Everything You Need to KnowThe Ultimate Guide to Phone Spy Apps: Everything You Need to Know
The Ultimate Guide to Phone Spy Apps: Everything You Need to Know
onemonitarsoftware
 
ERP Software Solutions Provider in Coimbatore
ERP Software Solutions Provider in CoimbatoreERP Software Solutions Provider in Coimbatore
ERP Software Solutions Provider in Coimbatore
Nextskill Technologies
 
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
Srinivas Dukka
 
Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...
Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...
Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...
87tomato
 
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
jealousviolet
 
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
rachitkumar09887
 
當測試開始左移
當測試開始左移當測試開始左移
當測試開始左移
Jersey (CHE-PING) Su
 
Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)
miso_uam
 
11 Top Cross Browser Testing Tools to Know About.pdf
11 Top Cross Browser Testing Tools to Know About.pdf11 Top Cross Browser Testing Tools to Know About.pdf
11 Top Cross Browser Testing Tools to Know About.pdf
kalichargn70th171
 
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
shanihomely
 
NYGGS 360: A Complete ERP for Construction Innovation
NYGGS 360: A Complete ERP for Construction InnovationNYGGS 360: A Complete ERP for Construction Innovation
NYGGS 360: A Complete ERP for Construction Innovation
NYGGS Construction ERP Software
 
Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.
shivamt017
 
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
confluent
 
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
bhumivarma35300
 
Google ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learningGoogle ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learning
VishrutGoyani1
 
Odoo E-commerce website development guides
Odoo E-commerce website development guidesOdoo E-commerce website development guides
Odoo E-commerce website development guides
jhkdigitalmarketing
 
Artificial intelligence in customer services or chatbots
Artificial intelligence  in customer services or chatbotsArtificial intelligence  in customer services or chatbots
Artificial intelligence in customer services or chatbots
kayash1656
 
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
ashiklo9823
 
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
45unexpected
 
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
bahubalikumar09988
 

Recently uploaded (20)

The Ultimate Guide to Phone Spy Apps: Everything You Need to Know
The Ultimate Guide to Phone Spy Apps: Everything You Need to KnowThe Ultimate Guide to Phone Spy Apps: Everything You Need to Know
The Ultimate Guide to Phone Spy Apps: Everything You Need to Know
 
ERP Software Solutions Provider in Coimbatore
ERP Software Solutions Provider in CoimbatoreERP Software Solutions Provider in Coimbatore
ERP Software Solutions Provider in Coimbatore
 
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
 
Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...
Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...
Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...
 
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
 
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
 
當測試開始左移
當測試開始左移當測試開始左移
當測試開始左移
 
Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)
 
11 Top Cross Browser Testing Tools to Know About.pdf
11 Top Cross Browser Testing Tools to Know About.pdf11 Top Cross Browser Testing Tools to Know About.pdf
11 Top Cross Browser Testing Tools to Know About.pdf
 
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
 
NYGGS 360: A Complete ERP for Construction Innovation
NYGGS 360: A Complete ERP for Construction InnovationNYGGS 360: A Complete ERP for Construction Innovation
NYGGS 360: A Complete ERP for Construction Innovation
 
Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.
 
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
 
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
 
Google ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learningGoogle ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learning
 
Odoo E-commerce website development guides
Odoo E-commerce website development guidesOdoo E-commerce website development guides
Odoo E-commerce website development guides
 
Artificial intelligence in customer services or chatbots
Artificial intelligence  in customer services or chatbotsArtificial intelligence  in customer services or chatbots
Artificial intelligence in customer services or chatbots
 
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
 
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
 
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
 

MWLUG 2016 : AD117 : Xpages & jQuery DataTables

  • 1. AD 117 Xpages & jQuery DataTables Simplifying View creation while maximizing functionality in XPage applications.
  • 2. • Notes & Domino developer for 17-18 years – Focused on XPages for past 5-6 years • As a consultant was able to work at some very interesting companies • Currently a Senior Developer for Mutual Boiler Re – We are kind of a niche inside a niche • First time speaker! • My blog: http://xpage.me • Twitter: @michaelgsmith Michael G. Smith - About Me
  • 3. • Introduction to DataTables – Try to cut through the fat and focus on the most useful stuff – This is not a comprehensive overview • Roadmap to quickly surface view data in your Xpage apps – Brand new or existing apps • Share my experiences and lessons learned – I learned a lot just working on this presentation! • How to take everything and utilize it in an enterprise application – Scalability • You should be able to walk away and utilize these concepts immediately – If I’ve done my job Goals for this session
  • 4. • What is DataTables? • Why DataTables? • Getting started with DataTables • Putting the “Data” in DataTables • The DataTables lifecycle • Advanced configuration • Domino View Management • Putting it all together Agenda
  • 5. • Simply defined, it is: – A client side framework/library – A jQuery plugin – It’s HUGE! • It is NOT: – the XPages control • From the DataTables online manual: The stated goal of DataTables is "To enhance the accessibility of data in HTML tables”. • My definition: – A great tool for creating Domino-like rich views in XPage and web applications What is DataTables?
  • 6. • Very easy to hit the ground running • Integrates well with Bootstrap • Further separates data from design • Became more and more impressed with it’s capabilities • “A” way, not “The” way • Extremely well documented through online reference material and support forums – When using example code try to make sure it is from v 1.10 or later • Excellent at handling data types • Great replacement for views and embedded views – Embedded views on tabs – only load data when tab is clicked Why DataTables?
  • 7. • Adding files to your project – CDN – Locally (WebContent) – Package Manager (Bower/NPM) • Dependencies – jQuery 1.7 or later • My Demos – DataTables 1.10.2 – jQuery 1.11.2 Getting started with DataTables
  • 8. • Styling options – Default DataTables css – Bootstrap • Requires a reduced DataTables css • Use the Bootstrap table classes when assigning classes to the table markup – Other frameworks • Foundation • jQuery UI – Use the DataTables theme creator to match your UI – https://datatables.net/manual/styling/theme-creator Getting started with DataTables (cont.)
  • 9. • Add appropriate source files to your theme – Core DataTables • DataTables CSS • jQuery • DataTables js – Bootstrap • Bootstrap css • DataTables Bootstrap css • jQuery js • Bootstrap js • DataTables js Getting started with DataTables (cont.)
  • 10. Putting the “Data” in DataTables
  • 11. • From the Docs: Data for a DataTable can essentially come from three different locations: – HTML - ideal for when your table already exists and has been populated with data. – Javascript Array - used when your data exists in a Javascript array – An Ajax data source • Let’s start with a simple xp:repeat Putting the “Data” in DataTables
  • 12. Putting the “Data” in DataTables (cont.) • Adding a DataTable to a xp:repeat
  • 13. • Simple xp:repeat Demo Putting the “Data” in DataTables (cont.)
  • 14. • DataTables default configuration Adding a DataTable to a xp:repeat (cont.)
  • 15. • DataTables default configuration Adding a DataTable to a xp:repeat (cont.)
  • 16. • DataTables default configuration Adding a DataTable to a xp:repeat (cont.)
  • 17. • DataTables configuration options Adding a DataTable to a xp:repeat (cont.)
  • 18. • Demo – adding simple configuration Adding a DataTable to a xp:repeat (cont.)
  • 19. • Simply add classes to your table markup • From the DataTables reference: Adding style to the xp:repeat
  • 20. • By applying classes to the markup we turn this: Adding style to the xp:repeat (cont.)
  • 21. • Into this: Adding style to the xp:repeat (cont.)
  • 22. • In Bootstrap: Adding style to the xp:repeat (cont.)
  • 23. Creating a DataTable from REST data
  • 24. • Use the “ajax” option to retrieve data: Creating a DataTable from REST data
  • 25. • DataTables expects: – Array of arrays • Columns object must be defined or .. • Markup must contain thead with th/td cells for each data column – Array of objects (JSON) • Columns object must be defined! Creating a DataTable from REST data (cont.)
  • 26. • Array of arrays – Defining the columns object • Need one object per column • With no data field, the order of the objects must correspond to the order of the returned data • Use the data field to match up objects with 0 based index of the row array (order doesn’t matter) Creating a DataTable from REST data (cont.)
  • 27. • Array of arrays – Using markup • Must have a thead element and a th or td for each column • Order matters Creating a DataTable from REST data (cont.)
  • 28. • Array of objects (JSON) – Columns object must be defined! Creating a DataTable from REST data
  • 29. • Array of objects (JSON) – Map the “data” field of the columns object to the appropriate field in the returned JSON object Creating a DataTable from REST data
  • 30. • The most common ways to retrieve REST data in Domino: Creating a DataTable from REST data (cont.)
  • 31. • The most common ways to retrieve REST data in Domino: • xeViewJsonService – Pros • Easy to hit the ground running • Domino handles data serialization – Cons • More difficult to fine tune the data returned (i.e. reduce payload size) Creating a DataTable from REST data (cont.)
  • 32. • The most common ways to retrieve REST data in Domino: • xeCustomRestService – Pros • More granular control • Easier to define the column definitions at the rest service – Cons • Need to be aware of data types and make sure data is serialized properly • Need to actually write the code that builds the data Creating a DataTable from REST data (cont.)
  • 33. • The most common ways to retrieve REST data in Domino: • XAgent – Pros • More granular control (even more?) • Easier to define the column definitions at the rest service – Cons • Need to be aware of data types and make sure data is serialized properly • Need to actually write the code that builds the data Creating a DataTable from REST data (cont.)
  • 34. • REST demo: Creating a DataTable from REST data (cont.)
  • 36. • Use callbacks to provide a “rich” view experience – initComplete() – drawCallback() – rowCallback() – createdRow() • Similarities to the XPages lifecycle • Be cognizant of your users – Don’t slow down user experience by adding too much client side processing The DataTables “Lifecycle” (callbacks)
  • 37. • Callback demo The DataTables “Lifecycle” (callbacks) (cont.)
  • 39. • Adding click events – Use the “createdRow” or “rowCallback” callbacks • DataTables docs say createdRow is more efficient • This *should* result in better browser performance, i.e. javascript objects won’t be left behind when the DataTable is destroyed – Be aware when double clicking, click event is also fired unless the timeout method is used • This is a browser issue, not DataTables • Demo Advanced Configuration
  • 40. • Renderers – Possibly the most powerful aspect of DataTables – Executed whenever DataTables needs to get the data for a cell in the column. – This function might be called multiple times, as DataTables will call it for the different data types that it needs: • display • sorting • filtering – Orthogonal Data • Each data point has the ability to take multiple forms • Demo: Advanced Configuration (cont.)
  • 42. • Filtering programmatically – The real power of DataTables can be exploited through the use of the API – Tables can be searched by row, column or globally across all data – Must call the draw() event after performing search • Demo Advanced Configuration (cont.)
  • 45. • Lazy Loading – Grab additional data via REST and use DataTables api to insert rows • Demo Advanced Configuration
  • 46. • Categorization – Not built in to DataTables but easy to add using the api and callbacks – Outdated, but sometimes still a requirement during the app modernization process • Gently ease users into new tech by keeping some familiarity • Demo Advanced Configuration
  • 47. • Reloading data – Avoid the dreaded “Can’t reinitialize DataTable” message • When referencing your table be sure to use the same class it was instantiated with – When data is reloaded current sort remains intact Advanced Configuration
  • 48. Putting it all together
  • 49. • Manage your Domino views – Separation of data and functionality – Use views as strictly back end data containers • Load em up with data! – Minimize “click to sort” columns to reduce view index size – Domino ISO-8601 dates can be problematic if not careful • Ex. 1957-03-14T21:54:30Z • My preference: creating a text column – Strip out unnecessary columns, i.e. colors, icons • May need to create REST only views in coexistence scenarios – Fewer views • No more specialized views with only a handful of columns • Utilize categories and keys and ftsearch Putting it all together
  • 50. • Managing your Domino views (cont.) – Make sure columns have an itemName !!! Putting it all together (cont.)
  • 51. • In order to apply all of this to an enterprise application we need to be able to “connect” the data to the configurations • My solution: REST View Manager – Configure DataTable configurations in a browser and store json in a Notes Document • Minimizes need to touch designs • Makes view customization by users much easier to implement and manage – Use a custom control that can be dragged and dropped into any Xpage or custom control and configured through custom properties – Opens the door to allowing users to customize their views Putting it all together (cont.)
  • 52. • REST View Manager Putting it all together (cont.)
  • 53. • REST View Manager Putting it all together (cont.) nsf REST configuration created client side Xpage DataTable Client Side Server side REST Service Read view config Read view config GET data Save view config
  • 54. • The Grand Finale Demo! – Create a new REST configuration – Create an Xpage – Add the ccRestView custom control to the xpage – Configure the ccRestView custom control with new REST configuration – Revel in view data! Putting it all together (cont.)
  • 55. • http://datatables.net • Extensions • Error handling • DataTables 1.10.6 – Uses AMD loader Additional Topics