presenting data effectively in xpages - atlug may 2013

Presenting Data Effectively in XPages

1

ATLUG

Brad BalassaitisSenior Consultant, PSC Group

May 16th, 2013

Brad Balassaitis

• Notes/Domino developer for 17 years, XPages for 3 years• Senior Consultant at PSC Group• XPages Developer • Project Leader

• Contact Information• Blog: http://www.xcellerant.net• Twitter: @Balassaitis• Skype: brad.balassaitis

www.psclistens.com @pscgroup

2

Agenda• Why is this important to me?• XPages Core Controls• View Panel• Repeat Control• Data Table

• Extension Library / 8.5.3 UP1 / R9 Controls• Data View• Dynamic View Panel• Dojo Data Grid• iNotes List View

• Updates in Notes 9 • Third Party• Ext JS

• Resources

3




• Resources

4

Why is this important to me?

• In Notes client applications, views look similar

5


• In Notes client applications, views look similar• In Domino applications, UI is outdated and inflexible

6


• In Notes client applications, views look similar• In Domino applications, UI is outdated and inflexible• Users compare our apps to popular sites• Interface goes a long way toward driving usage• XPages delivers modern options for data display

7




• Resources

8

View Panel

• Simplest way to surface data in XPages• Tabular display; similar to Notes client

9

View Panel - Features

• Simple but clean look and feel• Automatically includes paging• Automatically handles categorization

10

View Panel - Features

• Property to create a link to open document• Property to enable row selection• Style classes and other formatting• Sortable columns• Filtering: search, categoryFilter, keys, startKeys

11

View Panel - Drawbacks

• UI often not considered modern enough• Looks a lot like a Notes client view, but with less

functionality

12

View Panel – Use Cases

• Need to quickly surface data• UI requirements not stringent• Easy embedded views

13

View Panel – Customization

• Computed columns• HTML columns• Editable View Columns (Article in The View)• Hijacking View Columns (NotesIn9 episode 101)

14

View Panel – Enhanced Filtering

15




• Resources

16

Repeat Control

• Creates one instance for each entry• Similar to Data Table, but no default structure

17

Repeat Control - Features

• Very flexible design – no rigid structure• Can display a view or an array of elements• Filtering*: search, categoryFilter, keys, startKeys

*Options available if using a view data source

18

Repeat Control - Drawbacks

• Does not handle categorization• Does not handle column sorting• Manually configure fields• Manually define layout and style• Manually add links to open documents• Manually add paging

19

Repeat Control – Use Cases

• Need flexible layout• Display document collection – not entire view• Combining data from multiple views

20

Repeat Control – Customization

• Custom layout

21




• Resources

22

Data Table

• Creates one instance for each entry• Similar to Repeat, but with some structure

23

Data Table - Features

• Flexible layout• Header row, content row, footer row• Can display a view or an array of elements• Style classes• Pagers• Filtering*: search, categoryFilter, keys, startKeys

*Options available if using a view data source

24

Data Table - Drawbacks

• Does not handle categorization• Does not handle column sorting• Manually configure fields• Manually add links to open documents• Must work within a loose table structure

25

Data Table – Use Cases

• Display data from a relational database• Display document collection – not entire view• Combining data from multiple views• Instead of repeat control when you want…• Repeating content within a tabular structure• Easier UI to work with in Domino Designer• Built-in properties for style classes

26

Data Table – Customization

• Custom layout

27




• Resources

28

Data View

• Modern design• Built around a single summary column• Works in full browser and mobile• Used in TeamRoom template

29

Data View - Features• More modern look than View Panel• Nice styling if using OneUI• Property-driven simple configuration• Flexible summary layout• Built-in link to open document• Collapsible details section• Multi-column layout• Categorization, hierarchy, icons, selection checkbox• Data source options• Pager More Rows control• Pager Save State control• Filtering*: search, categoryFilter, keys, startKeys

30

Data View - Drawbacks

• Display revolves around a single summary value• Manual field binding/column titles• More work to style nicely if not using OneUI

31

Data View and OneUI

• Without OneUI

32

• With OneUI

Data View - Creation

• Drag and drop a Data View control onto a page• Select a summary column• Optionally add extra columns• Optionally define a category column

33

Data View – Creation (con’t)

• Optionally customize the summary section• Optionally add a collapsible details section

34

Data View – Use Cases

• Need more modern look• Need highly flexible UI• Need a collapsible section to display more info• Need categorization• Need response hierarchy• Need custom icon columns• Need multiple column layout

35

Data View – Customization

• Custom summary section

36


• Custom Detail Section -- Repeat Control and Form

37


• Multiple Columns

38


• Pager Save State control• Pager Add Rows control

39




