Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Presenting Data Effectively in XPages
Ähnlich wie Presenting Data Effectively in XPages (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Presenting Data Effectively in XPages
- 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?
Hinweis der Redaktion
- (Gauge audience experience with XPages development)Beneficial also for non-developers – anyone who has input into application
- Views are the primary way to display dataNotesclient – only differences were colors, categorization, totals, icons. Structure was pretty much locked inUsers were fine with it, because that’s just what it was
- Domino – default view was awesome in 1996, but cannot stand up to current design patternsYou *can* customize the UI, but it often required hacktastic effort
- Users compare our apps to popular sites and Notes/Domino apps generally are not on par with themRegardless of how great the back-end coding is, the interface has a lot to do with how a user feels about an application, which can affect adoption and usageIn this session, we’ll take a look at all of the Xpages controls that are designed for data display (and a third party option), so you can learn the features of each one and make the best decision for your applications.**I’ll show the same set of data, displayed with all of the different controls**This is not a ‘how to’ session, but more of an introduction to what’s possible.You need to understand what the options are so you can make the best decision for your applications.
- Core controls are available with every release of XPages, since the beginning
- Gets a bad rap, but it has a lot of features and opportunities to customize
- The underlying view must be categorized – this sample is built on a view categorized by state
- Many other controls don’t provide categorization and simple link enablementrowClasses– define one or more style classes to alternate rows Other formatting – cell spacing, cell padding, inline font/style settings, options for defining style classes on other components (view body, pager)Columns are sortable if they’re set up to be sortable in the underlying viewSearch – FT SearchcategoryFilter – like single category viewkeys -like getAllDocumentsByKey()startKeys – starts at the specified doc (not filtered)
- In the client, users are used to search, type and jump to a row, infinite scrolling, built-in advanced searching
- Embedded views are easy to create with category filters, similar to the Notes client
- You’re not limited to a one-to-one mapping of plain text in columns like the underlying Notes client viewColumn computations include looking up data from other documents or even other databases.***Major Xpages Enhancement***
- Provides searching functionality more like what’s available in the Notes client
- Fabulous new control – completely unlike anything we had before XPages
- Entry can be a view or a collection of documents or even an array of any kind of dataIt has many uses beyond displaying data from a view, but that’s what we’re focusing on hereNo more building forms with 20 or 50 or 100 sets of fields
- Design can be multiple rowsGenerally created in a tabular structure, but does not need to be
- Most of these things are not complicated – just more effort than most other controls
- You can combine data from multiple views with several controls, but it’s probably easiest in a Repeat because of the layout and collection flexibility that it provides
- Design can be multiple rowsGenerally created in a tabular structure, but does not need to be
- Similar to repeat control, but it does have style classes and paging more readily availableMust add content only in the content row of the table. BUT – you can add a container and lay it out however you want.
- You can combine data from multiple views with several controls, but it’s probably easiest in a Repeat and Data Table because of the layout and collection flexibility that it providesNote: Data table automatically takes up 100% of screen width, while repeat lays out according to content
- Looks very much like the repeat control multi-line layout
- Works well for any data that can be easily identified by a single piece of information or concatenated pieces of information.Designed with summary column to be flexible enough to use for mobile apps as well.Note: This image is not the same data as the others, but we’ll show that shortly. (This had extra features I wanted to show.)
- It’s designed to work with OneUI. It has nice styling built-in if you’re using a OneUI theme
- Here, we’ve customized the summary section to always show 2 lines.You can expand to see more details – very useful for working with more data, but not cluttering the screen.
- Modern look – very different than the way we’re used to seeing data in Notes views (one line per document)
- To pick up link UI styles from OneUI, write out the link within an <h4> tag: <h4><a href=“…”></a></h4>
- This displays related stock price documents and an embedded form to add a stock price and display it immediately in the repeat control.Good example of how you can customize to add great functionality, but not clutter the screen.
- Property setting to enable multiple columnsCan even expand and collapse details when using multiple columns
- Pager Add Rows – much more modern way of working through data than paging.(Also designed for mobile)
- Just add the control to the page and select the source viewFirst column is automatically a linkFiltering properties same as the others, but with an easier method of filtering based on a columnSet the ‘sort column’ and then compute a filter value to execute on it
- This sounds awesome – BUT – you have no control over the layout.Must set a form property to define the XPage used to display the form: [Beanie] > On Web Access – Display XPage insteadModifying columns is nontrivial. (Paul Calhoun covered it in a NotesIn9 episode)Didn’t pick up the descending-only sort of my view’s State column
- You can set the source view name to be dynamic. You could use url parameters and this one control to surface all Notes client views with very little effort.Paul Calhoun has a NotesIn9 on this
- Automatically tries to allow sorting all columns both directions – actually takes work to stop it.
- Same options as the View Panel, if the data source is a view
- Many client’s like the “Excel-like” look and feel
- Logic to build is exactly the same as in any other control
- Same options as the View Panel, if the data source is a view
- [Creation]Create a viewJsonService REST service for view dataDrag and drop an iNotes List View onto a pageSet the storeComponentId property to the REST serviceSet hideColumns to trueAll columns display automatically – even hidden columns. The hideColumns property will respect hidden column settings.
- Client-side events: onCellClick, onCellDblClick, onContextMenu, onDeleteEntry, onNewEntry, onOpenEntry, onSelectEntry, onSortChanged
- Data – Zip code is right-aligned and almost unreadableIt’s the same balancing act as the Dynamic View Panel – it does a lot of work for you, but you can’t modify it
- We’ve gone through all of the controls available. I built the presentation demos in 8.5.3. UP1, so I wanted to look through Notes 9, control by control and property by property to see what has changed.
- This is not a mistakeInteresting to note that there is not a single difference in the properties available in any of these data display controls from version 8.5.3 UP1 to Notes 9.The only differences I can see is that the font has changed in DDE and the category twisties disappear when not highlighted (and these things are DDE-related – not specific to the view controls.)Good news, then, is that there’s no learning curve to move from 8.5.3 to R9
- This was literally the only difference I could find when comparing all of the view control properties.The properties are event exactly the same – they just got combined from two categories into one.
- Developed by Sencha
- Filtering
- The XPages books cover the basics and some customization of all of these controls (except Ext JS).I have delivered NotesIn9 episodes on the View Panel and Data View.I have written an article on editable view columns in the View Panel in The View journal.I have blogged extensively on the View Panel and Dojo Data Grid.
- Most important thing is that you know what the options are, so you can make the best choices for your applications