Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Presenting Data – An Alternative to the View Control

1,643 views

Published on

In this webinar, Paul Della-Nebbia, an IBM Champion, will show how to implement a different alternative for displaying information from Domino views. Paul will cover how to use the Dojo Data Grid (included with XPages) to display a data grid that provides unique features like infinite scrolling, click to sort column headers, adjustable column widths, filtering, and the ability to drag and drop column headers to reorder. As the user scrolls through, the view data is retrieved as needed which improves performance and usability.

Published in: Technology
  • Be the first to comment

Presenting Data – An Alternative to the View Control

  1. 1. Presenting Data – An Alternative to the View Control Tweet about this event And mention us: @Teamstudio @TLCCLTD @PaulDN Mar. 17, 2015
  2. 2. @Teamstudio teamstudio.com @TLCCLTD tlcc.com Courtney Carter Inbound Marketing Specialist Teamstudio
  3. 3. Who We Are • Teamstudio’s background is in creating tools for collaborative computing in mid-size and large enterprises, primarily for IBM Notes • Easy-to-use tools for developers and administrators • 1600+ active customers, 53 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 IBM Notes apps with you! • End-users access Notes applications from mobile devices whether online or offline • Leverages the powerful technology of XPages
  5. 5. Unplugged Templates • Continuity – Mobile offline access to BCM programs • OneView Approvals – Expense approvals; anywhere, anytime • CustomerView – lightweight CRM framework for field sales and field service teams • Contacts – customer information database • Activities – customer activity log • Media – mobile offline file storage and access
  6. 6. XControls • Set of Controls for IBM Domino XPages developers working on new XPages apps and on app modernization projects • Re-write of the Teamstudio Unplugged Controls project, but adds full support for PC browser-based user interfaces as well as mobile interfaces • Enables XPages developers to create controls that are responsive • Learn more: teamstudio.com/solutions/xfoundations
  7. 7. Teamstudio Services • Professional services for modernization, web enablement, project management, development, and administration o Modernization Services o Unplugged Developer Assistance Program o Application Upgrade Analysis o Application Complexity Analysis o Application Usage Auditing • http://www.teamstudio.com/solutions/services/
  8. 8. • Usage Auditing promotion: o Now through Mar. 31, 2015, sign up for a free demo of Usage Auditing, and be automatically entered to win a Nexus 6. • Engage: Mar. 30-31, 2015 o Come see us in Ghent, Belgium for a chance to win an iPhone 6!
  9. 9. 1 #XPages Your Host Today: Howard Greenberg TLCC @TLCCLtd Presenting Data – An Alternative to the View Control
  10. 10. How can TLCC Help YOU! 2 • Private classes at your location or virtual •XPages Development •Support Existing Apps •Administration • Let us help you become an expert XPages developer! • Delivered via Notes • XPages • Development • Admin • User Self- Paced Courses Mentoring Instructor- Led Classes Application Development and Consulting Free Demo Courses!
  11. 11. Try a FREE XPages Course!!! 3 Introduction to XPages Development course • Three Hour self paced course • Has Demonstrations and Activities • Requires Domino Designer • Both an 8.5 and 9.0 version • Perfect for beginners! Register at www.tlcc.com/admin/tlccsite.nsf/pages/free+course Great Price It’s FREE!!!
  12. 12. Upcoming and Recorded Webinars 4 • April 17th Transformations - Smart Application Migration to XPages • May 14th App.Next - The Future of Domino App. Development • www.tlcc.com/xpages-webinar View Previous Webinars (use url above)
  13. 13. Asking Questions – Q and A at the end 5 Use the Orange Arrow button to expand the GoToWebinar panel Then ask your questions in the Questions pane! We will answer your questions verbally at the end of the webinar
  14. 14. Your Presenter Today: 6 #XPages Paul Della-Nebbia @PaulDN
  15. 15. Dojo DataGrid Features • Infinite scrolling • Adjustable, re-orderable, sortable columns • Hover and selection highlighting • In-Grid editing feature • Enhanced DataGrid: Filtering plugin 7
  16. 16. Dojo DataGrid control - System Requirements • Release 9 Domino and Designer – Built in to release 9 • Available for Release 8.5 after installing one of the following … – IBM Upgrade Pack 1 for Release 8.5 - or - – XPages Extension Library from OpenNTF 8
  17. 17. Steps to Create 1. Create a REST Service to provide a data source for the Grid 2. Add the Dojo DataGrid control to the page and bind it to the REST Service 3. Add Dojo DataGrid Column controls into the grid for the field data to display 9
  18. 18. Step 1: Create the REST Service i. Add the REST Service control to the XPage ii. Choose one of the following service types: xe:viewJsonService – read only service xe:viewItemFileService – read/write service iii. Set the appropriate properties for the service – databaseName and viewName – contentType=“application/json” – defaultColumns=“true” – sortColumn – var – And others depending on the application iv. Set the pathInfo property for quick testing of the service 10
  19. 19. Step 2: Add the Dojo DataGrid control i. Add the Dojo DataGrid control to the page ii. Bind the DataGrid to the REST Service iii. Set the appropriate properties for the DataGrid – autoHeight – rowsPerPage – And others depending on the application iv. Add dojoAttributes to the DataGrid – autoWidth=“true” – columnReordering=“true” – canSort 11
  20. 20. Step 3: Add the Dojo DataGrid Column controls i. Add a Dojo DataGrid Column controls into the DataGrid and set these properties – field – label – width – And others depending on the application ii. Repeat to add additional columns 12
  21. 21. Disabling Column Sorting • For all columns • For a specific column 13
  22. 22. Create a Custom Column in the REST Service 14
  23. 23. The arguments[0] object • Represents a row object in the DataGrid • Is passed to the onRowClick, onRowDblClick and onStyleRow events 15
  24. 24. Adding a column formatter function 16
  25. 25. Search and Filter properties of xe:viewJsonService 17 • search • searchMaxDocs • categoryFilter • keys • keysExactMatch
  26. 26. Enabling In-Grid Editing 18 1. Must use xe:viewItemFileService (read/write) – Set jsId=“restServiceObj” for client-side access 2. Add Dojo Data Grid, bind to REST service and … – Set jsId=“gridObj” for client-side access – Optionally set singleClickEdit=“true” 3. For each column to enable in-grid editing … – set editable="true" 4. To save changes call in a client-side script … restServiceObj.save(); 5. To cancel changes call … restServiceObj.close(); gridObj._refresh();
  27. 27. In-Grid Editing with Style 19 OnStyleRow fires … • New row is added • Row is hovered • Row is selected • Row is changed
  28. 28. Deleting Selected Entries in a Dojo Data Grid 20 gridObj.selection.getSelected() restServiceObj.deleteItem(selectedItem)
  29. 29. Creating Entries Directly in a Grid 21 1. Must use xe:viewJsonService 2. Set jsId=“restServiceObj2” for client-side access 3. Add Dojo Data Grid, bind to REST service and … – Set jsId=“gridObj” for client-side access 4. Add a Dialog control to enter the values for the new entry and code a Save button … var rsStore = restServiceObj2; rsStore.newItem(newEntry); rsStore.save(); rsStore.close(); gridObj._refresh(); …
  30. 30. The Dojo Enhanced DataGrid and the Filter Plugin 22 1. Must use xe:viewItemFileService 2. Add the following Dojo Modules and StyleSheets 3. Add the dojox.grid.EnhancedGrid type and the filter plugin in the Dojo properties for the grid
  31. 31. Want to Learn More??? • How to improve XPages performance • Understand events on an XPage • XPINC (XPages in the Notes client) performance • Migration strategies for converting traditional Notes applications to XPages • Localize your XPages applications for different languages • Use Custom Controls • Add charts to your XPages using DojoX chart widgets • "XAgents" that return XML, JSON and HTML data • Use the Dojo Data Grid • Create a custom REST Service to aggregates data • Use the Relational controls to access relational data from an XPage 23 Until April 3rd get this course for only $599, save $300 Learn more about the XPages Development 2 for Notes and Domino 9 course TLCC’s XPages Development 2 Course covers many advanced XPages techniques like:
  32. 32. Questions???? 24 Use the Orange Arrow button to expand the GoToWebinar panel Then ask your questions in the Questions panel! Remember, we will answer your questions verbally
  33. 33. #XPages @TLCCLtd @Teamstudio @PaulDN Upcoming Events: Engage, March 30/31 in Ghent, Belgium MWLug User Group Meeting, Aug. 19-21, Atlanta Question and Answer Time! 25 Teamstudio Questions? contactus@teamstudio.com 978-712-0924 TLCC Questions? howardg@tlcc.com paul@tlcc.com 888-241-8522 or 561-953-0095 Howard GreenbergPaul Della-Nebbia Courtney Carter

×