Adding the Map Jig

overview in this section, there are two files to edit, namely, index jigx and myfirstjig jigx in the index jigx file, you select the size of the widgets docid\ gfzvopznu1kvsxh bmyl7 that will appear on the {{jigx}} mobile app home hub docid 4flxgln9c4 r1xr3uodi4 screen in the myfirstjig jigx file you will specify the default jig default docid\ rtomyji3uoxiqxdultz3o of {{jig}} , assign an icon for the {{jig}} , and provide a static data docid\ bn6yyljswkrsj1 bbwss1 that provides the location on the map see jigx concepts docid\ onemnbqumgbn6n4karyts to learn what {{jig}} s and widgets are steps 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 edit the index jigx file click on the index jigx file this file is the menu structure of the app in the index jigx file you select the size of the widget that will appear on the {{jigx}} mobile app home hub docid 4flxgln9c4 r1xr3uodi4 screen the size of the widget displays as 1x1 to see the available widget sizes, place the cursor in front of the 1x1 and press ctrl+space select the size 2x2 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 \# the friendly name of the solution title hello jigx \# the built in category selected for this solution category business \#the widgets that act as top level navigation elements for jigs widgets \ size "2x2" # choose size of the widget on the home hub jigid myfirstjig add the map to the jig in explorer expand the jigs folder and right click on myfirstjig jigx file and rename the file to map jigx click to open the file, the {{jigx}} auto complete popup listing the five {{jig}} types displays for this solution, we will be using the default {{jig}} to create the ui for displaying data click on default to open the skeleton yaml created by the {{jigxbuilder}} add location with address as the title for your {{jig}} the title appears under the widget on the {{homehub}} add a description for the jig, such as map with a marker 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 lo, the list of icons starts to populate as you type select location from the list this icon displays on the widget on the {{homehub}} delete the header , and onfocus section, you will add a header later in the combine the solution's elements docid 3kikfzuxfmljnhobeqc8i section the map jig needs a datasource defined that provides the location details you will use a static data docid\ bn6yyljswkrsj1 bbwss1 in this step the static dataset is created directly inside the jig file of the jigx solution, and there is no need to specify any database connections or set up any tables the amount of records that can be created for the static data is unlimited and is used to bind data to the ui components replace mydata with address press (ctrl+space) and select static datasource define the location details for the street, city and country under the data tag you can remove id 1 add your own location or use the following as an example yaml datasources address type datasource static options data \ street 768 5th ave city new york country us the controls displayed on the {{jig}} are defined under the children node on a default {{jig}} the output control is placed on the location component to display a map/location inside the {{jig}} under the children node press (ctrl+space) and select location from the list for the output control to display the map with the location you will use the address from the datasource using an expressions docid 381lsriefhbm5 26p9ogs to return the street, city and country to the location component next to options press (ctrl+space) and select address from the list to add the expression next to the address line press (ctrl+space) and select =@ctx from the list the root element of expressions in jigx files always starts with "@ctx" vs "$ " in jsonata exerciser (e g @ctx data vs $ data) add the following to your expression address =@ctx datasources address street & ',' & @ctx datasources address city & ',' & @ctx datasources address country to ensure that the location marker can be seen on the map add a zoomlevel 9 under the address line save the project your map jigx file should resemble the code below map jigx # the system name that uniquely identifies the jig title location with address description map with a marker \# the jig type used to display data type jig default \# icon that displays on the widget on the home hub icon location \# the type of datasource used to return data in the jig datasources address \# the static dataset is created directly inside the jig file type datasource static options data \ street 768 5th ave city new york country us \# the control used by the jig to display a location children \# the component location is an interactive map displaying the location using the address \ type component location options viewpoint address =@ctx datasources address street & ',' & @ctx datasources address city & ',' & @ctx datasources address country zoomlevel 9 update the jigid in the index jigx file click on the index jigx change the jigid from myfirstjig to map your index jigx file should resemble to 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 see also architecture docid\ brcajabz2u kt vaaworj jigx concepts docid\ onemnbqumgbn6n4karyts