Getting started
...
Create an app from scratch
Create the Map
Adding the Map Jig
8min
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 widget that will appear on the mobile app Home Hub screen. In the myfirstjig.jigx file you will specify the default type of , assign an icon for the , and provide a static datasource that provides the location on the map.
See Jigx Concepts to learn what s and widgets are.
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. 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 mobile app Home Hub 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.
- 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 auto-complete popup listing the five types displays. For this solution, we will be using the default to create the UI for displaying data. Click on Default to open the skeleton YAML created by the .
- Add Location with address as the title for your . The title appears under the widget on the . 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 .
- Delete the header, and onFocus section, you will add a header later in the Combine the solution's elements section.
- The map jig needs a datasource: defined that provides the location details. You will use a static datasource 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:
- The controls displayed on the are defined under the children: node on a default . The output control is placed on the location component to display a map/location inside the . 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 expression 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.
- Click on the index.jigx.
- Change the JigId from myfirstjig to map.
- Your index.jigx file should resemble to the code below.
Updated 05 Aug 2024
Did this page help you?
Yes
No