MWLUG 2016 : AD117 : Xpages & jQuery DataTables
Download as PPTX, PDF2 likes3,707 views
- DataTables is a jQuery plugin that enhances the accessibility of data in HTML tables. It allows for easy creation of rich, interactive views in XPages applications. - Data can be added to DataTables from HTML, a JavaScript array, or an Ajax data source like REST. Callbacks provide a way to add interactivity similar to the XPages lifecycle. - Advanced configuration options include click handlers, renderers, filtering, lazy loading, and categorization to create feature-rich views.
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.)
- 41. • Renderers 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.)
- 43. • Filtering programmatically Advanced Configuration (cont.)
- 44. • Filtering programmatically 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