Components
widgets

5min
This component is an extension of the functionality of widgets on your 
﻿. It provides the same widgets to be available inside your 
﻿, giving them greater visual appeal and enhanced capabilities. This component is exclusive to the jig.default﻿. 
- To understand what widgets do, see  Widgets﻿.
- For a list of available widgets refer to example widgets﻿.
﻿
﻿Widgets are the foundational elements of your Home Hub﻿, whereas components.widgets are displayed alongside other components within a 
﻿.
Configuration options
﻿
Core structure
﻿
jigId
Reference the 
﻿ to be opened when the widget is pressed.
size
Select either 1x1, 2x2, 2x4, 4x2, 4x4
Other options
﻿
input
configure parameters that will be sent as inputs to our 
﻿.
when
The ability to include or exclude a widget. If set to true the widget is included, if set to false the widget will not be displayed. Dynamically set this property by using expressions.
Examples
Widgets as components
Widget on a jig
﻿
This sample displays the 4x4 location﻿ widget and four 1x1 widgets. The widgets as components behave similarly to widgets on the 
﻿. By tapping on the widget you directed to the related 
﻿ . The types and sizes available are the same as for Widgets﻿.

Examples:
See the full example in GitHub. 
See the folder with supporting files in GitHub. ﻿
﻿
﻿
﻿
Widgets
children:
  - type: component.widgets
    options:
      children:
        - size: "4x4"
          jigId: widgets-location
        - size: "1x1"
          jigId: widgets-my-home
        - size: "1x1"
          jigId: widgets-my-school
        - size: "1x1"
          jigId: widgets-my-work
        - size: "1x1"
          jigId: widgets-my-gym

children:
  - type: component.widgets
    options:
      children:
        - size: "4x4"
          jigId: widgets-location
        - size: "1x1"
          jigId: widgets-my-home
        - size: "1x1"
          jigId: widgets-my-school
        - size: "1x1"
          jigId: widgets-my-work
        - size: "1x1"
          jigId: widgets-my-gym
﻿
Widget with onPress event
Widget with onPress event
﻿
In this example, each widget is configured with an onPress event, which either opens a url, scanner, info-modal or maps.
Example:
See the example in GitHub﻿
YAML
title: Widget with onPress
type: jig.default

children:
  - type: component.image
    options:
      source:
        uri: https://images.unsplash.com/photo-1622737133809-d95047b9e673?q=80&w=2664&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

  - type: component.widgets
    options:
      children:
        - jigId: widgets-location
          size: "1x1"
          onPress: 
            type: action.open-url
            options:
              url: https://www.google.com/maps
        - size: 1x1
          jigId: widgets-my-work
          onPress: 
            type: action.open-url
            options:
              url: https://jigx.com/
        - size: "1x1"
          jigId: info-modal-placeholder
          onPress: 
            type: action.info-modal
            options:
              modal:
                element: 
                  type: icon
                  icon: yoga
                  color: warning
                title: Wellness Week
                buttonText: Join
                description: Center your wellbeing and come join is for a week of yoga 
              onConfirmed: 
                type: action.go-to
                options:
                  linkTo: info-modal-placeholder  
        - size: "1x1"
          jigId: open-scanner-onSuccess
          onPress: 
            type: action.open-scanner
            instanceId: scanner
            options:
              modal:
                title: Scan complete
              onSuccess: 
                type: action.go-back
title: Widget with onPress
type: jig.default

children:
  - type: component.image
    options:
      source:
        uri: https://images.unsplash.com/photo-1622737133809-d95047b9e673?q=80&w=2664&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

  - type: component.widgets
    options:
      children:
        - jigId: widgets-location
          size: "1x1"
          onPress: 
            type: action.open-url
            options:
              url: https://www.google.com/maps
        - size: 1x1
          jigId: widgets-my-work
          onPress: 
            type: action.open-url
            options:
              url: https://jigx.com/
        - size: "1x1"
          jigId: info-modal-placeholder
          onPress: 
            type: action.info-modal
            options:
              modal:
                element: 
                  type: icon
                  icon: yoga
                  color: warning
                title: Wellness Week
                buttonText: Join
                description: Center your wellbeing and come join is for a week of yoga 
              onConfirmed: 
                type: action.go-to
                options:
                  linkTo: info-modal-placeholder  
        - size: "1x1"
          jigId: open-scanner-onSuccess
          onPress: 
            type: action.open-scanner
            instanceId: scanner
            options:
              modal:
                title: Scan complete
              onSuccess: 
                type: action.go-back
﻿
See also
﻿Widgets samples solution - downloadable from Jigx Management /Quick Start.
﻿
﻿
Core structure
jigId	Reference the to be opened when the widget is pressed.
size	Select either 1x1, 2x2, 2x4, 4x2, 4x4
Other options
input	configure parameters that will be sent as inputs to our .
when	The ability to include or exclude a widget. If set to true the widget is included, if set to false the widget will not be displayed. Dynamically set this property by using expressions.
Updated 31 May 2024
Did this page help you?
web-view
Use template