![Integration with REST
Anatomy of the custom csjs file
Ext.require([
'Ext.data.*',
'Ext.grid.*',
AMD Loading of
libraries
'Ext.ux.grid.FiltersFeature'
]);
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: ['firstname', 'lastname', 'address', 'city', 'state']
});
21
Field model](https://image.slidesharecdn.com/extjs-140128215705-phpapp01/85/Connect-2014-EXTJS-in-XPages-Modernizing-IBM-Notes-Views-Without-Sacrificing-Functionality-21-320.jpg)
![Integration with REST
Define the Grid
var grid = Ext.create('Ext.grid.Panel', {
renderTo: 'gridHere',
//id of Div on the page
frame: true,
features: [filters],
//Add the Filter Feature
height: 400,
title: 'Users',
store: store,
//JSON data store from the REST
columns: [{
//Define each column
header: 'First123',
sortable: true,
dataIndex: 'firstname',
filterable: true
},
more columns]
});
});
23
//define column properties](https://image.slidesharecdn.com/extjs-140128215705-phpapp01/85/Connect-2014-EXTJS-in-XPages-Modernizing-IBM-Notes-Views-Without-Sacrificing-Functionality-23-320.jpg)
![Integration with REST
Anatomy of the custom csjs file
Ext.require([
'Ext.data.*',
'Ext.grid.*',
AMD Loading of
libraries
'Ext.ux.grid.FiltersFeature'
]);
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: ['firstname', 'lastname', 'address', 'city', 'state']
});
21
Field model](https://image.slidesharecdn.com/extjs-140128215705-phpapp01/75/Connect-2014-EXTJS-in-XPages-Modernizing-IBM-Notes-Views-Without-Sacrificing-Functionality-21-2048.jpg)
![Integration with REST
Define the Grid
var grid = Ext.create('Ext.grid.Panel', {
renderTo: 'gridHere',
//id of Div on the page
frame: true,
features: [filters],
//Add the Filter Feature
height: 400,
title: 'Users',
store: store,
//JSON data store from the REST
columns: [{
//Define each column
header: 'First123',
sortable: true,
dataIndex: 'firstname',
filterable: true
},
more columns]
});
});
23
//define column properties](https://image.slidesharecdn.com/extjs-140128215705-phpapp01/75/Connect-2014-EXTJS-in-XPages-Modernizing-IBM-Notes-Views-Without-Sacrificing-Functionality-23-2048.jpg)
Uploaded byMark Roden
Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality
This document provides an overview and agenda for a presentation on integrating Ext JS grids into XPages applications to modernize IBM Notes views. It introduces Ext JS as a JavaScript library for data display, discusses adding Ext JS and integrating with REST services to load data into grids. It also covers capabilities of Ext JS grids like sorting, filtering, editing and considerations for loading large amounts of data and improving the user experience.
More Related Content
![[Patel] SPFx: An ISV Insight into latest Microsoft's customization model](https://cdn.slidesharecdn.com/ss_thumbnails/ecs18shaipatelspfxanisvinsight-180618091115-thumbnail.jpg?width=560&fit=bounds)
Similar to Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality
![Smarter Hand offs — Documentation & Transitioning to Development [5/6]](https://cdn.slidesharecdn.com/ss_thumbnails/session5-250917143909-4f05ff43-thumbnail.jpg?width=560&fit=bounds)
Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality
- 1. BP203: Ext JSin XPages: Modernizing IBM Notes Views Without Sacrificing Functionality Dr. Mark Roden, PSC Group LLC © 2014 IBM Corporation
- 2. About Dr. Marky Over 16 years IBM Notes Domino® work Senior Consultant at PSC Group LLC • XPages® Developer • Project Leader • 2014 IBM Champion Contact Information • • • • 2 Blog: http://www.xomino.com Email: [email protected] Twitter: @markyroden Skype: marky.roden www.psclistens.com @pscgroup
- 3.
- 4. Agenda What isExt JS? What are Ext JS Grids? Adding Ext JS to an XPages application Integration with REST services – How many documents really? What capabilities do Ext JS Grids provide? User experience considerations 4
- 5. What is ExtJS ? 5
- 6. What is ExtJS? Originally built as an add-on library extension of YUI by Jack Slocum (circa 2005) Sencha Inc created June 2010 – Ext JS merged with JQTouch and Raphaël Dual License JavaScript library – Open Source GPL – Commercial 6
- 7. What is ExtJS? Data Gridding 7
- 8. What is ExtJS? Tree Viewing 8
- 9. What is ExtJS? Data Charting 9
- 10. What is ExtJS? Drag and Dropping 10
- 11. What is ExtJS? Fully Functioning JavaScript Framework Library 11
- 12. What are ExtJS Grids? 12
- 13. What are ExtJS Grids? Discrete subsection of Ext JS functionality It’s akin to an IBM Notes client view on the web… – With almost every additional feature you wished for True evolution of web based data management For examples see http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/#sample-3 13
- 14. What are ExtJS Grids? Traditional notes views on the web – Functional: 1997 Web experience 14
- 15. What are ExtJS Grids? XPages View controls – More Functional: 2008 Web Experience 15
- 16. What are ExtJS Grids? Highly configurable data display containers Ext JS Grid controls – 2014 Web Experience 16
- 17. Adding Ext JSto an XPages application 17
- 18. Adding Ext JSto an XPages application Download the library from sencha.com – 45M (you don’t need all that) – Take the resources and src folders – Add them to WebContent 18
- 19. Adding Ext JSto an XPages application Add four things to your XPage 1. Reference links to the Ext JS JavaScript and CSS files 2. Custom CSJS file 3. A <DIV /> to display the grid in 19
- 20. Integration with RESTservices 20
- 21. Integration with REST Anatomy of the custom csjs file Ext.require([ 'Ext.data.*', 'Ext.grid.*', AMD Loading of libraries 'Ext.ux.grid.FiltersFeature' ]); Ext.define('Person', { extend: 'Ext.data.Model', fields: ['firstname', 'lastname', 'address', 'city', 'state'] }); 21 Field model
- 22. Integration with REST Createthe data store var store = Ext.create('Ext.data.Store', { autoLoad: true, autoDestroy: true, Field Model autoSync: false, model: 'Person', proxy: { type: 'rest', url: 'xRestService.xsp/byFirstName', reader: { type: 'json', root: 'items' }, writer: { type: 'json' }, noCache: false } }); 22 The XPages REST service
- 23. Integration with REST Definethe Grid var grid = Ext.create('Ext.grid.Panel', { renderTo: 'gridHere', //id of Div on the page frame: true, features: [filters], //Add the Filter Feature height: 400, title: 'Users', store: store, //JSON data store from the REST columns: [{ //Define each column header: 'First123', sortable: true, dataIndex: 'firstname', filterable: true }, more columns] }); }); 23 //define column properties
- 24. Integration with REST DisplayThe Data How many documents really? – ~95,500 documents – 43 seconds to download – 4.5 M data 24
- 25. What capabilities doExt JS Grids provide? 25
- 26. What capabilities doExt JS Grids provide? Demonstrations To view the examples see http://demo.xomino.com/xomino/ExtJS.nsf 26
- 27. What capabilities doExt JS Grids provide? Like a notes view – Sorting Columns – Categories – Searches • By Field • By Date – Column Totals – Selecting single / multiple documents • Taking actions upon them 27
- 28. What capabilities doExt JS Grids provide? Better that a notes view – Sorting by Multiple Columns – At the same time • On the fly • By the user • Programmatically 28
- 29. What capabilities doExt JS Grids provide? Better that a notes view – Categories (Grouping ) • On the fly • No design changes • Any column • Dynamic control of the Category • Sorting and Categories work together harmoniously! 29
- 30. What capabilities doExt JS Grids provide? Better that a notes view – Reordering Columns on the fly 30
- 31. What capabilities doExt JS Grids provide? Better that a notes view – Searching by column • Not just by field • Searching by multiple column values • Giving the power to the users 31
- 32. What capabilities doExt JS Grids provide? Better that a notes view – Editing of documents via the view • Editing of row values within the grid • REST CRUD Update 32
- 33. What capabilities doExt JS Grids provide? Better that a notes view – Locking Columns - Like Excel • Fixed columns • Dynamic adding of locked columns • • Sorting still works 33
- 34. What capabilities doExt JS Grids provide? Better that a notes view – Column Totals (more than one) • Totals on any column • On the fly WITH search • Any mathematical computation not a total 34
- 35. What capabilities doExt JS Grids provide? Better that a notes view – HTML formatting of columns • Icons • Grouping of icons • Colors based on values 35
- 36.
- 37. User considerations When istoo many documents? How many documents? – Connection speed • 200 documents • 20 columns • 200K of text • Time taken: 200ms – Data overload reality • Would you give someone a 100,000 line excel sheet to analyze ? 37
- 38. User considerations Options forloading data Loading data – What is a better experience? • Quicker loading • Seeing progress as the data loads – End user experience depends on multiple factors • Network • User expectations • Data size • Browser 38
- 39. User considerations The BufferedRendererobject Released with Ext JS 4.2 BufferedRenderer object – Loads data dynamically – Orders of magnitude less DOM elements created • Significant consideration in XPiNC and IE8 – http://vimeo.com/59611158 39
- 40. User considerations Options forloading data Adding a loading indicator helps users understand something is happening 40
- 41. User considerations The BufferedRendererobject Significantly reduces the number of DOM elements being managed in memory 14522 DOM elements Without BufferedRenderer 41 707 DOM Elements With BufferedRenderer
- 42. User considerations Page refresh That is a lot of data to load and reload – Paging is possible • Not desirable though - Ugly user experience Action the selected documents not the whole grid – 1000 document reloaded = 100K+ – 1 documents reloaded = <5 K – 0 documents reloaded = 0 K ! 42
- 43. User considerations Only reloadthe data – don’t reload the page Grid re-use improves user experience – Change category ? – Show the same grid – load different data • Or – Show the same data and programmatically filter it 31 documents displayed 43 1524 documents displayed
- 44. User considerations Using LocalStorage HTML5 localStorage – Permanent string storage – When used to cache grid data, it can perceptively improve load time 44
- 45. User considerations Using LocalStorage HTML5 localStorage – Limitations – Chrome • 2.5M – Firefox • 5M – Internet Explorer • 10M 45
- 46. User considerations Using LocalStorage Without local storage – 10.5 seconds 11,470 documents 46
- 47. User considerations Using LocalStorage With local storage – significant improvement 1.7 seconds (6 times faster) 47
- 48. User considerations Using LocalStorage But what if something changes? – Just like IBM Notes client – indicate something has changed ! – Check periodically for changes / deletions – Use a different REST service to update individual items in the grid 48
- 49. Questions ? Formore information please check out http://xomino.com/ExtJSConnect14 twitter: @MarkyRoden Please don’t forget to do your evaluations 49
- 50. Acknowledgements and Disclaimers Availability.References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They are provided for informational purposes only, and are neither intended to, nor shall have the effect of being, legal or other guidance or advice to any participant. While efforts were made to verify the completeness and accuracy of the information contained in this presentation, it is provided AS-IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this presentation or any other materials. Nothing contained in this presentation is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and performance characteristics may vary by customer. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results. © Copyright IBM Corporation 2014. All rights reserved. U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp. IBM, the IBM logo, ibm.com, XPages and IBM Notes Domino 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 Ext JS is a registered trademark of Sencha Inc 50
- 51.
- 52. Integration with REST DisplayThe Data JSON data from the service With extra columns…. Each 5 column document is really 11 columns 52
- 53. Integration with REST DisplayThe Data JSON data from the service With reduced header columns…. 6 columns 53
- 54. Integration with REST DisplayThe Data How many documents really? – ~95,500 documents – 20 columns (+6 bonus columns) – 94 seconds to download – 16M data 54
- 55. Integration with REST DisplayThe Data How many documents really? – ~95,500 documents – 5 columns (+6 bonus columns) – 76 seconds to download – 5.7 M data 55
- 56. User considerations Openingand closing a document – User experience is poor when they have to reload the grid and many documents – Multiple solutions to the issue depending on user expectations • New Window • Tabs • Dialogs 56
- 57. User considerations Openingand closing a document – Using a tabbed interface 57
- 58. User considerations Hidingthe Tabbed Bar – The user does not know they are in a tabbed interface 58