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.

Dev112 let's calendar that

Howard Greenberg and Jesse Gallagher presentation from Collabsphere 2019.

  • Be the first to comment

Dev112 let's calendar that

  1. 1. DEV112 - Let's Calendar That! - Add Calendars to your Domino web applications
  2. 2. Our Sponsors
  3. 3. • Who are we? • Goals of this session • What is FullCalendar • An Example of FullCalendar in an XPages Application • No XPages? Where to go next Agenda
  4. 4. • Howard Greenberg – Been doing Notes/Domino teaching and consulting since 1994 – Owner of NetExperts and TLCC • TLCC has a complete line courses for Notes and Domino • NetExperts does consulting • Jesse Gallagher – – Consultant at I Know Some Guys Who are we?
  5. 5. • Learn how to implement a cool calendar in XPages • Learn how to setup a REST service using Java/XPages to allow access to your data from anything • Start to consider what happens if you move off XPages Goals of this session
  6. 6. • Per their website “the most popular full-sized JavaScript Calendar” – For desktop and tablet sized devices – Displays month, week, day and list formats – Can (optionally) use BootStrap – Works with React, Vue and Angular – Uses REST to populate calendar entries (other options as well) – Supports drag and drop of calendar entries – Create new entry by clicking on date – Support recurring entries • Full documentation and demos at • Demo!!! What is FullCalendar?
  7. 7. • Input parameters for start and end sent by FullCalendar – Our sample has a custom Important parameter to filter only important entries • The JSON sent can have many different properties for controlling style, type of event, etc. – Should have a title (appears on event), start and end REST Service to feed the Calendar
  8. 8. API?start=2019-08-14&end=2019-08-16&important=yes Sample JSON output
  9. 9. • FullCalendar 4 supports Bootstrap 4 • There is no “native” support for Bootstrap 4 in XPages – Use Bootstrap 4 and roll your own (bring in the css and js files) or... – Use FullCalendar 3 (note slightly different API and not supported anymore) • See documentation for implementation • Bootstrap is not required, it is optional A Word About Bootstrap
  10. 10. • Download the zip file and extract – started#download • Bring in resources – WebContent, create folder called fullcalendar – Drag and drop the folders under packages in the zip file to this new folder in Designer How do we add this to XPages?
  11. 11. • Bring in the needed modules • The JS files have the AMD issue – See the demo database for the workaround • Only load what you need depending on functionality used • See ccFullCalendarLoader custom control for example • OpenNTF project to get around AMD loader issues widgets-and-dojo-together – Have to turn OFF the JavaScript/CSS aggregation option (XSP Properties) xsp.persistence.mode=file Create a “Loader” Custom Control
  12. 12. • Users can click an existing entry to see information about the entry in a dialog • A dialog is used to create new entries • To maintain state of the calendar all interaction is done via dialogs – Dialogs are server side • Calls Java routine to create/save back end document • Could use client side JS for dialog and a REST server to post data – Have to reload the calendar when done XPages Design – calendar.xsp
  13. 13. Demo App Architecture Front End, can be anything but here XPages Back End Gets calendar entries via REST/JSON Posts calendar drag and drop changes via REST/JSON Create/Edits done in dialog, uses bean to save data (not REST in this case) When dialog is opened to edit entry the document is retrieved via UNID REST API has GET to retrieve entries based on start and end dates POST to save to the back end any changes done using drag and drop in the calendar Calendar bean to retrieve and save entries when they are created/edited using dialog XPages via Bean GET and Post to REST Service Sends back data via JSON
  14. 14. Code WalkThrough Calendar XPage
  15. 15. • > calendar object – Has “helper” code to create document, retrieve docs, save back to Domino • getCalendarDocs – retrieves a list of Calendar objects based on date range • saveCalendar – saves object to Domino • changeCalendarDates – changes a given calendar entry to new date • > Handles REST Service • doGet, do Post (others not implemented) • API.xsp > XPage to surface REST Service – Calls REST Service
  16. 16. Code WalkThrough API.xsp
  17. 17. • FullCalendar supports drag/drop editing of date/time • Posts to REST Service to change in Domino DB Next Step – enabling drag/drop
  18. 18. • Boss says get rid of XPages • Domino used only for back end storage • Have to re-write front end in ??? – What you want... Angular, REACT, etc. • FullCalendar works with all those • What about the REST Service??? No XPages, No Problem
  19. 19. • JAX-RS is your path • Several options: • Inside the NSF with XPages Jakarta EE Support • In an OSGi plugin • In a separate JEE web app • The same code will apply to all three, so you’re future- resilient No XPages, No Problem
  20. 20. • XPages Jakarta EE Support is on OpenNTF • (“Jakarta EE” is the new name for Java EE) • (It’s a whole “thing”) • It adds support for several modern Java standards to XPages • We care about two main components: • JAX-RS for REST services • JSON-B for mapping objects to JSON No XPages, No Problem
  21. 21. • Download the nsf from OpenNTF – Link to download!!! • Go to BitBucket and clone – dev112 Demo Database
  22. 22. • Must have the following projects installed – XPages Debug Toolbar (can disable easily) – OpenNTF ODA (can re-write code easily to use native Domino API) – XPages Jakarta EE Support Demo Requirements
  23. 23. Question time!!!!