Add the calendar jig and datasource
In this section, you will learn how to add a second file to the Hello project and add the calendar next to the map on the home hub. You create a data source file in the datasource folder containing the calendar details that provide the data for the week, events, meeting subjects, dates, and times.
See Jigx Concepts to learn what s, widgets, and the are.
- You first need to add data that the calendar can read from. For this step, you create a Static Datasource in the datasource folder of the project, which is automatically synced to the Cloud. Likewise, data updated on the Cloud automatically syncs to the device. Right-click on the datasources node in Explorer and select New file.
- Name the file calendar-data. automatically adds the .jigx extension to your file. The auto-complete popup displays the data source options. Select Static datasource from the list.
- Under the data node, you need to provide the details for the events in the calendar. The following fields are available for use with each event entry, you can add your own event entries or use the code example below.
4. Once you have added the fields your calendar-data.jigx file should resemble the code below.
- Open the Hello- solution in the in , right-click on the jigs node in Explorer, and select New file.
- Name the file calendar.
- The file opens and shows the 's auto-complete popup listing the five types. For this solution, we will be using the Calendar to create the UI for displaying data in a calendar format. Click on Calendar to open the skeleton YAML created by the .
- On the line under type:, type icon:. To select an icon from the predefined list start typing the first two letters of the name of the icon, in this case ca, the list of icons starts to populate as you type. Select calendar-3 from the list. This icon displays on the widget on the of the .
- Delete the header, onFocus and datasources section. You created the calendar-data.jigx datasource file in the step above, now you can reference the data from the file by using an expression. At the data node add calenar-data so that it resembles data: =@ctx.datasources.calendar-data. With expressions, you can structure data before binding them to the UI components.
Expressions are JSONata language-based. Learn more about JSONata and try out your expressions in their JSONata Exerciser. The root element of Expressions in .jigx files always starts with "@ctx" vs. "$$." in JSONata Exerciser (e.g. @ctx.data vs. $$.data). Jigx supports shorthand $ expressions for JSONata.
6. The component.event type is used to display events related to the data records. Use (ctrl+space) next to each field to select the value you want returned.
7. To display the date in UTC format we use a JSONata expression to convert the date from milliseconds to UTC for both the start and end date. Add the following expression under from: for the start date.
from: =$fromMillis($toMillis($now()) + @ctx.current.item.eventStart * 3600000)
For the end date under to: add the following expression:
to: =$fromMillis($toMillis($now()) + @ctx.current.item.eventEnd * 3600000)
For title, location, people and tags use (ctrl+space) after the =@ctx.current.item. to select the value available from the datasource.
8. Your calendar.jigx file should resemble the code below.
The Jigx Builder YAML editor includes code completion by simultaneously pressing the control and spacebar (ctrl+space) buttons. Only valid options in the current cursor context are displayed in the code popup.
- Click on the index.jigx file to add the calendar widget to appear on the screen next to map widget. Under the widgets: section add the following:size: 2x2 and the jigId: calendar and save the project.
- Your index.jigx file should resemble the code below.