component-state (set & reset)

Use actions to set or reset component state. Component state belongs to a specific component instance, such as a form, field, list, or picker. It lets you control UI behavior, preserve values, and reset component data when a screen or workflow starts over.

The set-state action updates a specific component state key by referencing its state path. The reset-component-state action resets component state. You can reset all component instances, or only selected instanceIds.

Refer to state for more information on the available state options and how they work.

Configuration options

A set-state or reset-component-state action can be configured in various ways, either by using an event or an action button to trigger the change:

• onFocus — executes the action when the screen gains focus.

• onRefresh — executes the action when the screen is refreshed.

• As the main action on the jig, and when you press the action, the set-state or reset-component-state action will be executed.

Some properties are common to all actions, see Common action properties for the list of actions and their configuration options.

Set component state
state	Reference the component state key you want to update, for example =@ctx.components.notes.state.value.
value	Provide the new value for the component state using an expression, text, input, or datasource value.
title	Provide the action button with a title, for example, Apply default value.

Reset component state
instanceIds	Optional list of component instanceId values to reset. Omit this property to reset all components in the selected scope.
title	Provide the action button with a title, for example, Reset screen state.

Other options
icon	Select an icon to display when the action is configured as the secondary button or in a header action.
isHidden	false hides the action button, true shows the action button. The default setting is true.
style	isDanger - Styles the action button in red or your brand's designated danger color. isDisabled - Displays the action button as greyed out. isPrimary - Styles the action button in blue or your brand's designated primary color. isSecondary - Sets the action as a secondary button, accessible via the ellipsis. The icon property can be used when the action button is displayed as a secondary button.

reset-component-state supports two reset patterns:

• Omit instanceIds to reset all component instances in the selected scope.

• Provide instanceIds to reset only selected components in that scope.

How to configure component state

1

Add an instanceId to the component whose state you want to reference or reset.

2

Use action.set-state to update a specific component state key, such as value, data, or another supported state property.

3

Use action.reset-component-state to reset all components in a scope, or only selected instanceIds.

Examples and code snippets

This example demonstrates how to reset component state.

Reset saved product selectors This action uses action.reset-component-state with two instanceIds.

Reset screen components This action uses action.reset-component-state. Because instanceIds is omitted, all components on the screen are reset.

This approach gives you granular reset behavior. You can reset one component, a selected group of components, or every component in the jig.

Reset component state

product-selection.jigx

title: Product selection
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1556740749-887f6717d7e4?w=400&auto=format&fit=crop&q=60
# Define the jig states
state:
  note:
    initialValue: " Reminder, safety first "
  amount:
    initialValue: 1
 # Reset the component's state to their initial value
 onFocus:
  type: action.reset-component-state
  # Changes omitted = reset all
  options: {}
onRefresh:
  type: action.reset-component-state
  # Changes omitted = reset all
  options: {}   

children:
  - type: component.section
    options:
      title:
        text: Product selectors
        fontSize: medium
        isBold: true
        isSubtle: false
      children:
        # These selectors are solution-scoped.
        - type: component.text-field
          instanceId: product-1
          options:
            label: Product 1
            initialValue: =@ctx.solution.state.product1
        - type: component.text-field
          instanceId: product-2
          options:
            label: Product 2
            initialValue: =@ctx.solution.state.product2

        # This field uses the default jig scope.
        - type: component.text-field
          instanceId: notes
          options:
            label: Notes
            isMultiline: true
            helperText: This field is jig-scoped.
            value: =@ctx.jig.state.note
        - type: component.amount-control
          instanceId: amountID
          options:
            maximum: 5

actions:
  - numberOfVisibleActions: 2
    children:
      # Reset only selected components.
      - type: action.reset-component-state
        options:
          title: Reset saved products
          instanceIds:
            - product-1
            - product-2

      # Reset all components on this screen.
      - type: action.reset-component-state
        options:
          title: Reset All 

datasource

index.jigx

Considerations

• action.set-state updates a specific component state path. Use the exact component state reference, for example =@ctx.components.notes.state.value.

• instanceIds is optional. Omit it to reset all component instances in the selected scope.

• For resetting solution state keys, use solution-state (set & reset).

See also

• jig-state (set & reset)

• solution-state (set & reset)

• reset-state