Add the calendar jig and datasource

overview in this section, you will learn how to add a second jig file to the hello jigx project and add the calendar jig next to the map jig on the home hub docid\ gpvp1ajqwxiru83 jpzed 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 docid\ fgy98xczm5qs yjoii8po to learn what jigs, widgets, and the home hub are steps add the calendar data jigx data source file you first need to add data that the calendar jig can read from for this step, you create a static datasource in the datasource folder of the project, which is automatically synced to the jigx cloud likewise, data updated on the jigx cloud automatically syncs to the device right click on the datasources node in explorer and select new file name the file calendar data jigx automatically adds the jigx extension to your file the jigx 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 yaml type datasource static options data \ id 1 eventend 2 eventstart 1 location redmond, wa people \ avatarurl https //randomuser me/api/portraits/men/1 jpg fullname tim cook tags \ color color2 title negotiation title negotiation with company a 4\ once you have added the fields your calendar data jigx file should resemble the code below calendar data jigx # a global static datasource that allows easy access and reusability to the data across various jigs and components type datasource static options data \ id 1 eventend 2 eventstart 1 location redmond, wa people \ avatarurl https //randomuser me/api/portraits/men/1 jpg fullname tim cook tags \ color color2 title negotiation title negotiation with company a \ id 2 eventend 4 eventstart 2 location palo alto, ca people \ avatarurl https //randomuser me/api/portraits/men/49 jpg fullname michael tate tags \ color color5 title qualification title demo for company b \ id 3 eventend 25 eventstart 24 location menlo park, ca people \ avatarurl https //randomuser me/api/portraits/men/90 jpg fullname michael tong tags \ color color6 title verbal title sign contract add a calendar jig file open the hello jigx solution in the jigx builder in vs code, right click on the jigs node in explorer, and select new file name the file calendar the file opens and shows the jigx's auto complete popup listing the five jig types for this solution, we will be using the calendar jig to create the ui for displaying data in a calendar format click on calendar to open the skeleton yaml created by the jigx builder 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 home hub of the jigx app 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 jig 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 https //jsonata org/ https //jsonata org/ jsonata and try out your expressions in their https //try jsonata org/ https //try jsonata org/ 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 yaml options title =@ctx current item title \# use a jsonata expression to get the date in milliseconds and then convert it to uct for the start time from =$frommillis($tomillis($now()) + @ctx current item eventstart 3600000) \# use a jsonata expression to get the date in milliseconds and then convert it to uct for the end time to =$frommillis($tomillis($now()) + @ctx current item eventend 3600000) location =@ctx current item location people =@ctx current item people tags =@ctx current item tags 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 calendar jigx # the system name that uniquely identifies the jig title calendar \# the jig type used to display a calendar with the current date type jig calendar \# icon that displays on the widget on the home hub icon calendar 3 \# the expression that structures the data from the datasource before binding it to the jig expressions are jsonata based data =@ctx datasources calendar data item type component event options title =@ctx current item title \# use a jsonata expression to get the date in milliseconds and then convert it to uct for the start time from =$frommillis($tomillis($now()) + @ctx current item eventstart 3600000) \# use a jsonata expression to get the date in milliseconds and then convert it to uct for the end time to =$frommillis($tomillis($now()) + @ctx current item eventend 3600000) location =@ctx current item location people =@ctx current item people tags =@ctx current item tags add the calendar jigid in the index jigx file click on the index jigx file to add the calendar widget to appear on the home hub 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 index jigx # the system name that uniquely identifies the solution name hello jigx solution \# the friendly name of the solution title hello jigx solution \# the built in category selected for this solution category business \#the widgets that act as top level navigation elements for jigs tabs home jigid map icon location calendar jigid calendar icon calendar