Presenting Data Effectively in XPages
1
ATLUG
Brad Balassaitis
SeniorConsultant,PSCGroup
May16th,2013
Brad Balassaitis
• Notes/Domino developer for 17 years, XPages for 3 years
• Senior Consultant at PSC Group
• XPages Devel...
Agenda
• Why is this important to me?
• XPages Core Controls
• View Panel
• Repeat Control
• Data Table
• Extension Librar...
Agenda
• Why is this important to me?
• XPages Core Controls
• View Panel
• Repeat Control
• Data Table
• Extension Librar...
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 a...
Why is this important to me?
• In Notes client applications, views look similar
• In Domino applications, UI is outdated a...
Agenda
• Why is this important to me?
• XPages Core Controls
• View Panel
• Repeat Control
• Data Table
• Extension Librar...
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 categorizat...
View Panel - Features
• Property to create a link to open document
• Property to enable row selection
• Style classes and ...
View Panel - Drawbacks
• UI often not considered modern enough
• Looks a lot like a Notes client view, but with less
funct...
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 Vie...
View Panel – Enhanced Filtering
15
Agenda
• Why is this important to me?
• XPages Core Controls
• View Panel
• Repeat Control
• Data Table
• Extension Librar...
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
• Filte...
Repeat Control - Drawbacks
• Does not handle categorization
• Does not handle column sorting
• Manually configure fields
•...
Repeat Control – Use Cases
• Need flexible layout
• Display document collection – not entire view
• Combining data from mu...
Repeat Control – Customization
• Custom layout
21
Agenda
• Why is this important to me?
• XPages Core Controls
• View Panel
• Repeat Control
• Data Table
• Extension Librar...
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...
Data Table - Drawbacks
• Does not handle categorization
• Does not handle column sorting
• Manually configure fields
• Man...
Data Table – Use Cases
• Display data from a relational database
• Display document collection – not entire view
• Combini...
Data Table – Customization
• Custom layout
27
Agenda
• Why is this important to me?
• XPages Core Controls
• View Panel
• Repeat Control
• Data Table
• Extension Librar...
Data View
• Modern design
• Built around a single summary column
• Works in full browser and mobile
• Used in TeamRoom tem...
Data View - Features
• More modern look than View Panel
• Nice styling if using OneUI
• Property-driven simple configurati...
Data View - Drawbacks
• Display revolves around a single summary value
• Manual field binding/column titles
• More work to...
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 colu...
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
...
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 Librar...
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 c...
Dynamic View Panel - Drawbacks
• Layout cannot be modified
• No built-in method of defining XPage to open
• Documents auto...
Dynamic View Panel – Use Cases
• Quickly surface a view with all columns
• Need to maintain categorization or icon columns...
Dynamic View Panel –
Customization
• Compute the data source and provide the ability
select the view dynamically
• Write m...
Agenda
• Why is this important to me?
• XPages Core Controls
• View Panel
• Repeat Control
• Data Table
• Extension Librar...
Dojo Data Grid
• Built on the Dojo DataGrid
47
Dojo Data Grid - Features
• Simple to surface
• Infinite scrolling
• Column sorting
• Column reordering
• Row selector
• E...
Dojo Data Grid - Drawbacks
• Takes a little bit of code to stop invalid sort options
• Requires a REST service for the dat...
Dojo Data Grid - Creation
• Create a REST service for the view data
• Add a Dojo Data Grid control to the page
• Set the s...
Dojo Data Grid – Filtering
• Based on the REST service, but works the same
• search
• categoryFilter
• keys
• startKeys
• ...
Dojo Data Grid – Use Cases
• Need an alternate option for displaying data
• Need infinite scrolling
• Need to edit data di...
Dojo Data Grid – Customization
• Compute columns in the REST service
• Apply formatting functions to modify column data
• ...
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
• Requir...
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 Librar...
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 ...
• Layout cannot be modified
• Requires a REST service for the data (still easy)
• From iNotes -- not built for XPages, so ...
iNotes List View – Use Cases
• Quickly surface iNotes-like grid with all columns
• No need to modify layout
• No need for ...
Agenda
• Why is this important to me?
• XPages Core Controls
• View Panel
• Repeat Control
• Data Table
• Extension Librar...
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 Librar...
Third Party Option - Ext JS
• Grid-based layout
• Amazing functionality
• Met the needs of the world’s largest XPages app,...
Ext JS - Features
• Very nice UI
• Sorting
• Filtering
• Grouping (i.e. Categorization)
• Inline editing
• Column reorderi...
Ext JS - Drawbacks
• Complexity, complexity, complexity
• Not built into XPages, so no features are built into
Domino Desi...
Ext JS – Sorting / Column Display
• Ascending and descending sort options
• Columns must have those options in Notes view
...
Ext JS – Filtering
• Powerful, but manually coded for remote filtering
• Filtering of the visible rows is already availabl...
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 Librar...
Resources
• Mastering XPages
• XPages Extension Library
• NotesIn9.com
• The View Journal (eview.com)
• PlanetLotus.org
• ...
Questions?
of 75

