Inputs & outputs (Alpha)

7min
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. 
﻿ 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  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 . 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
jig.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: =@ctx.inputs.tabValue1 != null
          options:
            style:
              flex:
                direction: row
                grow: =@ctx.inputs.stretchTabs = true ? 1:0
              gap: minimal
              padding:
                left: =@ctx.inputs.tabsAlignment = "center" ? "medium":"none"
                right: =@ctx.inputs.tabsAlignment = "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: =@ctx.solution.state.tab = @ctx.inputs.tabValue1 ? "":"medium"
                              value: =@ctx.inputs.tabName1
                              weight: bold
                      
                    - type: component.view
                      options:
                        children: []
                        style:
                          background:
                            color: =@ctx.solution.state.tab = @ctx.inputs.tabValue1 ?
                              "element":"transparent"
                          flex:
                            grow: 1
                          height: 2
                      
                
              - type: component.view
                when: =@ctx.inputs.tabIndicator1 = 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: =@ctx.solution.state.tab
                value: =@ctx.inputs.tabValue1
# Tab 2
# Using the view component creates the layout for the tabs
        - type: component.view
          when: =@ctx.inputs.tabValue2 != null
          options:
            style:
              flex:
                direction: row
              gap: minimal
              padding:
                left: =@ctx.inputs.tabsAlignment = "center" ? "medium":"none"
                right: =@ctx.inputs.tabsAlignment = "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: =@ctx.solution.state.tab = @ctx.inputs.tabValue2 ? "":"medium"
                              value: =@ctx.inputs.tabName2
                              weight: bold

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

              - type: component.view
                when: =@ctx.inputs.tabIndicator2 = 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: =@ctx.solution.state.tab
                value: =@ctx.inputs.tabValue2
# Tab 3
# Using the view component creates the layout for the tabs
        - type: component.view
          when: =@ctx.inputs.tabValue3 != null
          options:
            style:
              flex:
                direction: row
              gap: minimal
              padding:
                left: =@ctx.inputs.tabsAlignment = "center" ? "medium":"none"
                right: =@ctx.inputs.tabsAlignment = "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: =@ctx.solution.state.tab = @ctx.inputs.tabValue3 ? "":"medium"
                              value: =@ctx.inputs.tabName3
                              weight: bold
                            
                      
                    - type: component.view
                      options:
                        children: []
                        style:
                          background:
                            color: =@ctx.solution.state.tab = @ctx.inputs.tabValue3 ?
                              "element":"transparent"
                          flex:
                            grow: 1
                          height: 2
                      
                
              - type: component.view
                when: =@ctx.inputs.tabIndicator3 = 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: =@ctx.solution.state.tab
                value: =@ctx.inputs.tabValue3
              type: action.set-state
# Tab 4
# Using the view component creates the layout for the tabs
        - type: component.view
          when: =@ctx.inputs.tabValue4 != null
          options:
            style:
              flex:
                direction: row
              gap: minimal
              padding:
                left: =@ctx.inputs.tabsAlignment = "center" ? "medium":"none"
                right: =@ctx.inputs.tabsAlignment = "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: =@ctx.solution.state.tab = @ctx.inputs.tabValue4 ? "":"medium"
                              value: =@ctx.inputs.tabName4
                              weight: bold
                            
                      
                    - type: component.view
                      options:
                        children: []
                        style:
                          background:
                            color: =@ctx.solution.state.tab = @ctx.inputs.tabValue4 ?
                              "element":"transparent"
                          flex:
                            grow: 1
                          height: 2

              - type: component.view
                when: =@ctx.inputs.tabIndicator4 = 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: =@ctx.solution.state.tab
                value: =@ctx.inputs.tabValue4
# 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: =@ctx.inputs.tabValue1 != null
          options:
            style:
              flex:
                direction: row
                grow: =@ctx.inputs.stretchTabs = true ? 1:0
              gap: minimal
              padding:
                left: =@ctx.inputs.tabsAlignment = "center" ? "medium":"none"
                right: =@ctx.inputs.tabsAlignment = "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: =@ctx.solution.state.tab = @ctx.inputs.tabValue1 ? "":"medium"
                              value: =@ctx.inputs.tabName1
                              weight: bold
                      
                    - type: component.view
                      options:
                        children: []
                        style:
                          background:
                            color: =@ctx.solution.state.tab = @ctx.inputs.tabValue1 ?
                              "element":"transparent"
                          flex:
                            grow: 1
                          height: 2
                      
                
              - type: component.view
                when: =@ctx.inputs.tabIndicator1 = 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: =@ctx.solution.state.tab
                value: =@ctx.inputs.tabValue1
