Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality

© 2014 IBM Corporation

BP203: Ext JS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality

Dr. Mark Roden, PSC Group LLC

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

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 ?

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

What is Ext JS?

Data Gridding

7

What is Ext JS?

Tree Viewing

8

What is Ext JS?

Data Charting

9

What is Ext JS?

Drag and Dropping

10

What is Ext JS?

Fully Functioning JavaScript Framework Library

11

12



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




Traditional notes views on the web

– Functional: 1997 Web experience

14


XPages View controls

– More Functional: 2008 Web Experience

15

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


Download the library from sencha.com

– 45M (you don’t need all that)

– Take the resources and src folders

– Add them to WebContent

18


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

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

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

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

Integration with RESTDisplay 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?

What capabilities do Ext JS Grids provide?Demonstrations

To view the examples see

http://demo.xomino.com/xomino/ExtJS.nsf

26


Like a notes view– Sorting Columns– Categories – Searches

• By Field• By Date

– Column Totals– Selecting single / multiple

documents• Taking actions upon them

27


Better that a notes view

– Sorting by Multiple Columns

– At the same time• On the fly

• By the user

• Programmatically

28



– Categories (Grouping )• On the fly

• No design changes

• Any column

• Dynamic control of the Category

• Sorting and Categories work together harmoniously!

29



– Reordering Columns on the fly

30



– Searching by column

• Not just by field

• Searching by multiple column values

• Giving the power to the users

31



– Editing of documents via the view

• Editing of row values within the grid

• REST CRUD Update

32



– Locking Columns - Like Excel

• Fixed columns

• Dynamic adding of locked columns

• • Sorting still works

33



– Column Totals (more than one)• Totals on any column• On the fly WITH search• Any mathematical computation

not a total

34



– HTML formatting of columns

• Icons

• Grouping of icons

• Colors based on values

35

36

User experience considerations

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

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

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

http://vimeo.com/59611158

http://vimeo.com/59611158

User considerationsOptions for loading data

Adding a loading indicatorhelps users understandsomething is happening

40

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

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

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

User considerationsUsing LocalStorage

HTML5 localStorage– Permanent string storage– When used to cache grid data, it can perceptively improve load time

44


HTML5 localStorage– Limitations

– Chrome• 2.5M

– Firefox• 5M

– Internet Explorer• 10M

45


Without local storage – 10.5 seconds

11,470 documents

46


With local storage – significant improvement

1.7 seconds (6 times faster)

47


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

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

© 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.

http://www.ibm.com/legal/copytrade.shtml

51

Extra Slides


JSON data from the service

With extra columns….

Each 5 column document is really 11 columns

52


JSON data from the service

With reduced header columns….

6 columns

53




– 20 columns (+6 bonus columns)


– 16M data

54




– 5 columns (+6 bonus columns)


– 5.7 M data

55

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

User considerations

Opening and closing a document– Using a tabbed interface

57

User considerations

Hiding the Tabbed Bar– The user does not know they are in a tabbed interface

58

Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality

Technology

Transcript of Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality