Integrate with Power Pages
Mar 14, 2023 2:00 PM

Integrate with Power Pages

External YouTube Channel

From JSON basics to advanced output with Bootstrap Moda

Integrating with Power Pages is a powerful way to create customized calendars with dynamic content. By combining the power of FullCalendar, a popular JavaScript library for creating interactive calendars, with the flexibility of Power Pages’ templating system, users can create custom calendaring experiences that are tailored to their needs.

The integration begins with an understanding of JSON (JavaScript Object Notation), which is the data format used by JSON is a lightweight data-interchange format that is easy to read and write and can be used to represent complex data structures.

Once the user has a basic understanding of JSON, they can begin to incorporate into their Power Pages. This involves using the API to create a series of events, which are then passed through the Power Pages templating system to render a fully-customized calendar. Users can also use the API to customize the calendar’s appearance, including the background colour, font size, and event icons.

Stage 1 – Create a JSON web template to feed the calendar Key skills covered Liquid – fetchxml, if, for and filters Creating a JSON endpoint Accessing columns from related records Preparing dates in ISO8601 format using liquid filters Escaping HTML using liquid filters Encoding URLs using liquid filters Dealing with comma separators Snippets Here’s a static example of the JSON before we make dynamic and loop over our advanced find results: The completed

liquid template, with events populated dynamically: Useful links

In this Video

  • 00:00:00 Introduction
  • 00:00:19 Static Example of JSON
  • 00:00:33 Use Advaned Find to build a Fetch XML query
  • 00:03:13 Create a Web Template in the Portal Management App
  • 00:03:53 Prepare the Fetch XML
  • 00:05:00 If statement to check whether any result returned
  • 00:05:34 For loop to output each result (event)
  • 00:06:54 Use forloop.last to deal with comma separators
  • 00:08:02 Get our web template onto the portal as a JSON endpoint
  • 00:13:21 Validate the JSON
  • 00:13:43 Populate the event feed with dynamic values from Dataverse
  • 00:14:40 Converting dates to ISO8601 format
  • 00:18:25 Outputting lookup fields, and fields from related records