Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

XPages and jQuery DataTables: Simplifying View Creation while Maximizing Functionality

2,548 views

Published on

Do you find adding view data to XPages unnecessarily painful? This webinar will focus on unleashing the power of jQuery DataTables within your XPages and demonstrate how to create a scalable infrastructure that minimizes the need for additional views and design changes to XPage design elements by using REST services and a reusable custom control. We will also dig into the API of DataTables and show you how to take advantage of its rich feature set to enhance the UI of your views and tables within your XPage applications. With XPages and DataTables, adding view data to your XPages can be simple, fast, powerful, and painless!

Published in: Technology

XPages and jQuery DataTables: Simplifying View Creation while Maximizing Functionality

  1. 1. XPages and jQuery DataTables: Simplifying View Creation while Maximizing Functionality Oct. 11, 2016
  2. 2. This webinar is brought to you as part of the free monthly webinar series from:
  3. 3. Howard Greenberg @TLCC Paul Della-Nebbia @PaulDN Courtney Carter @Teamstudio Michael Smith @MichaelGSmith
  4. 4. Teamstudio provides products that help organizations with customized business applications implement best practices, work more efficiently, and prepare for the future. AboutTeamstudio
  5. 5. https://www.teamstudio.com/
  6. 6. TLCC Courses • The Leader in Notes and Domino Training since 1997 • Self Paced Distance Learning Courses – XPages, Development, and Administration • XPages from basic to advanced – Two Java courses – JavaScript course – XPages 2 course – Rapid Application Development • Free demo courses – Intro. To XPages Development
  7. 7. 2 • Save hundreds and even Thousands of Dollars on the most popular courses and packages: XPages Development Notes and Domino Development Domino Administration • Now Extended to October 28th http://www.tlcc.com/fallsale
  8. 8. TLCC Development Services • Let us help with your development needs – Bootstrap – Java • Convert Notes Apps to mobile and the web! • Modernize old Domino web applications • Interface with backend data systems • Skills transfer 3
  9. 9. Upcoming and Recorded Webinars • November – IBM Presents Notes/Domino Roadmap • December – Application Modernization Options www.tlcc.com/xpages-webinar View Previous Webinars (use url above)
  10. 10. IBM Champion Nominations are Open • Nominations are open for the IBM Champion program – Through November 14th – Go here to complete the nomination form • If you think someone has contributed to the ICS community then nominate them! – Speaks at conferences – Helps out in forums and Stack Overflow, etc. – Hosts videos, blogs, webinars – More about the IBM Champion Program here 5
  11. 11. Asking Questions – Q and A at the end Use the Orange Arrow button to expand the GoToWebinar panel Then ask your questions in the Questions pane! We will answer your questions verbally at the end of the webinar
  12. 12. 7 XPages and jQuery DataTables - Simplifying View creation while maximizing functionality Michael Smith Mutual Boiler Re @MichaelGSmith
  13. 13. October 11, 2016 Xpages & jQuery DataTables Simplifying View creation while maximizing functionality in XPage applications.
  14. 14. xpage.me XPages & jQuery DataTables • Notes & Domino developer for ~18 years – Focused on XPages for past 5-6 years • As a consultant was able to work for some very interesting companies • Currently a Senior Developer for Mutual Boiler Re – We are kind of a niche inside a niche • My blog: http://xpage.me • Twitter: @michaelgsmith • LinkedIn: http://www.linkedin.com/in/magnitudesolutions Michael G. Smith - About Me
  15. 15. xpage.me XPages & jQuery DataTables • Introduction to DataTables (http://datatables.net) – Try to cut through the fat and focus on the most useful stuff – This is not a comprehensive overview (we’d be here all week) • 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
  16. 16. xpage.me XPages & jQuery DataTables • Developers “modernizing” legacy Notes/Domino Apps – Focus is on building Notes-like views and embedded views, but better • Anyone interested in using REST to surface data to a front end application to provide highly functional , nice looking grids – These concepts aren’t limited to XPages Who is this session for?
  17. 17. xpage.me XPages & jQuery DataTables • 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
  18. 18. xpage.me XPages & jQuery DataTables • 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?
  19. 19. xpage.me XPages & jQuery 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 (http://datatables.net) – 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?
  20. 20. xpage.me XPages & jQuery DataTables • Adding files to your project – CDN – In the NSF (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
  21. 21. xpage.me XPages & jQuery 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.)
  22. 22. xpage.me XPages & jQuery DataTables • Add appropriate source files to your theme – Using Core DataTables • DataTables CSS • jQuery • DataTables js – Using Bootstrap • Bootstrap css • DataTables Bootstrap css • jQuery js • Bootstrap js • DataTables js Getting started with DataTables (cont.)
  23. 23. xpage.me XPages & jQuery DataTables Putting the “Data” in DataTables
  24. 24. xpage.me XPages & jQuery 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 (JSON or JavaScript array) • Let’s start with a simple xp:repeat Putting the “Data” in DataTables
  25. 25. xpage.me XPages & jQuery DataTables Putting the “Data” in DataTables (cont.) • Adding a DataTable to a xp:repeat
  26. 26. xpage.me XPages & jQuery DataTables • Simple xp:repeat Demo Putting the “Data” in DataTables (cont.)
  27. 27. xpage.me XPages & jQuery DataTables • DataTables default configuration Adding a DataTable to a xp:repeat (cont.)
  28. 28. xpage.me XPages & jQuery DataTables • DataTables default configuration Adding a DataTable to a xp:repeat (cont.)
  29. 29. xpage.me XPages & jQuery DataTables • DataTables default configuration Adding a DataTable to a xp:repeat (cont.)
  30. 30. xpage.me XPages & jQuery DataTables • DataTables configuration options Adding a DataTable to a xp:repeat (cont.)
  31. 31. xpage.me XPages & jQuery DataTables • DataTables configuration options (most common) – paging – searching – info – ordering – scrollY (my new favorite) Adding a DataTable to a xp:repeat (cont.)
  32. 32. xpage.me XPages & jQuery DataTables • Demo – adding simple configuration Adding a DataTable to a xp:repeat (cont.)
  33. 33. xpage.me XPages & jQuery DataTables • Simply add classes to your table markup Adding style to the xp:repeat
  34. 34. xpage.me XPages & jQuery DataTables • From the DataTables reference: Adding style to the xp:repeat
  35. 35. xpage.me XPages & jQuery DataTables • The most common: – hover – stripe – row-border OR – cell-border Adding style to the xp:repeat
  36. 36. xpage.me XPages & jQuery DataTables • By applying classes to the markup we turn this: Adding style to the xp:repeat (cont.)
  37. 37. xpage.me XPages & jQuery DataTables • Into this: Adding style to the xp:repeat (cont.)
  38. 38. xpage.me XPages & jQuery DataTables • If using the Bootstrap DataTables css then use the Bootstrap table classes – http://getbootstrap.com/css/#tables Adding style to the xp:repeat (cont.)
  39. 39. xpage.me XPages & jQuery DataTables • In Bootstrap: Adding style to the xp:repeat (cont.)
  40. 40. xpage.me XPages & jQuery DataTables Creating a DataTable from REST data
  41. 41. xpage.me XPages & jQuery DataTables • Use the “ajax” option to retrieve data: Creating a DataTable from REST data
  42. 42. xpage.me XPages & jQuery DataTables • 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.) The columns object is really, really important !!!
  43. 43. xpage.me XPages & jQuery DataTables • 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.)
  44. 44. xpage.me XPages & jQuery DataTables • 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.)
  45. 45. xpage.me XPages & jQuery DataTables • Array of objects (JSON) – Columns object must be defined! Creating a DataTable from REST data
  46. 46. xpage.me XPages & jQuery DataTables • 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
  47. 47. xpage.me XPages & jQuery DataTables • The most common ways to retrieve REST data from 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.)
  48. 48. xpage.me XPages & jQuery DataTables • The most common ways to retrieve REST data from Domino: • xeViewJsonService Creating a DataTable from REST data (cont.)
  49. 49. xpage.me XPages & jQuery DataTables • The most common ways to retrieve REST data from Domino: Creating a DataTable from REST data (cont.)
  50. 50. xpage.me XPages & jQuery DataTables • 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.)
  51. 51. xpage.me XPages & jQuery DataTables • The most common ways to retrieve REST data in Domino: • xeCustomRestService Creating a DataTable from REST data (cont.)
  52. 52. xpage.me XPages & jQuery DataTables • The most common ways to retrieve REST data in Domino: • xeCustomRestService Creating a DataTable from REST data (cont.)
  53. 53. xpage.me XPages & jQuery DataTables • 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.)
  54. 54. xpage.me XPages & jQuery DataTables • REST demo: Creating a DataTable from REST data (cont.)
  55. 55. xpage.me XPages & jQuery DataTables The DataTables Lifecycle
  56. 56. xpage.me XPages & jQuery DataTables • 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)
  57. 57. xpage.me XPages & jQuery DataTables • Callback demo The DataTables “Lifecycle” (callbacks) (cont.)
  58. 58. xpage.me XPages & jQuery DataTables Advanced Configuration
  59. 59. xpage.me XPages & jQuery DataTables Advanced Configuration • Row click events • Renderers • Programmatic filtering • Dynamically inserting new rows (Lazy loading/Infinite scroll) • Categorization • Reloading data (view refresh) • Fixed table headers • View column icons • Server column resort • Error handling • Using a DataTable as a Picklist
  60. 60. xpage.me XPages & jQuery DataTables • 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
  61. 61. xpage.me XPages & jQuery DataTables • 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.)
  62. 62. xpage.me XPages & jQuery DataTables • Renderers Advanced Configuration (cont.)
  63. 63. xpage.me XPages & jQuery DataTables • 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.)
  64. 64. xpage.me XPages & jQuery DataTables • Filtering programmatically Advanced Configuration (cont.)
  65. 65. xpage.me XPages & jQuery DataTables • Filtering programmatically Advanced Configuration (cont.)
  66. 66. xpage.me XPages & jQuery DataTables • Lazy Loading – Grab additional data via REST and use DataTables api to insert rows • Demo Advanced Configuration
  67. 67. xpage.me XPages & jQuery DataTables • 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
  68. 68. xpage.me XPages & jQuery DataTables • 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
  69. 69. xpage.me XPages & jQuery DataTables • Fixed Table Headers – When adding a grid to a web application, ultimately users will want the column headers to freeze while scrolling through data – Used to this functionality in Notes – DataTables has a Fixed Header extension • Requires loading additional resources • Creates a layer on top of the original table header – Better Headers with scrollY • Set scrollY to 0 in DataTables initialization • Compute size of scroll body • Came up with this method while preparing this presentation! Advanced Configuration
  70. 70. xpage.me XPages & jQuery DataTables • Fixed Table Headers Advanced Configuration
  71. 71. xpage.me XPages & jQuery DataTables • Fixed Table Headers Advanced Configuration
  72. 72. xpage.me XPages & jQuery DataTables • Fixed Table Headers – Fixed Header Demo – Multip Advanced Configuration
  73. 73. xpage.me XPages & jQuery DataTables • View column icons – Column icons were one of the great, simple things about Notes views – If using Font Awesome in your application, this becomes even easier – Another example demonstrating the power and usefulness of renderers Advanced Configuration
  74. 74. xpage.me XPages & jQuery DataTables • View column icons – Setup the back end view Advanced Configuration
  75. 75. xpage.me XPages & jQuery DataTables • View column icons – In the columns configuration, tell DataTables that the colIconEmail column will be built with a renderer Advanced Configuration
  76. 76. xpage.me XPages & jQuery DataTables • View column icons – Build the column icon with the renderer Advanced Configuration
  77. 77. xpage.me XPages & jQuery DataTables • Server Resort – Backend view columns must be set to click to sort! – This example is a good example of not having a clear path but using the tools available in DataTables – Add className to the columns config Advanced Configuration
  78. 78. xpage.me XPages & jQuery DataTables • Server Resort – Add click event to column headers – Rebuild url based on clicked column and call reload Advanced Configuration
  79. 79. xpage.me XPages & jQuery DataTables • Error Handling – By default DataTables will alert all errors – Errors can be suppressed by throwing to the console – Be aware! Setting this option changes it for ALL DataTables on the page! Advanced Configuration $.fn.dataTable.ext.errMode = ‘throw';
  80. 80. xpage.me XPages & jQuery DataTables • Error Handling – Version 1.10.5 of DataTables introduced the ability to customize the error handling Advanced Configuration $('#example') .on( 'error.dt', function ( e, settings, techNote, message ) { console.log( 'An error has been reported by DataTables: ', message ); } ) .DataTable();
  81. 81. xpage.me XPages & jQuery DataTables Putting it all together
  82. 82. xpage.me XPages & jQuery DataTables • 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
  83. 83. xpage.me XPages & jQuery DataTables • Managing your Domino views (cont.) – Make sure columns have an itemName !!! Putting it all together (cont.)
  84. 84. xpage.me XPages & jQuery DataTables • 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.)
  85. 85. xpage.me XPages & jQuery DataTables • REST View Manager Putting it all together (cont.)
  86. 86. xpage.me XPages & jQuery DataTables • 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
  87. 87. xpage.me XPages & jQuery DataTables • 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.)
  88. 88. Questions???? Use the Orange Arrow button to expand the GoToWebinar panel Then ask your questions in the Questions panel! Remember, we will answer your questions verbally
  89. 89. @MichaelGSmith #XPages @TLCCLtd @Teamstudio @PaulDN Upcoming Events:  Cross Canada User Group – Nov. 17th  DominoPoint in Milan, Italy – Dec. 14th  Connect 2017 in San Francisco, CA – Feb. 20th to 23rd Question and Answer Time! Teamstudio Questions? contactus@teamstudio.com 978-712-0924 TLCC Questions? howardg@tlcc.com paul@tlcc.com 888-241-8522 or 561-953-0095 Howard Greenberg Courtney Carter Paul Della-Nebbia Save on TLCC Training with the Fall Sale! Michael Smith

×