Inputs & outputs (Alpha)

This feature is currently in its Alpha stage of development.

• As an early version, it may not include all planned functionalities and is subject to significant changes based on ongoing development and user feedback.

• In this phase, the feature may contain bugs or behave unpredictably.

• Jigx recommends using standard, fully supported components until this feature has been fully tested and refined.

• We encourage you to provide feedback and report any issues to help us improve and refine the feature for future releases.

Use inputs and outputs to transfer and read data in custom components. This approach lets you configure a component once and reuse it across multiple screens or even on the same screen. By simply defining different inputs and outputs each time the component is used, you can display varied data and adapt to different contexts effortlessly.

Inputs

Define inputs in the custom component, then in the jig using the custom component, provide the data/context for the input, either referencing a datasource or adding values.

Examples and code snippets

In this example, we create a tab component using the view and text custom components. By leveraging inputs, the tab component can be reused within the same jig. The first tab component is center-aligned with four tabs, while the second is left-aligned with three tabs. Tab names for each component are dynamically set using the tabName input.

Tabs using inputs

For more examples using inputs, see the following:

Cards in a list	Ratings	Tags
Cards with charts	Sections	Toggles
Countdown	Stepper

custom-component.jigx

# components/media-types.jigx
type: component.default
# Inputs determine the name, alignment, indicator and value of the tabs
inputs:
  # inputs for indicators
  tabIndicator1:
    required: false
    type: boolean
  tabIndicator2:
    required: false
    type: boolean
  tabIndicator3:
    required: false
    type: boolean
  tabIndicator4:
    required: false
    type: boolean
  # inputs for tab names
  tabName1:
    required: true
    type: string
  tabName2:
    required: true
    type: string
  tabName3:
    required: false
    type: string
  tabName4:
    required: false
    type: string
  # inputs for tab values
  tabValue1:
    required: true
    type: string
  tabValue2:
    required: true
    type: string
  tabValue3:
    required: false
    type: string
  tabValue4:
    required: false
    type: string
  # input to determine alignment of the tab, e.g. center, left, right.
  tabsAlignment:
    required: false
    type: string

