Dojo Grids in XPages

4,144 views

Published on

Are you tired of using view panels to display data in XPages? This webinar will show how you can provide a new look and feel and rich functionality with several variations of Dojo data grids. You'll learn about the XPages Dojo Data Grid control and its key features, including infinite scrolling, sorting, and editable cells. Then you'll see how to transform the grid into a Dojo EnhancedGrid and take advantage of enhanced plugins to provide even more functionality, such as multi-rule filtering and context menus. Finally, you'll get a glimpse of how to bypass the grid control in order to create a categorized Dojo TreeGrid.

You'll come away with a myriad of options for providing appealing, interactive, highly functional data grids.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,144
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
111
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dojo Grids in XPages

  1. 1. Dojo grids in XPages Tweet about this event: #xpages and mention us: @teamstudio @TLCCLTD @Balassaitis June 27, 2013
  2. 2. @teamstudio teamstudio.com @TLCCLTD @Balassaitis Taline Badrikian Marketing Director
  3. 3. Who we are • Our background is in creating tools for collaborative computing in mid-size and large enterprises, primarily for Lotus Notes • Easy-to-use tools for developers and administrators • 2300+ active customers, 47 countries • Offices in US, UK and Japan • Entered mobile space in 2010 with Unplugged – easy mobilization of Notes apps to Blackberry, Android and iOS
  4. 4. Teamstudio Unplugged • Your Mobile Domino Server – take your Notes apps with you! • End users access Notes applications from mobile devices whether online or offline • Leverages existing skills and technology – XPages – Replication model you already know • IBM Collaboration Solutions Award Winner 2013
  5. 5. Teamstudio Continuity • Mobile BCM application for smartphones and tablets – iOS, Android and BB • Offline access to all your BCM and Disaster Recovery data • Store plans, contacts, call trees, and more • Client available for download from app stores
  6. 6. Teamstudio • Next webinar July 24th – Making Mobile Application Development easy • Visit us at MWLUG – August 21-23 in Indianapolis • Visit us at ICON UK – September 2-3 in Brighton, UK
  7. 7. © 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC Howard Greenberg TLCC @TLCCLtd Dojo Data Grids in XPages Your Hosts Today: 1 #XPages Paul Della-Nebbia TLCC @paulDN
  8. 8. © 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC 2 Upcoming and Recorded Webinars Next Webinar on July 24th Making Mobile App Development Easy Matt White and Rich Sharpe www.tlcc.com/xpages-webinar Same web page has a link to previous webinars
  9. 9. © 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC • Seven XPages Courses! ‒ FREE !! Introduction to XPages Development ‒ JavaScript for XPages Development (8.5 and 9) ‒ Developing XPages Using Domino Designer 8.5 / XPages Development 1 for 9 ‒ Rapid XPages Development using Application Layout and Dojo UI Controls (8.5 and 9) ‒ XPages Development 2 for Notes and Domino 8.5 ‒ Mobile XPages for Domino 8.5 and 9 ‒ Java 1 for XPages Developers • Self Paced Training – Learn anywhere! – An Instructor is a click away • Instructor Led (Private) • TLCC Mentoring Services 3 TLCC XPages Offerings Spring Sale Ends Tomorrow!!!!
  10. 10. © 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC ICON UK (used to be UK LUG) in Brighton, UK September 1st and 2nd … FREE!! www.iconuk.org Both events feature a TLCC TackItOn Rapid XPages Development using Application Layout and Dojo UI Controls One full day with TLCC’s expert instructors TLCC’s Rapid XPages Development course A year of continued instructor support All for only $499 www.tlcc.com/iconuktackiton or www.tlcc.com/mwlug MWLug in Indianapolis August 21st to 23rd www.mwlug.com 4 Upcoming Events
  11. 11. © 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC Asking Questions 5 Q & A at the end! Type in your questions as they come up
  12. 12. © 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC Your Presenter Today: 6 #XPages Brad Balassaitis @Balassaitis http://xcellerant.net/
  13. 13. Dojo Grids in XPages 1 Brad Balassaitis SeniorConsultant,PSCGroup June27th,2013
  14. 14. Brad Balassaitis • Notes/Domino developer for 17 years, XPages for 3 years • Senior Consultant at PSC Group • XPages Developer • Project Lead • Contact Information • Blog: http://xcellerant.net • Twitter: @Balassaitis • Skype: brad.balassaitis www.psclistens.com @pscgroup 2
  15. 15. Agenda • Dojo Data Grid Control • Creation and Default Features • Dojo Data Grid – Additional Features • Sorting, Opening Docs, Searching, Editing • Dojo EnhancedGrid • Conversion • Plugins • Dojo TreeGrid • Categorization • Counts and Totals 3
  16. 16. Dojo Data Grid Control • Availability • Extension Library • 8.5.3 Upgrade Pack 1 • Notes 9 • Creates a Dojo DataGrid 4
  17. 17. Why Use the Dojo Data Grid? • It’s not a view panel • Feature-rich • Adjustable columns, sorting, editing… • Dojo is already on the Domino server • Enhanced plugins available 5
  18. 18. Creating a Dojo Data Grid 1. Create REST Service to provide data 2. Add the Dojo Data Grid control and bind to the REST service 3. Add Dojo Data Grid Columns 6
  19. 19. REST Service • REST is a standard for client-server data exchange on the web • Common method for providing data to a grid • REST Service Control (ExtLib, 8.5.3 UP1, R9) • Data Access > REST Service 7
  20. 20. REST Service - Creation 1. Add REST Service control to the page 2. Select the service type • basics > service > + > xe:viewJsonService 3. Set the contentType to application/json • basics > service > contentType 4. Select the view • basics > service > viewName 5. Set defaultColumns to true • basics > service > defaultColumns 8
  21. 21. REST Service - Customization • Compute columns • System columns • Roll your own 9
  22. 22. REST Service – Verification • Set pathInfo • All Properties > basics > pathInfo • Test it • Server.com/dbname.nsf/XPage.xsp/pathInfoName 10
  23. 23. Creating a Dojo Data Grid 1. Create REST Service to provide data 2. Add the Dojo Data Grid control and bind to the REST service 3. Add Dojo Data Grid Columns 11
  24. 24. Default Grid Features • Infinite scrolling • Adjustable column widths • Row highlighting • Extended selection mode • Sortable columns • Multiple row entries 12
  25. 25. Additional Grid Properties • rowSelector • autoHeight • rowsPerPage • escapeHTMLInData • loadingMessage • errorMessage • dir 13
  26. 26. Dojo Attributes • More grid features are available, but not via properties • e.g. Column Reordering, Grid Width • Dojo > Dojo attributes: or • All Properties > dojo > dojo attributes 14
  27. 27. Column Reordering • Allows user to rearrange columns • Set via dojo attribute 15
  28. 28. Column Reordering • Alternate Method of Setting Attribute 16
  29. 29. Grid Width • By default, takes up width of container • autoWidth attribute sizes to required width • Set via dojo attribute 17
  30. 30. Grid Column Properties • label • width • hidden • editable • formatter • Example: format to all upper case function allUpper(value) { return value.toUpperCase(); } 18
  31. 31. Sorting • Automatically attempts to provide ascending and descending sorting on all columns • Each sort only works if enabled in underlying view 19
  32. 32. Preventing Sort Options • Attach a function to the canSort property of grid • Receives column index number • 1-based index • Ascending sort is positive number, descending is negative • Returns true or false • Run code onClientLoad of page to attach function • Example: Allow even numbered columns to sort dijit.byId('#{id:djxDataGrid1}').canSort = function(col){ if (col % 2 == 0) { return true; } else { return false; } }; 20
  33. 33. Opening Documents • Link not built-in • Row click events: onRowClick, onRowDblClick • Client JavaScript • Events receive an argument with many properties • Code varies based on REST service type 21
  34. 34. REST Service Output viewJsonService viewItemFileService 22
  35. 35. Open Doc - viewJsonService var grid = arguments[0].grid; var index = arguments[0].rowIndex; var item = grid.getItem(index); var unid = item[‘@unid’]; var url = ‘MyPageName.xsp?documentId=‘ + unid + ‘&action=openDocument’; window.document.location.href = url; 23
  36. 36. Open Doc - viewItemFileService var index = arguments[0].rowIndex; var unid = REST_SERVICE_NAME._items[index].attributes[‘@unid’]; var url = ‘MyPageName.xsp?documentId=’ + unid + ‘&action=openDocument’; window.document.location.href = url; 24
  37. 37. Search – Full Text • Same steps as other display controls • Steps: 1. Create search field and bind to scope var 2. Set REST service’s search property to scope var 3. Add button that triggers partial refresh on grid and REST service • Cannot sort results • DB must be full-text indexed 25
  38. 38. Editable Columns • Set column’s editable property to true • Double-click cell to change to edit mode • Save the changes – one line of client JavaScript • REST_SERVICE_ID.save() • Use the jsId property if defined (else, id) • **Does not work without grid autoHeight set • Undo changes – one line of JavaScript (in theory) • REST_SERVICE_ID.revert() • Partial refresh on grid has same effect 26
  39. 39. Editable Columns – Field Types • cellType property • Cell (default) – plain text • Select – drop-down list (compute options w/ SSJS) • Bool – checkbox • AlwaysEdit – not a field type • RowIndex – nothing to do with editing! 27
  40. 40. Editable Columns – Field Types • Edit date field with date picker • 1 – Include module: dojox.grid.cells.DateTextBox • 2 – Set cell type: dojox.grid.cells.DateTextBox • Only works in Notes 9 28
  41. 41. Editable Columns • REST service’s save() function can accept callbacks • Useful for displaying an error if save fails var saveCallbacks = {onError: function() {alert('There was an error saving your changes.');}}; restServiceID.save(saveCallbacks); • Editable columns work with viewItemFileService, but require a Web Site document to work with viewJsonService • Can only edit columns mapped to a single field • Grid has singleClickEdit property • Highlighting changes 29
  42. 42. HTML Columns • Create custom column in REST service (or use existing view column) with HTML content • Add Grid Column to display HTML content column • Set Grid property escapeHTMLInData = false • Not a good idea – vulnerable to XSS 30
  43. 43. Icon Columns • Doesn’t work as pass-thru HTML • Requires column formatter function (client JS) • Formatter can conditionally return <IMG> tag • Does not require escapeHTMLInData property • Much more secure for all passthru HTML 31
  44. 44. Dojo EnhancedGrid • Dojo module that extends DataGrid • Already available on the server • Provides enhanced features via plugins • Check for available features based on Domino/Dojo version • Domino 8.5.3 – Dojo 1.6 • Domino 9 – Dojo 1.8 • http://dojotoolkit.org/reference- guide/1.6/dojox/grid/EnhancedGrid.html 32
  45. 45. Converting to EnhancedGrid • Dojo Data Grid control creates a Dojo DataGrid • You can modify to create a Dojo EnhancedGrid 1. Load the EnhancedGrid module 2. Set grid Dojo type 3. Load required style sheets 33
  46. 46. Converting to EnhancedGrid • 1 - Load the EnhancedGrid module on the page • Resources > Add > Dojo Module • dojox.grid.EnhancedGrid 34
  47. 47. Converting to EnhancedGrid • 2 - Set grid Dojo type to dojox.grid.EnhancedGrid • Properties > Dojo > Dojo type 35
  48. 48. Converting to EnhancedGrid • 3 - Load required style sheets • Load relative to the Domino server path <xp:styleSheet href="/.ibmxspres/dojoroot/dojox/grid/resources/Grid.css"> </xp:styleSheet> <xp:styleSheet href="/.ibmxspres/dojoroot/dojox/grid/resources/EnhancedGrid.css"> </xp:styleSheet> 36
  49. 49. Verify EnhancedGrid 37
  50. 50. EnhancedGrid Plugin - DnD • Provides ability to drag and drop columns, rows, and cells • Configuration object defines options • Add a row selector to drag and drop rows • Usage 1. Select content to drag 2. Release mouse button 3. Click on the data to move it • IMPORTANT: When cells are moved, changes are automatically saved 38
  51. 51. EnhancedGrid Plugin - DnD 1. Load the DnD plugin • Properties > Resources > Add > Dojo Module • dojox.grid.enhanced.plugins.DnD 39
  52. 52. EnhancedGrid Plugin - DnD 2. Add plugin to grid as an attribute • Dojo > Add • Name: plugins • Value: {dnd: {dndConfig:{} } } • All selection types enabled by default 40
  53. 53. EnhancedGrid Plugin - Filter • Adds a filter bar • Up to 3 Filtering rules • Match all rules or any rule • Select column to filter • Select matching condition (is, contains, starts with…) • No coding required!! • Results are sortable 41
  54. 54. EnhancedGrid Plugin - Filter 1. Load the Filter plugin • Properties > Resources > Add > Dojo Module • dojox.grid.enhanced.plugins.Filter 42
  55. 55. EnhancedGrid Plugin - Filter 2. Add plugin to grid as an attribute • Dojo > Add • Name: plugins • Value: {filter: true} 43
  56. 56. EnhancedGrid Plugin - Filter 3. Add a stylesheet <xp:styleSheet href="/.ibmxspres/dojoroot/dojox/grid/enhanced/resources/claro/EnhancedGrid.css"> </xp:styleSheet> 44
  57. 57. EnhancedGrid – More Plugins • Print • Provides ability to preview or print grid contents • Print/Preview All, Selected, Custom • Exporter • Provides grid data for export – you handle the rest • Export All, Selected, Custom • Menu • Context menus for columns, rows, cells, selected • Build with dijit menus and dijit menu items 45
  58. 58. Dojo TreeGrid • Provides multi-level categorization • Can provide column totals and counts • Extends Dojo DataGrid • Cannot use EnhancedGrid plugins • Poor documentation • Apparently cannot use Dojo Data Grid control 46
  59. 59. TreeGrid - Implementation • Programmatic -- NOT the Dojo Data Grid Control 1. Include required dojo modules and stylesheets 2. Set XPage to parse dojo on load 3. Define a <div> to render the grid and size it 4. Execute code onClientLoad to configure and generate the grid 5. Provide data for the grid (XAgent) • Complicated format ... { id: 'AS', name:'Asia', type:'continent', children:[{_reference:'CN'}, {_reference:'IN'}] }, { id: 'CN', name:'China', type:'country' }, { id: 'IN', name:'India', type:'country' }, ... 47
  60. 60. TreeGrid – Totals and Counts • Inline when collapsed, below when expanded • Requires a different (but simpler) JSON model {id:'AK', type: 'state', state:'AK', numPeople: 3, childItems:[ {id:'B3093953178C98E905257838007ABC48', firstname:'Bella', lastname: 'Martin', valueToAdd: 2}, {id:'7FDB9CCDE7D6923E05257838007ABC1E', firstname:'Brian', lastname: 'Leggett', valueToAdd: 2} ] }, • Add an aggregate property • Set to “sum” or “cnt” • Numeric columns handled properly; text concatenated • Formatter functions can modify display (and hide text) 48
  61. 61. TreeGrid – Data Format Caveat • Simpler JSON format causes blank rows when used without counts/totals 49
  62. 62. TreeGrid - Features • defaultOpen – expanded or collapsed • openAtLevels – auto expand all categories with less items than the defined amount • Doesn’t work with ForestStoreModel • expandoCell – column to display expand icon 50
  63. 63. Questions? Data Grid Blogs: http://xcellerant.net/dojo-grids-in-xpages/ Twitter: @Balassaitis 51
  64. 64. © 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC Questions???? 7 Use the Q&A pane in WebEx to ask questions We will answer your questions verbally
  65. 65. © 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC Question and Answer Time! 8 Teamstudio Questions? contactus@teamstudio.com 877-228-6178 TLCC Questions? howardg@tlcc.com paul@tlcc.com 888-241-8522 or 561-953-0095 Brad Balassaitis Howard Greenberg Taline Badrikian Upcoming Events: TLCC Spring Sale, ends tomorrow!!! MWLUG in Indianapolis and TackItOn ICON UK in Brighton and TackItOn 30% off all Teamstudio tools and 15% off all Ytria tools Next webinar July 24th – Making Mobile App Dev Easy SoftBank World 2013 July 23-24 in Japan #XPages @Balassaitis @TLCCLtd @Teamstudio @PaulDN Paul Della-Nebbia

×