Adding the Map Jig

8min
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 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.
Steps
﻿
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 
﻿ 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.
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
# 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 
﻿ 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:
YAML
datasources:
  address: 
    type: datasource.static
    options:
      data:
        - street: 768 5th Ave
          city: New York
          country: US
datasources:
  address: 
    type: datasource.static
    options:
      data:
        - street: 768 5th Ave
          city: New York
          country: US
﻿
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: [email protected] & ',' & @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:
      address: [email protected] & ',' & @ctx.datasources.address.city & ',' & @ctx.datasources.address.country
      zoomLevel: 9
# 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:
      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
widgets:
  - size: "2x2" # choose size of the widget on the home hub
    jigId: map   
# 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
widgets:
  - size: "2x2" # choose size of the widget on the home hub
    jigId: map   
﻿
﻿
﻿
Updated 05 Aug 2024
Did this page help you?
Create the Map
Publish the project