Presenting Data Effectively in XPages - ATLUG May 2013

A survey of the features and drawbacks of all XPages data display controls in 8.5.3 with Upgrade Pack 1.
Published on: Mar 4, 2016
Published in: Technology      
Source: www.slideshare.net


Transcripts - Presenting Data Effectively in XPages - ATLUG May 2013

  • 1. Presenting Data Effectively in XPages 1 ATLUG Brad Balassaitis SeniorConsultant,PSCGroup May16th,2013
  • 2. 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
  • 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 3
  • 4. 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
  • 5. Why is this important to me? • In Notes client applications, views look similar 5
  • 6. Why is this important to me? • In Notes client applications, views look similar • In Domino applications, UI is outdated and inflexible 6
  • 7. 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
  • 8. 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
  • 9. View Panel • Simplest way to surface data in XPages • Tabular display; similar to Notes client 9
  • 10. View Panel - Features • Simple but clean look and feel • Automatically includes paging • Automatically handles categorization 10
  • 11. 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
  • 12. View Panel - Drawbacks • UI often not considered modern enough • Looks a lot like a Notes client view, but with less functionality 12
  • 13. View Panel – Use Cases • Need to quickly surface data • UI requirements not stringent • Easy embedded views 13
  • 14. View Panel – Customization • Computed columns • HTML columns • Editable View Columns (Article in The View) • Hijacking View Columns (NotesIn9 episode 101) 14
  • 15. View Panel – Enhanced Filtering 15
  • 16. 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
  • 17. Repeat Control • Creates one instance for each entry • Similar to Data Table, but no default structure 17
  • 18. 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
  • 19. 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
  • 20. Repeat Control – Use Cases • Need flexible layout • Display document collection – not entire view • Combining data from multiple views 20
  • 21. Repeat Control – Customization • Custom layout 21
  • 22. 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
  • 23. Data Table • Creates one instance for each entry • Similar to Repeat, but with some structure 23
  • 24. 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
  • 25. 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
  • 26. 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
  • 27. Data Table – Customization • Custom layout 27
  • 28. 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
  • 29. Data View • Modern design • Built around a single summary column • Works in full browser and mobile • Used in TeamRoom template 29
  • 30. 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
  • 31. 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
  • 32. Data View and OneUI • Without OneUI 32 • With OneUI
  • 33. 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
  • 34. Data View – Creation (con’t) • Optionally customize the summary section • Optionally add a collapsible details section 34
  • 35. 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
  • 36. Data View – Customization • Custom summary section 36
  • 37. Data View – Customization • Custom Detail Section -- Repeat Control and Form 37
  • 38. Data View – Customization • Multiple Columns 38
  • 39. Data View – Customization • Pager Save State control • Pager Add Rows control 39
  • 40. 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
  • 41. Dynamic View Panel • Simplest Extension Library control for data display • Automatically surfaces entire view 41
  • 42. 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
  • 43. 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
  • 44. 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
  • 45. 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
  • 46. 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
  • 47. Dojo Data Grid • Built on the Dojo DataGrid 47
  • 48. 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
  • 49. 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
  • 50. 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
  • 51. 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
  • 52. 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
  • 53. Dojo Data Grid – Customization • Compute columns in the REST service • Apply formatting functions to modify column data • Dojo EnhancedGrid Plugins 53
  • 54. Dojo Data Grid – Customization • Full-text search 54
  • 55. Dojo Data Grid – Customization • Field-specific search 55
  • 56. 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
  • 57. Dojo Data Grid – Enhanced Filtering • Can be enabled with a few configuration settings • Works with no coding! 57
  • 58. 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
  • 59. iNotes List View • Similar to Dynamic View Panel, with grid display • Automatically surfaces entire view 59
  • 60. 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
  • 61. • 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
  • 62. iNotes List View – Use Cases • Quickly surface iNotes-like grid with all columns • No need to modify layout • No need for SSJS events 62
  • 63. 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
  • 64. Updates in Notes 9 64
  • 65. Updates in Notes 9 • iNotes List View – property categories combined 65 Notes 853Notes 9
  • 66. 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
  • 67. Third Party Option - Ext JS • Grid-based layout • Amazing functionality • Met the needs of the world’s largest XPages app, developed by PSC 67
  • 68. Ext JS - Features • Very nice UI • Sorting • Filtering • Grouping (i.e. Categorization) • Inline editing • Column reordering • Hiding columns • Totals • Customizable row content 68
  • 69. 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
  • 70. 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
  • 71. 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
  • 72. Ext JS – Use Cases • Need more functionality than Dojo Grid provides • Time and skills to implement and customize 72
  • 73. 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
  • 74. Resources • Mastering XPages • XPages Extension Library • NotesIn9.com • The View Journal (eview.com) • PlanetLotus.org • Xcellerant.net
  • 75. Questions?

Related Documents