Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality
1. BP203: Ext JS in 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: marky@xomino.com
Twitter: @markyroden
Skype: marky.roden
www.psclistens.com
@pscgroup
4. Agenda
ď§ What is Ext 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
6. What is Ext JS?
ď§ 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
13. What are Ext JS 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 Ext JS Grids?
ď§ Traditional notes views on the web
â Functional: 1997 Web experience
14
15. What are Ext JS Grids?
ď§ XPages View controls
â More Functional: 2008 Web Experience
15
16. What are Ext JS Grids?
Highly configurable data display containers
ď§ Ext JS Grid controls
â 2014 Web Experience
16
18. Adding Ext JS to 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 JS to 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
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
Create the 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
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
24. Integration with REST
Display The Data
ď§ How many documents really?
â ~95,500 documents
â 43 seconds to download
â 4.5 M data
24
26. What capabilities do Ext JS Grids provide?
Demonstrations
ď§ To view the examples see
http://demo.xomino.com/xomino/ExtJS.nsf
26
27. What capabilities do Ext 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 do Ext 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 do Ext 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 do Ext JS Grids provide?
ď§ Better that a notes view
â Reordering Columns on the fly
30
31. What capabilities do Ext 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 do Ext 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 do Ext 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 do Ext 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 do Ext JS Grids provide?
ď§ Better that a notes view
â HTML formatting of columns
⢠Icons
⢠Grouping of icons
⢠Colors based on values
35
37. User considerations
When is too 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 for loading 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 BufferedRenderer object
ď§ 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 for loading data
ď§ Adding a loading indicator
helps users understand
something is happening
40
41. User considerations
The BufferedRenderer object
ď§ 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 reload the 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
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 ?
ď§ For more 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
52. Integration with REST
Display The Data
ď§ JSON data from the service
ď§ With extra columnsâŚ.
ď§ Each 5 column document is really
11 columns
52
53. Integration with REST
Display The Data
ď§ JSON data from the service
ď§ With reduced header columnsâŚ.
ď§ 6 columns
53
54. Integration with REST
Display The Data
ď§ How many documents really?
â ~95,500 documents
â 20 columns
(+6 bonus columns)
â 94 seconds to download
â 16M data
54
55. Integration with REST
Display The 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
ď§ Opening and 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