connect 2014 - extjs in xpages: modernizing ibm notes views without sacrificing functionality
DESCRIPTION
Presentation give at IBM Connect, Orlando Florida 28th January 2014TRANSCRIPT
![Page 1: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/1.jpg)
© 2014 IBM Corporation
BP203: Ext JS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality
Dr. Mark Roden, PSC Group LLC
![Page 2: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/2.jpg)
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• Blog: http://www.xomino.com• Email: [email protected]• Twitter: @markyroden• Skype: marky.roden
2
www.psclistens.com @pscgroup
![Page 3: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/3.jpg)
3
![Page 4: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/4.jpg)
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
![Page 5: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/5.jpg)
5
What is Ext JS ?
![Page 6: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/6.jpg)
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
![Page 7: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/7.jpg)
What is Ext JS?
Data Gridding
7
![Page 8: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/8.jpg)
What is Ext JS?
Tree Viewing
8
![Page 9: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/9.jpg)
What is Ext JS?
Data Charting
9
![Page 10: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/10.jpg)
What is Ext JS?
Drag and Dropping
10
![Page 11: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/11.jpg)
What is Ext JS?
Fully Functioning JavaScript Framework Library
11
![Page 12: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/12.jpg)
12
What are Ext JS Grids?
![Page 13: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/13.jpg)
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
![Page 14: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/14.jpg)
What are Ext JS Grids?
Traditional notes views on the web
– Functional: 1997 Web experience
14
![Page 15: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/15.jpg)
What are Ext JS Grids?
XPages View controls
– More Functional: 2008 Web Experience
15
![Page 16: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/16.jpg)
What are Ext JS Grids?Highly configurable data display containers
Ext JS Grid controls
– 2014 Web Experience
16
![Page 17: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/17.jpg)
17
Adding Ext JS to an XPages
application
![Page 18: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/18.jpg)
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
![Page 19: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/19.jpg)
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
![Page 20: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/20.jpg)
20
Integration with REST services
![Page 21: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/21.jpg)
Integration with REST
Anatomy of the custom csjs file
Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.ux.grid.FiltersFeature'
]);
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: ['firstname', 'lastname', 'address', 'city', 'state']
});21
AMD Loading of libraries
Field model
![Page 22: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/22.jpg)
Integration with RESTCreate the data store
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
autoDestroy: true,
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
Field Model
![Page 23: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/23.jpg)
Integration with RESTDefine 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, //define column properties
dataIndex: 'firstname',
filterable: true
},more columns]
}); });
23
![Page 24: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/24.jpg)
Integration with RESTDisplay The Data
How many documents really?
– ~95,500 documents
– 43 seconds to download
– 4.5 M data
24
![Page 25: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/25.jpg)
25
What capabilities do Ext JS
Grids provide?
![Page 26: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/26.jpg)
What capabilities do Ext JS Grids provide?Demonstrations
To view the examples see
http://demo.xomino.com/xomino/ExtJS.nsf
26
![Page 27: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/27.jpg)
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
![Page 28: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/28.jpg)
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
![Page 29: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/29.jpg)
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
![Page 30: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/30.jpg)
What capabilities do Ext JS Grids provide?
Better that a notes view
– Reordering Columns on the fly
30
![Page 31: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/31.jpg)
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
![Page 32: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/32.jpg)
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
![Page 33: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/33.jpg)
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
![Page 34: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/34.jpg)
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
![Page 35: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/35.jpg)
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
![Page 36: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/36.jpg)
36
User experience considerations
![Page 37: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/37.jpg)
User considerationsWhen 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
![Page 38: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/38.jpg)
User considerationsOptions 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
![Page 39: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/39.jpg)
User considerationsThe 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
![Page 40: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/40.jpg)
User considerationsOptions for loading data
Adding a loading indicatorhelps users understandsomething is happening
40
![Page 41: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/41.jpg)
User considerationsThe BufferedRenderer object
Significantly reduces the number of DOM elements being managed in memory
41
14522 DOM elements 707 DOM ElementsWithout BufferedRenderer With BufferedRenderer
![Page 42: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/42.jpg)
User considerationsPage 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
![Page 43: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/43.jpg)
User considerationsOnly 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
43
31 documents displayed 1524 documents displayed
![Page 44: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/44.jpg)
User considerationsUsing LocalStorage
HTML5 localStorage– Permanent string storage– When used to cache grid data, it can perceptively improve load time
44
![Page 45: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/45.jpg)
User considerationsUsing LocalStorage
HTML5 localStorage– Limitations
– Chrome• 2.5M
– Firefox• 5M
– Internet Explorer• 10M
45
![Page 46: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/46.jpg)
User considerationsUsing LocalStorage
Without local storage – 10.5 seconds
11,470 documents
46
![Page 47: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/47.jpg)
User considerationsUsing LocalStorage
With local storage – significant improvement
1.7 seconds (6 times faster)
47
![Page 48: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/48.jpg)
User considerationsUsing 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
![Page 49: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/49.jpg)
Questions ?
For more information please check out
http://xomino.com/ExtJSConnect14
twitter: @MarkyRoden
Please don’t forget to do your evaluations
49
![Page 50: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/50.jpg)
50
Acknowledgements and Disclaimers
© 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
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.
![Page 51: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/51.jpg)
51
Extra Slides
![Page 52: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/52.jpg)
Integration with RESTDisplay The Data
JSON data from the service
With extra columns….
Each 5 column document is really 11 columns
52
![Page 53: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/53.jpg)
Integration with RESTDisplay The Data
JSON data from the service
With reduced header columns….
6 columns
53
![Page 54: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/54.jpg)
Integration with RESTDisplay The Data
How many documents really?
– ~95,500 documents
– 20 columns (+6 bonus columns)
– 94 seconds to download
– 16M data
54
![Page 55: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/55.jpg)
Integration with RESTDisplay The Data
How many documents really?
– ~95,500 documents
– 5 columns (+6 bonus columns)
– 76 seconds to download
– 5.7 M data
55
![Page 56: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/56.jpg)
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
![Page 57: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/57.jpg)
User considerations
Opening and closing a document– Using a tabbed interface
57
![Page 58: Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality](https://reader033.vdocuments.us/reader033/viewer/2022061211/5492ed1eb47959962d8b55b8/html5/thumbnails/58.jpg)
User considerations
Hiding the Tabbed Bar– The user does not know they are in a tabbed interface
58