Presenting Data Effectively in XPages - ATLUG May 2013
-
Upload
balassaitis -
Category
Technology
-
view
2.173 -
download
0
description
Transcript of 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
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
4
Why is this important to me?
• In Notes client applications, views look similar
5
Why is this important to me?
• In Notes client applications, views look similar• In Domino applications, UI is outdated and inflexible
6
Why is this important to me?
• 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
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
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
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
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
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
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
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
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
Data View – Customization
• Custom Detail Section -- Repeat Control and Form
37
Data View – Customization
• Multiple Columns
38
Data View – Customization
• Pager Save State control• Pager Add Rows control
39
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
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
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
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
Dojo Data Grid – Customization
• Full-text search
54
Dojo Data Grid – Customization
• Field-specific search
55
Dojo Data Grid – Customization
• 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
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
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
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
63
Updates in Notes 9
64
Updates in Notes 9
• iNotes List View – property categories combined
65
Notes 853Notes 9
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
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
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
73
Resources
• Mastering XPages• XPages Extension Library• NotesIn9.com• The View Journal (eview.com)• PlanetLotus.org• Xcellerant.net
Questions?