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.

Expanding XPages with Bootstrap Plugins for Ultimate Usability


Published on

IBM Champion Johnny Oldenburger from Kranendonk Smart Robotics shows how to develop very user friendly and fully responsive web applications (with XPages of course!) by making use of Bootstrap and jQuery Plugins.

He shows how to use the Select2, DateTimePickers, Multiselect, Bootstrap-select, Modals, Popovers, and Notifications plugins to deliver the ultimate in usability. Learn how to solve the AMD issue when incorporating JavaScript libraries in XPages. Go beyond the basics and create applications that nobody ever thought possible using XPages.

Published in: Technology
  • Be the first to comment

Expanding XPages with Bootstrap Plugins for Ultimate Usability

  1. 1. Expanding XPages With Bootstrap Plugins For Ultimate Usability June 16, 2016
  2. 2. This webinar is brought to you as part of the free monthly webinar series from:
  3. 3. Howard Greenberg @TLCC Paul Della-Nebbia @PaulDN Courtney Carter @Teamstudio
  4. 4. Teamstudio provides products that help organizations with customized business applications implement best practices, work more efficiently, and prepare for the future. AboutTeamstudio
  5. 5. Get detailed insight into the true business usage of your IBM Notes apps. Spotlight on: Usage Auditor
  6. 6. Teamstudio Usage Auditor Databases by counts view in Usage Auditor
  7. 7.
  8. 8. • Spring into Savings on courses for: – Administrators – Developers – XPages – Java and JavaScript • For example – get both of TLCC’s Java for XPages courses • Usually $1,400, on sale for $999! The Spring Sale now extended to June 30th
  9. 9. Course Spotlight Rapid XPages Development using Application Layout and Dojo UI Controls • Covers many of the important controls – Application Layout – Form Table – Switch and Dynamic Content – Dynamic View Panel – Multi-Image – Dojo input controls – Tooltips and dialog – Data View – Navigator and Tag Cloud – Widget Container • Over 20 hours of training, all self paced with instructor support • Special deal for attendees, $399, save $500! • Go to to get this deal!
  10. 10. TLCC Application Development Services • Let us help with your development needs – Bootstrap – Java • Convert Notes Apps to mobile and the web! • Modernize old Domino web applications • Interface with backend data systems • Skills transfer
  11. 11. Upcoming and Recorded Webinars • We will see you in September – Stay tuned for what is coming up! View Previous Webinars (use url above)
  12. 12. New Extension Library Release • Release 17 Now Available at OpenNTF • Includes: – New Bluemix environmental variables (security and debug related) – New Dash Node property – displayNodeAsLink (for Dashboard) – New Blank Bootstrap3 theme – Form Table More Responsive (for Bootstrap) – A number of SPR Fixes (see readme.pdf file for list)
  13. 13. New Notes and Domino Fix Pack 6 • Includes important security and other fixes – JVM updated to 1.6 SR16 FP20 to address security vulnerabilities – Support for IBM iSeries 7.3 – Complete list of fixes: • • Custom Response Headers in notes.ini (when not using internet sites) • Fixes Java Console issue introduced in a previous interim fix • Also includes everything from: – Notes: 9.0.1 FP5 IF1, IF2, IF3 – Domino: 9.0.1 FP5 IF1, IF2, – JVM Patch: 1.6 SR16FP15 • Download at: –
  14. 14. Asking Questions – Q and A at the end 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
  15. 15. #XPages Expanding XPages with Bootstrap Plugins for Ultimate Usability Johnny Oldenburger Kranendonk Smart Robotics @JOldenburger
  16. 16. Develop highly user friendly responsive web (XPages) applications by making use of Bootstrap and JQuery Plugins as Select2, DateTimePickers, Multiselect, Confirmation, Modals, Popovers and Notifications for ultimate usability based on the latest versions of these plugins, including solutions for the AMD problem. Expect more of XPages Applications and go beyond the
  17. 17. Johnny Oldenburger Twitter: @Joldenburger Blog: XPages and more IBM Champion 2016 for Social Business Moderator XPages Google+ Community Curator OpenNTF Collaboration Today Currently working at Kranendonk Smart Robotics as a Notes Domino / Xpages /Web Developer Engage UG 2016
  18. 18. Top Resources for XPages and Bootstrap 1. NotesIn9 – David Leedy 2. Collaboration Today 3. Planet Lotus 4. Google+ XPages Community 5. 6. Stackoverflow 7. Notes Domino XPages development forum 8. OpenNTF 9. XPages Knowlegde Base
  19. 19. Usablitiy Usability is the ease of use and learnability of a human-made object. In Software engineering, usability is the degree to which software can be used by specified consumers to achieve quantified objectives with effectiveness, efficiency, and satisfaction in a quantified context of use.
  20. 20. Implementation External Bootstrap Plugins 1. Download CSS & JS Files 2. Unzip downloaded File 3. What do we need ? min.js or js files, css files ? 4. WebContent Folder Package Explorer in DDE 5. Include CSS & JS on XPages / Custom Control 6. Include x$ jQuery Selector for Xpages (optional) 7. AMD Fix needed for the plugin ? 8. Setup Plugin (Options) and design elements
  21. 21. Implementation External Bootstrap Plugins Demo Select2 4.0 Download CSS &JS files GitHub UnZip downloaded Zipfile What do we need (dist Folder) Add CSS & JS files to the WebContent Folder in the Package Explorer
  22. 22. Implementation External Bootstrap Plugins Demo Select2 4.0 Include CSS & JS files on XPage / Custom control
  23. 23. Mark Roden OpenNTF XSnippets x$ jQuery Selector
  24. 24. AMD (Asynchronous Module Definition) AMD (Asynchronous Module Definition) in Dojo causes issues with jQuery plugins and other JavaScript libraries, in that it prevents them from loading correctly. Solution by Ferry Kranenburg
  25. 25. AMD (Asynchronous Module Definition) Solution by Mark Roden Go to the WebContent Folder and select the JavaScript file select2.js Select Open With - Client/Server JS Editor
  26. 26. AMD (Asynchronous Module Definition) Solution by Mark Roden Remove in the second line define.amd and replace it with false Save the JavaScript file select2.js
  27. 27. Implementation External Bootstrap Plugins Demo Select2 4.0 Setup Plugin using x$ jQuery Selector for XPages
  28. 28. Implementation External Bootstrap Plugins Demo Select2 4.0 - Setup Combo Box
  29. 29. Implementation External Bootstrap Plugins Demo Select2 4.0 - Setup List Box
  30. 30. Implementation External Bootstrap Plugins Demo Select2 4.0 – Final Remarks When a placeholder is used for a non-multi-value select box such as a Combo Box, an Empty tag is required as a first option. One possibility is to generate computed items, including an empty tag, as values for the Combo Box.
  31. 31. Implementation External Bootstrap Plugins Demo Select2 4.0 – Final Remarks Responsive design - Percent width Select2's width can be set to a percentage of its parent to support responsive design. The best way to ensure that Select2 is using a percent based width is to inline the Style declaration into the tag. In the All Properties of the Combo Box set the Property style to the desired percentage. I always use: style="width: 100% !important;"
  32. 32. Implementation External Bootstrap Plugins
  33. 33. David Leedy NotesIn9 159 Introduction Select2
  34. 34. Bootstrap Modals The Bootstrap JS Modal is a lightweight multi-purpose JavaScript popup that is customizable and responsive. The plugin can be included individually, using Bootstrap's individual modal.js file, or using bootstrap.js or bootstrap.min.js. It can be used to display alert popups, videos, images and input fields. The Bootstrap JS Modal is divided into three primary sections: the header, body, and footer. All the code and styles are predefined by Bootstrap
  35. 35. Lightbox for Bootstrap Lightbox for Bootstrap 3 utilizes Bootstraps modal plugin to implement a lightbox gallery. In other words, a lightbox module for Bootstrap that supports images, YouTube videos, and galleries - built around Bootstrap's Modal plugin.
  36. 36. Viewer (Image Gallery) Viewer is a powerful, multi-functional, cross-browser and highly configurable image viewer plugin used to present your favorite images in an elegant way.
  37. 37. Unite Gallery The Unite Gallery is multipurpose javascript gallery based on jquery library. It's built with a modular technique with a lot of accent of ease of use and customization. It's very easy to customize the gallery, changing it's skin via css, and even writing your own theme. Yet this gallery is very powerfull, fast and has the most of nowdays must have features like responsiveness, touch enabled and even zoom feature, it's unique effect.
  38. 38. Bower for XPages
  39. 39. Bower for XPages • Bower requires node, npm (Node Package Manager) and Git • Step 1 - Install Node.js • Step 2 - Install Git • Step 3 - Install SourceTree • Step 4 - Install Bower (npm install -g bower) • Step 5 - Create Bower files To be able to run Bower there are two files required, bower.json and .bowerrc.
  40. 40. Bower for XPages Example of a bower.json file { "name": "bootstrap4xpages", "version": "1.7.9", "dependencies": { "bootstrap": "latest", "moment": "latest", "select2": "latest", "fontawesome": "latest" }, "private": true } Example of a .bowerrc file { "directory":"nameofyournsf/WebContent/libs" }
  41. 41. Bower for XPages Create Local Directories On your system create a local Folder SourceControl. This will be the local repository. The folder can be created, for example, in the My Documents directory. Next create in the SourceControl folder a new folder Git and a new folder Hg. Open the Git Folder and create a new folder BowerForXPages. Open the BowerForXPages folder and create a sub-folder Bower4XPagesODP. The ODP is placed in a subdirectory of the Git project directory so the .git directory will not be synced with the NSF.
  42. 42. Bower for XPages Setup Source Control DDE
  43. 43. Bower for XPages Setup SourceTree Do NOT select the ODP directory. The ODP is placed in a subdirectory of the Git project directory so the .git directory will not be synced with the NSF.
  44. 44. Bower for XPages Placing the Bower Files (bower.json - .bowerrc) To install the Packages (Bootstrap Plugins) start the Node.js command prompt. Next go to the directory where the Bower files are placed. Enter 'bower install' to install the Packages. The last step is to refesh the ODP (right click ODP - Refresh) in the DDE (Package Explorer) and next select the option Synch with NSF (right click on ODP in the Package Explorer - Team Development - Synch with NSF).
  45. 45. Questions???? 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
  46. 46. #XPages @JOldenburger @TLCCLtd @Teamstudio @PaulDN Upcoming Events:  MWLUG, Austin, TX – August 17 to 19  ICON UK, London – Sept. 15th and 16th  Connect 2017 in San Francisco, CA – Feb. 20th to 23rd Question and Answer Time! Teamstudio Questions? 978-712-0924 TLCC Questions? 888-241-8522 or 561-953-0095 Howard Greenberg Courtney Carter Johnny Oldenburger Paul Della-Nebbia Save on TLCC Training with the Spring Sale!