• Resources

40

Dynamic View Panel

• Simplest Extension Library control for data display• Automatically surfaces entire view

41

Dynamic View Panel - Features

• No configuration required• Automatically handles categorization• Automatically handles column sorting • Automatically handles icon columns• Automatically provides link to open document• Built-in column filter property• Style class properties• Handles unread marks• Selection checkboxes• Filtering: search, categoryFilter, keys, startKeys,

property to filter a specified column

42

Dynamic View Panel - Drawbacks

• Layout cannot be modified• No built-in method of defining XPage to open• Documents automatically open in edit mode• Must write a managed bean to modify columns• Sort column property doesn’t seem to work• Misses some sortable columns

43

Dynamic View Panel – Use Cases

• Quickly surface a view with all columns• Need to maintain categorization or icon columns• No layout changes required• Need the ability to dynamically select the view to

surface• Need easy quick filtering ability on a single column

44

Dynamic View Panel – Customization• Compute the data source and provide the ability

select the view dynamically• Write managed bean to modify view columns• Customizer Bean sample available on XSnippets

45




• Resources

46

Dojo Data Grid

• Built on the Dojo DataGrid

47

Dojo Data Grid - Features

• Simple to surface• Infinite scrolling• Column sorting• Column reordering• Row selector• Editable columns built in!• Multi-row layouts• Row styling event• Can display data not from view columns• Row click and double-click events available• Row selection options

48

Dojo Data Grid - Drawbacks

• Takes a little bit of code to stop invalid sort options• Requires a REST service for the data (still easy)• Manually add code to allow for document open

49

Dojo Data Grid - Creation

• Create a REST service for the view data• Add a Dojo Data Grid control to the page• Set the storeComponentId to the REST service• Add Dojo Data Grid Column controls and bind them

50

Dojo Data Grid – Filtering

• Based on the REST service, but works the same• search• categoryFilter• keys• startKeys• Requires refresh of REST service along with view

control to update the data

51

Dojo Data Grid – Use Cases

• Need an alternate option for displaying data• Need infinite scrolling• Need to edit data directly in the view• Need multi-row layout• Need to customize columns in a grid display

52

Dojo Data Grid – Customization

• Compute columns in the REST service• Apply formatting functions to modify column data• Dojo EnhancedGrid Plugins

53


• Full-text search

54


• Field-specific search

55


• Editable Columns – plain text or drop-down list• Single or double click to edit• Requires 1 line of code to save changes

56

Dojo Data Grid – Enhanced Filtering• Can be enabled with a few configuration settings• Works with no coding!

57




• Resources

58

iNotes List View

• Similar to Dynamic View Panel, with grid display• Automatically surfaces entire view

59

iNotes List View - Features

• Grid interface with no configuration required• Infinite scrolling• Handles categorization (doesn’t scroll well)• Sortable column options automatically available• Handles icon columns• Property to alternate row colors• Many built-in client-side events• Filtering: search, categoryFilter, keys, startKeys

60

• Layout cannot be modified• Requires a REST service for the data (still easy)• From iNotes -- not built for XPages, so has no access

to server-side JavaScript events• No control over formatting or alignment of data• Doesn’t scroll well with categorized data

61

iNotes List View - Drawbacks

iNotes List View – Use Cases

• Quickly surface iNotes-like grid with all columns• No need to modify layout• No need for SSJS events

62




• Resources

63

Updates in Notes 9

64

Updates in Notes 9

• iNotes List View – property categories combined

65

Notes 853Notes 9




• Resources

66

Third Party Option - Ext JS

• Grid-based layout• Amazing functionality• Met the needs of the world’s largest XPages app,

developed by PSC

67

Ext JS - Features

• Very nice UI• Sorting• Filtering• Grouping (i.e. Categorization)• Inline editing• Column reordering• Hiding columns• Totals• Customizable row content 68

Ext JS - Drawbacks

• Complexity, complexity, complexity• Not built into XPages, so no features are built into

Domino Designer• Much more coding required to surface and

customize• Additional resources to load• Cost

69

Ext JS – Sorting / Column Display

• Ascending and descending sort options• Columns must have those options in Notes view

• Define columns that can be hidden

70

Ext JS – Filtering

• Powerful, but manually coded for remote filtering• Filtering of the visible rows is already available

• Can apply filters to multiple fields simultaneously

71

Ext JS – Use Cases

• Need more functionality than Dojo Grid provides• Time and skills to implement and customize

72




• Resources

73

Resources

• Mastering XPages• XPages Extension Library• NotesIn9.com• The View Journal (eview.com)• PlanetLotus.org• Xcellerant.net

Questions?

presenting data effectively in xpages - atlug may 2013

Technology