children:
  # There are 4 tabs configured in this custom component.
  # Using the view component creates the layout for the tabs
  # Tab 1
  - type: component.view
    options:
      style:
        border:
          bottom:
            style: solid
        flex:
          direction: row
          grow: 1
        justifyContent: center
        margin:
          vertical: medium
      children:
        - type: component.view
          when: [email protected] != null
          options:
            style:
              flex:
                direction: row
                grow: [email protected] = true ? 1:0
              gap: minimal
              padding:
                left: [email protected] = "center" ? "medium":"none"
                right: [email protected] = "center" ? "medium":"large"

            children:
              - type: component.view
                options:
                  style:
                    gap: medium
                  children:
                    - type: component.view
                      options:
                        style:
                          alignItems: center
                          flex:
                            direction: row
                          gap: minimal
                          justifyContent: center
                        # Using the text component to configure the tab text
                        children:
                          - type: component.text
                            options:
                              emphasis: [email protected] = @ctx.inputs.tabValue1 ? "":"medium"
                              value: [email protected]
                              weight: bold

                    - type: component.view
                      options:
                        children: []
                        style:
                          background:
                            color:
                              [email protected] = @ctx.inputs.tabValue1 ?
                              "element":"transparent"
                          flex:
                            grow: 1
                          height: 2

              - type: component.view
                when: [email protected] = true
                options:
                  style:
                    flex:
                      grow: 1
                  children:
                    - type: component.view
                      options:
                        children: []
                        style:
                          background:
                            color: negative
                          height: 6
                          radius: large
                          width: 6
            # Configure the onPress event to show the content in tab 1 when it is pressed.
            onPress:
              type: action.set-state
              options:
                state: [email protected]
                value: [email protected]
        # Tab 2
        # Using the view component creates the layout for the tabs
        - type: component.view
          when: [email protected] != null
          options:
            style:
              flex:
                direction: row
              gap: minimal
              padding:
                left: [email protected] = "center" ? "medium":"none"
                right: [email protected] = "center" ? "medium":"large"

            children:
              - type: component.view
                options:
                  style:
                    gap: medium
                  children:
                    - type: component.view
                      options:
                        style:
                          alignItems: center
                          flex:
                            direction: row
                          gap: minimal
                          justifyContent: center

                        children:
                          - type: component.text
                            options:
                              emphasis: [email protected] = @ctx.inputs.tabValue2 ? "":"medium"
                              value: [email protected]
                              weight: bold

                    - type: component.view
                      options:
                        children: []
                        style:
                          background:
                            color:
                              [email protected] = @ctx.inputs.tabValue2 ?
                              "element":"transparent"
                          flex:
                            grow: 1
                          height: 2

              - type: component.view
                when: [email protected] = true
                options:
                  style:
                    flex:
                      grow: 1
                  children:
                    - type: component.view
                      options:
                        children: []
                        style:
                          background:
                            color: negative
                          height: 6
                          radius: large
                          width: 6
            # Configure the onPress event to show the content in tab 2 when it 
            # is pressed.
            onPress:
              type: action.set-state
              options:
                state: [email protected]
                value: [email protected]
        # Tab 3
        # Using the view component creates the layout for the tabs
        - type: component.view
          when: [email protected] != null
          options:
            style:
              flex:
                direction: row
              gap: minimal
              padding:
                left: [email protected] = "center" ? "medium":"none"
                right: [email protected] = "center" ? "medium":"large"

            children:
              - type: component.view
                options:
                  style:
                    gap: medium
                  children:
                    - type: component.view
                      options:
                        style:
                          alignItems: center
                          flex:
                            direction: row
                          gap: minimal
                          justifyContent: center

                        children:
                          - type: component.text
                            options:
                              emphasis: [email protected] = @ctx.inputs.tabValue3 ? "":"medium"
                              value: [email protected]
                              weight: bold

                    - type: component.view
                      options:
                        children: []
                        style:
                          background:
                            color:
                              [email protected] = @ctx.inputs.tabValue3 ?
                              "element":"transparent"
                          flex:
                            grow: 1
                          height: 2

              - type: component.view
                when: [email protected] = true
                options:
                  style:
                    flex:
                      grow: 1

                  children:
                    - type: component.view
                      options:
                        children: []
                        style:
                          background:
                            color: negative
                          height: 6
                          radius: large
                          width: 6
            # Configure the onPress event to show the content in tab 3 when 
            # it is pressed.
            onPress:
              options:
                state: [email protected]
                value: [email protected]
              type: action.set-state
        # Tab 4
        # Using the view component creates the layout for the tabs
        - type: component.view
          when: [email protected] != null
          options:
            style:
              flex:
                direction: row
              gap: minimal
              padding:
                left: [email protected] = "center" ? "medium":"none"
                right: [email protected] = "center" ? "medium":"large"

            children:
              - type: component.view
                options:
                  style:
                    gap: medium

                  children:
                    - type: component.view
                      options:
                        style:
                          alignItems: center
                          flex:
                            direction: row
                          gap: minimal
                          justifyContent: center

                        children:
                          - type: component.text
                            options:
                              emphasis: [email protected] = @ctx.inputs.tabValue4 ? "":"medium"
                              value: [email protected]
                              weight: bold

                    - type: component.view
                      options:
                        children: []
                        style:
                          background:
                            color:
                              [email protected] = @ctx.inputs.tabValue4 ?
                              "element":"transparent"
                          flex:
                            grow: 1
                          height: 2

              - type: component.view
                when: [email protected] = true
                options:
                  style:
                    flex:
                      grow: 1
                  children:
                    - type: component.view
                      options:
                        children: []
                        style:
                          background:
                            color: negative
                          height: 6
                          radius: large
                          width: 6
            # Configure the onPress event to show the content in tab 4 when
            # it is pressed.
            onPress:
              type: action.set-state
              options:
                state: [email protected]
                value: [email protected]

jig.jigx

Outputs

• The output and input work in conjunction with each other.

• Define outputs in the custom component, then in the jig using the custom component, provide the data/context (input) by referencing the custom-component instanceId.

• An instanceId is required for the custom component that is exposing an output in order to access the output via state.

• The output requires an output-key and a data value that is available in the custom component.

• Accessing outputs uses the format similar to: [email protected].[instanceId].outputs.output-key. Use IntelliSense to assist with configuration.

Examples and code snippets

In this simple example, the custom component is configured with a form in a card component. An output property is added to the custom component. This allows for the data entered into the custom component's form on the jig to be transferred to the title property of the image component on the jig.

Output data to image label

custom-component

type: component.default
componentId: brand-form

# Configure the output value to be accessible outside of the custom component.
outputs:
  brand-label: [email protected]

children:
  - type: component.card
    options:
      children:
        - type: component.form
          instanceId: new-form
          options:
            children:
              - type: component.text-field
                instanceId: company-name
                options:
                  label: Company Name

jig.jigx

See also

• Passing data using inputs

• Passing data using outputs