# Tab 2
# Using the view component creates the layout for the tabs
        - type: component.view
          when: =@ctx.inputs.tabValue2 != null
          options:
            style:
              flex:
                direction: row
              gap: minimal
              padding:
                left: =@ctx.inputs.tabsAlignment = "center" ? "medium":"none"
                right: =@ctx.inputs.tabsAlignment = "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: =@ctx.solution.state.tab = @ctx.inputs.tabValue2 ? "":"medium"
                              value: =@ctx.inputs.tabName2
                              weight: bold

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

              - type: component.view
                when: =@ctx.inputs.tabIndicator2 = 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: =@ctx.solution.state.tab
                value: =@ctx.inputs.tabValue2
# Tab 3
# Using the view component creates the layout for the tabs
        - type: component.view
          when: =@ctx.inputs.tabValue3 != null
          options:
            style:
              flex:
                direction: row
              gap: minimal
              padding:
                left: =@ctx.inputs.tabsAlignment = "center" ? "medium":"none"
                right: =@ctx.inputs.tabsAlignment = "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: =@ctx.solution.state.tab = @ctx.inputs.tabValue3 ? "":"medium"
                              value: =@ctx.inputs.tabName3
                              weight: bold
                            
                      
                    - type: component.view
                      options:
                        children: []
                        style:
                          background:
                            color: =@ctx.solution.state.tab = @ctx.inputs.tabValue3 ?
                              "element":"transparent"
                          flex:
                            grow: 1
                          height: 2
                      
                
              - type: component.view
                when: =@ctx.inputs.tabIndicator3 = 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: =@ctx.solution.state.tab
                value: =@ctx.inputs.tabValue3
              type: action.set-state
# Tab 4
# Using the view component creates the layout for the tabs
        - type: component.view
          when: =@ctx.inputs.tabValue4 != null
          options:
            style:
              flex:
                direction: row
              gap: minimal
              padding:
                left: =@ctx.inputs.tabsAlignment = "center" ? "medium":"none"
                right: =@ctx.inputs.tabsAlignment = "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: =@ctx.solution.state.tab = @ctx.inputs.tabValue4 ? "":"medium"
                              value: =@ctx.inputs.tabName4
                              weight: bold
                            
                      
                    - type: component.view
                      options:
                        children: []
                        style:
                          background:
                            color: =@ctx.solution.state.tab = @ctx.inputs.tabValue4 ?
                              "element":"transparent"
                          flex:
                            grow: 1
                          height: 2

              - type: component.view
                when: =@ctx.inputs.tabIndicator4 = 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: =@ctx.solution.state.tab
                value: =@ctx.inputs.tabValue4
﻿
Outputs
The output and input work in conjunction with each other. 
Define outputs in the custom component, then in the  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:
=@ctx.components.[instanceId].outputs.output-key. Use  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  to be transferred to the title property of the image component on the .  
﻿
Output data to image label
﻿
custom-component
jig.jigx
type: component.default
componentId: brand-form

# Configure the output value to be accessible outside of the custom component.
outputs:
 brand-label: =@ctx.components.company-name.state.value
 
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
type: component.default
componentId: brand-form

# Configure the output value to be accessible outside of the custom component.
outputs:
 brand-label: =@ctx.components.company-name.state.value
 
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
﻿
See also
﻿Passing data using inputs﻿ 
﻿Passing data using outputs﻿ 
﻿

Cards in a list	Ratings	Tags
Cards with charts	Sections	Toggles
Countdown	Stepper
Updated 04 Feb 2025
Did this page help you?
Creating custom components (Alpha)
Widgets
Inputs & outputs (Alpha)

Inputs

﻿Examples and code snippets﻿

Outputs

﻿Examples and code snippets﻿

See also

Examples and code snippets

Examples and code snippets
