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.

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

3. 3

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

5. What is Ext JS ?
5

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

7. What is Ext JS?
 Data Gridding
7

8. What is Ext JS?
 Tree Viewing
8

9. What is Ext JS?
 Data Charting
9

10. What is Ext JS?
 Drag and Dropping
10

11. What is Ext JS?
 Fully Functioning JavaScript Framework Library
11

12. What are Ext JS Grids?
12

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

17. Adding Ext JS to an XPages
application
17

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

20. Integration with REST services
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
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

25. What capabilities do Ext JS
Grids provide?
25

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

36. User experience considerations
36

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

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 ?
 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

51. Extra Slides
51

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

57. User considerations
 Opening and closing a document
– Using a tabbed interface
57

58. User considerations
 Hiding the Tabbed Bar
– The user does not know they are in a tabbed interface
58