Add widgets

4min
Overview
Widgets can be customized in many ways to reflect the styling and functionality you require.  Use the widget image﻿, location﻿, chart﻿, and other elements for customizations. In this section, you will learn how to change your map 
﻿ with an icon to a widget.location, and add a widget.image widget to the composite.jigx file.
Hello Jigx solution with location icon
﻿
Widget location & image
﻿
Steps
Add a widget to a jig 
Open the Hello-
﻿ solution in 
﻿ in 
﻿, and click on the map.jigx file.
Delete the icon: location entry.
Add the widget.location code below. For the address you use expressions﻿ to call the city New York from the static datasource . 
﻿
map.jigx
# The system name that uniquely identifies the jig
title: Location with address
# The jig type used to display data
type: jig.default
# icon that displays on the widget on the home hub
widgets: 
  "2x2": 
    type: widget.location
    options: 
      address: [email protected]

isCollapsible: true
# 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          
children:
  - 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
# The jig type used to display data
type: jig.default
# icon that displays on the widget on the home hub
widgets: 
  "2x2": 
    type: widget.location
    options: 
      address: =@ctx.datasources.address.city

isCollapsible: true
# 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          
children:
  - type: component.location
    options:
      address: =@ctx.datasources.address.street & ',' & @ctx.datasources.address.city & ',' & @ctx.datasources.address.country
      zoomLevel: 9
﻿
4. Open the composite.jigx file and copy the code below. Note the new widgets section using widget.image showing a source uri for the image you want displayed.
composite.jigx
# The system name that uniquely identifies the jig
title: Customers
description: Shows list and new customers together
# The jig type used to join multiple jigs together
type: jig.composite

widgets:
  "4x2":
    type: widget.image
    options:
      source: 
        uri: https://cdn2.webdamdb.com/v1_1280_6enPaxIBt9M3.jpg?1554490336
        
# A container for specifying jig headers such as images, videos or location
header:
  type: component.jig-header
  options:
    children:
      type: component.image
      options:
        title: Customers
        source:
          uri: https://cdn2.webdamdb.com/v1_1280_6enPaxIBt9M3.jpg?1554490336
    height: small    
  
# Specifiy the jigs to combine by listing the jigIds for each jig
children:
  - jigId: new-customer
  - jigId: list-customer
# The system name that uniquely identifies the jig
title: Customers
description: Shows list and new customers together
# The jig type used to join multiple jigs together
type: jig.composite

widgets:
  "4x2":
    type: widget.image
    options:
      source: 
        uri: https://cdn2.webdamdb.com/v1_1280_6enPaxIBt9M3.jpg?1554490336
        
# A container for specifying jig headers such as images, videos or location
header:
  type: component.jig-header
  options:
    children:
      type: component.image
      options:
        title: Customers
        source:
          uri: https://cdn2.webdamdb.com/v1_1280_6enPaxIBt9M3.jpg?1554490336
    height: small    
  
# Specifiy the jigs to combine by listing the jigIds for each jig
children:
  - jigId: new-customer
  - jigId: list-customer
﻿
5. Save and publish the Hello-
﻿ solution.
6. Run the Hello-
﻿ solution on your mobile device to see the change to the map widget on the  
﻿.
﻿
Updated 01 Nov 2023
Did this page help you?
Change an icon and add a badge
Add a component using a template