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.

OpenNTF Webinar, October 2020

41 views

Published on

Michael Smith's presentation on the Flexible View Control

Published in: Software
  • Be the first to comment

  • Be the first to like this

OpenNTF Webinar, October 2020

  1. 1. OPENNTF WEBINARS October Webinar - XPages Flexible View Control with Michael G. Smith
  2. 2. AGENDA • Welcome – Howard Greenberg • Michael Smith • Questions – Graham Acres
  3. 3. ASKING QUESTIONS • First Question – Will this be recorded? • Yes, view on YouTube!!! • https://www.youtube.com/user/OpenNTF • Use the Questions Pane in GoToWebinar • We will get to your questions at the end of the webinar • The speakers will respond to your questions verbally • (not in the Questions pane) • Please keep all questions related to the topics that our speakers are discussing!!! • Unrelated Question => post at: • http://openntf.slack.com/
  4. 4. THANKS TO THE OPENNTF SPONSORS • HCL made a significant contribution to help our organization • Funds these webinars! • Contests like Hackathons • Running the organization • Prominic donates all IT related services • Cloud Hosting for OpenNTF • Infrastructure management for HCL Domino and Atlassian Servers • System Administration for day-to-day operation
  5. 5. THIS IS OUR COMMUNITY • Join us and get involved! • We are all volunteers • No effort is too small • If your idea is bigger than you can do on your own, we can connect you to a team to work on it • Test or help or modify an existing project • Write guides or documentation • Add reviews on projects / stars on Snippets
  6. 6. Flexible View Control for XPages OpenNTF Webinar Michael G. Smith October 22nd, 2020
  7. 7. HELLO! I am Michael G. Smith Senior Developer/Analyst Mutual Boiler Re Blog: Xpage.me Twitter: @michaelgsmith Email: smithmg@gmail.com LinkedIn: linkedin.com/in/smithmichaelgarrett 2
  8. 8. What problem are we trying to solve? 3
  9. 9. “The Flexible View Control was born out of frustration with the out-of-the-box tools available in XPages for displaying View data. 4
  10. 10. Goals for creating a new View control: ▪ Streamline View creation in Xpages ▪ Adding View data shouldn’t be a painful experience! ▪ Drag n Drop and point to data (Low Code) ▪ Provide a rich experience for the user ▪ Move View management out of the design ▪ Views should act as simple tables of back-end data ▪ No need to format columns 5
  11. 11. Goals for creating a new View control: ▪ Separate logic and data ▪ Shouldn’t have to rebuild app to make changes ▪ Minimize back-end View creation ▪ No more single-use Views! ▪ Be creative with indexes 6
  12. 12. Goals for creating a new View control: ▪ Which JavaScript table framework to use? ▪ Had started using DataTables and was very impressed with the range of functionality ▪ Which UI framework to use? ▫ Try to keep it as generic as possible 7
  13. 13. The Flexible View Control for XPages is the result. 8
  14. 14. 9 Turn this …
  15. 15. 10 Into this …
  16. 16. 11 Or this …
  17. 17. 12 Or this …
  18. 18. 13 Or this …
  19. 19. Getting Started What is The Flexible View Control?
  20. 20. Flexible View Control Architecture
  21. 21. So, what is it exactly? ▪ A re-usable custom control (and companion resources) that can be dropped into ANY XPage application ▪ Use as a View, embedded View, Picklist ▪ Built on jQuery and DataTables ▪ Extremely versatile and configurable ▪ Has evolved over the course of about 5 years ▪ Used in Production everyday! 16
  22. 22. How To Get The Code ▪ Download from GitHub ▫ https://github.com/michaelgsmith/datatables-xpages ▪ Import the project (ODP) into Domino Designer ▪ Several good tutorials online for this ▪ Theme includes jQuery and DataTables links to CDN ▫ Download source and add to your app ▪ Theme includes commented out link to Bootstrap CDN 17
  23. 23. What’s In the Box? 18 CustomControls ccRestView Script Libraries csjsCCRestView.js ssjsCCRestView.jss enable_amd.js disable_amd.js Stylesheets ccRestView.css Themes ccRestView.theme Xpages restServices.xsp Views vwAdminViewDefinitions ▪ Design elements needed for functionality
  24. 24. What’s In the Box? 19 XPages adminConfig.xsp adminViewDefinitionDoc.xsp adminViewDefintion.xsp Forms adminViewDefinition configDocument Views vwConfig ▪ Design elements needed for configuration CustomControls ccNav
  25. 25. Configuration Import project into Designer and setup the configuration parameters
  26. 26. Configuration 21 ▪ ODP/AppProperties/database.properties Note: If you have previously downloaded the project and imported into your workspace you need to update a few files first.
  27. 27. Configuration 22 ▪ ODP/.project Note: If you have previously downloaded the project and imported into your workspace you need to update a few files first.
  28. 28. Configuration 23 ▪ In Navigator tab right-click and select Import.
  29. 29. Configuration 24 ▪ Select General .. Existing Projects into Workspace.
  30. 30. Configuration 25 ▪ Find your downloaded and unzipped project.
  31. 31. Configuration 26 ▪ Click the Finish button to import the project into your workspace.
  32. 32. Configuration 27 ▪ Once the project is imported you need to create an actual NSF.
  33. 33. Configuration 28 ▪ Now that the NSF is created…. ▫ Update the ACL ▫ Build the project ▫ Open adminConfig.xsp in your browser ▫ THIS MUST BE DONE 1st !!! ▫ Create the first View Definition (view-definitions) ▫ THIS MUST BE DONE 2nd !!!
  34. 34. Configuration 29 NOTE: The control will not work until this step is complete
  35. 35. Configuration 30 ▪ adminConfig.xsp ▫ Rest Service Path: ▫ this is the path (<dir>/<database.nsf>) where you will create rest services to retrieve data. ▫ Servers: ▫ Tells adminViewDefinitionDoc.xsp where to look for View designs. ▫ Databases: ▫ Tells adminViewDefinitionDoc.xsp which Views are available to interrogate ▪ There can be only one config doc (like the Highlander)
  36. 36. Configuration 31 ▪ adminConfig.xsp ▫ Save the Configuration
  37. 37. Configuration 32 ▪ adminConfig.xsp ▫ Click Save … nothing will happen and that’s ok. ▫ Verify the config doc was created ▫ Click Create View Definition ▫ THIS HAS TO BE DONE 2nd !!!
  38. 38. Configuration 33 ▪ adminConfig.xsp ▫ Click Create View Definition (THIS HAS TO BE DONE 2nd !!!)
  39. 39. Configuration 34 ▪ adminViewDefinitionDoc.xsp
  40. 40. View Definitions Put the “Flexible” in Flexible View Control
  41. 41. “View Definitions act as the “wiring” for the Flexible View Control, instructing it where to retrieve data from and how that data should be formatted and displayed. 36
  42. 42. View Definitions provide the wiring 37
  43. 43. View Definitions provide the wiring. Domino View View Def View Def View Def One View can be represented multiple times with different column orders, sorting and categorization Any time a View is displayed with the Flexible View Control it needs to point to a View Definition FVC FVC FVC
  44. 44. Creating the first View Definition 39 Before creating View Definitions that point to your data, we need to create the View Definition that displays the list of all View Definitions.
  45. 45. Creating the first View Definition 40 ▪ Make sure the field are as below
  46. 46. Creating the first View Definition 41 ▪ We now have a fully functional Flexible View Control!
  47. 47. About the UI
  48. 48. About the UI 43 ▪ Out-of-the-box UI left intentionally generic to make it easier to integrate into existing apps ▪ Uses the “default” DataTables styling ▫ See DataTables.net for other styling options ▪ Easy to integrate with Bootstrap 3 ▫ Commented out links to CDN in theme ▪ Easy to incorporate Font Awesome
  49. 49. About the UI 44 ▪ For the Demos we create today I am going to use Bootstrap 3.4
  50. 50. About the UI 45 ▪ Using Flexbox to create a layout
  51. 51. About the UI 46 ▪ Using Flexbox to create a layout ▫ For a deeper dive into this topic see my blog post: https://xpage.me/2020/04/15/a-flexible-view-control- for-xpages-part-8-putting-the-flex-in-flexible/
  52. 52. How Does It Work?
  53. 53. How does it work?
  54. 54. How does it work? Create the “View” Object The View object is the in- memory client-side representation of the Flexible View Control. The “build” function is where the magic happens. This is where DataTables is initialized and configured.
  55. 55. How does it work? “View” Object “build” Function DataTables Initialization Data retrieved from Domino REST Services or XAgents Retreive REST Data initComplete Callback Bind Events • Data full loaded. • Adjust layout (header, footer, filter, info) • Categories, totals, averages. Add click/double- click events
  56. 56. DataTables Primer
  57. 57. DataTables Primer 52 ▪ Similar to Xpages, DataTables has a “lifecyle” of callbacks
  58. 58. DataTables Primer 53
  59. 59. DataTables Primer 54 ▪ The Flexible View Control makes it easy to add custom callback functions to a View control.
  60. 60. DataTables Primer 55 ▪ The Flexible View Control makes it easy to add custom callback functions to a View control.
  61. 61. Let’s Build Some Demos! … and work with some real data
  62. 62. Future Plans 57 ▪ Retrieve non-Domino data ▪ Add renderer function to View Def column ▪ Ability to make individual columns non-sortable ▪ Ability to sort by more than two columns and more than two levels of categorization ▪ Custom columns ▪ Squash bugs!
  63. 63. Future Plans 58 ▪ What would you like to see?
  64. 64. THANKS! Any questions? You can find me at: Twitter: @michaelgsmith Email: smithmg@gmail.com LinkedIn: linkedin.com/in/smithmichaelgarrett 59
  65. 65. NEXT WEBINAR • TBD • Will be announced at https://openntf.org/webinars
  66. 66. UPCOMING EVENTS • Collabsphere – October 27-29 • https://collabsphere.org/ug/cs2020.nsf/index.html • DNUG – monthly online events • https://dnug.de/en/dnug47online-2/ • HCL Digital Week – November 9-13 (APG is 12/1-4) • https://www.hcltechsw.com/events/digital-week
  67. 67. QUESTIONS? Use the GoToWebinar Questions Pane Please keep all questions related to the topics that our speakers are discussing!!! Unrelated Question => post at: http://openntf.slack.com/

×