State

10min

State manages the data within  solutions, s, and components and controls the UI dynamically. The state allows solutions and components to change their output in response to user inputs and actions. Often, the state is used as a global variable that can be used throughout the solution or as a local state used only in that specific  or component.

Examples of using state include:
Displaying a list of items that change based on user interaction.
Handling user inputs in forms, such as text inputs or switches. By storing input values in the state, you can easily control the components and validate user input.
Control the behavior of components, like showing or hiding a component based on a condition, enabling or disabling buttons or fields, and resetting a component's value. 
State is local to the  or component where it is declared; you can share the state across multiple s and their components or use a global state across the entire solution.
State allows you to read and write the state of various data in your solution at runtime.
Whenever working with data, consider the performance impact on the  at runtime. The best practice is to write only the required data in the state and consider using state versus inputs﻿ and outputs﻿.
Using states in  is divided into categories:
Global state - known as solution state in , refers to data that needs to be accessed and updated by multiple components across the app. Effectively managing the global state ensures that all parts of the app that depend on this data are updated consistently. The global/solution state is a variable used throughout the solution.  
Local state - known as component state in , refers to data that is confined to a single component or . This type of state is typically managed within the component itself. The creator can set each component state in the YAML or by user input, such as a text field. The state key options depend on the component.
State navigation allows you to determine the flow of screens and the state of each one in the flow. See Navigation﻿ for more information.
State syntax
States vary based on the context in which they are used. Use IntelliSense in expressions﻿ to determine where you can make use of states.  IntelliSense can assist by directing you to the context tree, showing which states are available for use within the context of the .
Solution (Global) State
Syntax
Key
Area
[email protected]. 
activeItem
key
now
Global variable used throughout a solution.
Your variable that can be set and read. 
Component (local) State
Syntax
Key
Area
[email protected].
activeItem
activeItemId
amounts
filter
isHorizontal
isRefreshing
isSelectable
isSelectActive
searchText
selected
value 
Applies to a list .
The creator configures the state in the YAML. 
[email protected].jigInstanceId.components.componentInstanceId.state.
data
isDirty
isValid
response
Read the state of a component in a specific  using the instanceId of both the  and component.
Referencing components on a composite jig.
[email protected].
amount
checked
selected
value
State is the variable of or for each component.
[email protected].componentInstanceId.state.
data
filter
isValid
isDirty
isPending
searchText
selected
response
value
State of components, using the component's instanceId.
Can use interaction from the user to add a value to the component's state, such as email-field, text-field, or number-field.
[email protected].
amount
checked
Applies to a list, list.item, product-item, and stage components. The list's data is an array of records. The [email protected] is the state of the current object in the array.  
Jig (local) State
Syntax
Key
Area
[email protected]
﻿
Used to push the  instance (state) to the navigation stack. 
How to use State
You can define your solution state to store objects and values temporarily and then read them in multiple places in your solution. These are not stored in any local or remote data store but only in live memory. If you log out your solution state is cleared. 
 Configure the initial solution state in the index.jigx file by providing a State Key with a value. 
You can update the state using the action.set-solution-state action. 
To revert back to the initial state, simply use the action.reset-solution-state action.
Multiple states can be added in index.jigx and initialValues support nested objects. 
To call nested objects in a state expression use [email protected]
Write solution state
Define your state key in the solution, either in a  or in the index.jigx file. The value can be any value or object, and you can access it anywhere within your solution. The set-solution-state﻿  and set-state﻿ action are easy ways to define the solution state.
Read solution state
To access your custom solution state, use the expression path below and replace [key] with your custom solution state key. 
[email protected].[key].
For nested objects use [email protected].
index.jigx
action.set-solution-state (Write)
action.reset-solution-state (Write)
jig-a.jigx
name: Projects
title: Global Projects
category: business      
# Solution state's initial key values.
state:
  project: 
    initialValue: 
       # Nested objects 
       status: "Active"
       team: "Planning team"    
  Billing:
    initialValue: "Monthly" 
name: Projects
title: Global Projects
category: business      
# Solution state's initial key values.
state:
  project: 
    initialValue: 
       # Nested objects 
       status: "Active"
       team: "Planning team"    
  Billing:
    initialValue: "Monthly" 
﻿
Defines the state [key] for  that can be read from within the current .
 Configure the initial  state in the desired  file. 
In any , you can update the state using the action.set-jig-state action.
To revert back to the initial state, simply use the action.reset-jig-state action.
Multiple states can be added and initialValues support nested objects. 
To call nested objects in a state expression use [email protected]
Within the jig
Reads the value in the 's context (the  where the expression is used), for example: @ctx.jig.state.[key]
Define your state key in the  file. The value can be any value or object, and you can access it anywhere within the . The set-jig-state﻿ action is an easy way to define the  state and reset-jig-state﻿ action sets the state back to the initial key values.
jig-initial-state.jigx
action.set-jig-state (write)
action.reset-jig-state (write)
jig-a.jigx (read)
title: Global Inc
description: Welcome to Gobal Inc 
type: jig.default
# Configuer the initial jig state key values.
state:
  predefinedtext:
    initialValue: "Committed to excellence and innovation"
  address:
    initialValue: 
      street: 145 Morrissey Blvd
      city: Boston
      zip code: O2125 
title: Global Inc
description: Welcome to Gobal Inc 
type: jig.default
# Configuer the initial jig state key values.
state:
  predefinedtext:
    initialValue: "Committed to excellence and innovation"
  address:
    initialValue: 
      street: 145 Morrissey Blvd
      city: Boston
      zip code: O2125 
﻿
Define your state [key] for a single component or all components in a . Navigating away from the  clears your component's state as the data is stored in the live memory.
Within the current component
Reads the value of [key] in the current component (the component where the expression is used), for example: @ctx.component.state.[key]
Within all components in the current jig
Reads the value of [key] in the current  and components with instanceId, for example:@ctx.components.[instanceId].state.[key]
Within all jigs and components in the solution
Reads the value of [key] from the available s with jigId and components with instanceId. For example: 
@ctx.jigs.[jigId].components.[instanceId].state.[key]
You can use actions to set or reset a state either in a solution, , or component. These actions can be configured under the actions node or under an event node, such as onPress. 
The following set-state actions are available:
﻿action.set-state﻿ 
action.set-solution-state
action.set-jig-state
action.set-custom-component-state
The following reset-state actions are available:
﻿action.reset-state﻿ 
action.reset-solution-state
action.reset-jig-state
action.reset-custom-component-state
The only difference between these states are the scope where they are used. See the table below.
Action
Solution
Jig
Component
custom component (alpha)
action.set-state
✅
﻿
✅
﻿
action.reset-state
✅
﻿
✅
﻿
action.set-solution-state
✅
✅
﻿
✅
action.reset-solution-state
✅
✅
﻿
✅
action.set-jig-state
﻿
✅
﻿
✅
action.reset-jig-state
﻿
✅
﻿
✅
action.set-custom-component-state
﻿
﻿
﻿
✅
action.reset-custom-component-state
﻿
﻿
﻿
✅
Setting a state using an action (set-states)
The basic set-state actions code structures are shown below:
set-solution-state-action
set-jig-state-action
set-state-action
# Set the solution state keys to new values.
actions:
  - children:
      - type: action.set-solution-state
        options:
          title: Update state
          changes:
            # state key. 
            status: "InActive"
# Set the solution state keys to new values.
actions:
  - children:
      - type: action.set-solution-state
        options:
          title: Update state
          changes:
            # state key. 
            status: "InActive"
﻿
Reset a state using an action (reset-states)
The basic reset-state actions code structures are shown below:
reset-solution-state-action
reset-jig-state-action
reset-state-action
# Reset the solution state keys to the initial values.
actions:
  - children:
      - type: action.set-solution-state
        options:
          title: Update state
          changes:
            status: "InActive"
# Reset the solution state keys to the initial values.
actions:
  - children:
      - type: action.set-solution-state
        options:
          title: Update state
          changes:
            status: "InActive"
﻿
Setting a state on an event using an action
You can use the set-states or reset-states actions with the following events:
onFocus
onLoad
onPress
onRefresh
onChange
onFocus-set-solution-state
onFocus: 
  type: action.set-solution-state
  options:
    changes:
      status: [email protected][0].mottos
onFocus: 
  type: action.set-solution-state
  options:
    changes:
      status: =@ctx.datasources.company[0].mottos
﻿
Examples of state
The table below provides links to various examples of configuring state in the jigx-samples ﻿. 
Scenario
Key
GitHub jigx-samples examples
Set an item to active with onPress
ActiveItemId
﻿List with active items﻿
searchText (component level)
searchText
﻿Dropdown with search 
filter and searchText (jig level)
filter
searchText
﻿List with filter and search 
Saving data to a provider
value
﻿Update service form﻿
Evaluating an amount 
amount
﻿Product item maximum tag﻿
Evaluating if an item is selected
checked
﻿Highlight selected list of cleaning services﻿
Evaluating selected items
selected
﻿Evaluate progress to show helper and error text  
Reset a form 
reset-state (action)
﻿Reset a form﻿
Set state on an active item in a list when the onPress event executes
set-state (action)
﻿Color a choosen item when pressing on an item in a list﻿
See Also
﻿set-state﻿﻿
﻿reset-state﻿﻿
﻿

Syntax	Key	Area
[email protected].	activeItem key now	Global variable used throughout a solution. Your variable that can be set and read.

Syntax	Key	Area
[email protected].	activeItem activeItemId amounts filter isHorizontal isRefreshing isSelectable isSelectActive searchText selected value	Applies to a list . The creator configures the state in the YAML.
[email protected].jigInstanceId.components.componentInstanceId.state.	data isDirty isValid response	Read the state of a component in a specific using the instanceId of both the and component. Referencing components on a composite jig.
[email protected].	amount checked selected value	State is the variable of or for each component.
[email protected].componentInstanceId.state.	data filter isValid isDirty isPending searchText selected response value	State of components, using the component's instanceId. Can use interaction from the user to add a value to the component's state, such as email-field, text-field, or number-field.
[email protected].	amount checked	Applies to a list, list.item, product-item, and stage components. The list's data is an array of records. The [email protected] is the state of the current object in the array.

Syntax	Key	Area
[email protected]		Used to push the instance (state) to the navigation stack.

Action	Solution	Jig	Component	custom component (alpha)
action.set-state	✅		✅
action.reset-state	✅		✅
action.set-solution-state	✅	✅		✅
action.reset-solution-state	✅	✅		✅
action.set-jig-state		✅		✅
action.reset-jig-state		✅		✅
action.set-custom-component-state				✅
action.reset-custom-component-state				✅

Scenario	Key	GitHub jigx-samples examples
Set an item to active with onPress	ActiveItemId	List with active items
searchText (component level)	searchText	Dropdown with search
filter and searchText (jig level)	filter searchText	List with filter and search
Saving data to a provider	value	Update service form
Evaluating an amount	amount	Product item maximum tag
Evaluating if an item is selected	checked	Highlight selected list of cleaning services
Evaluating selected items	selected	Evaluate progress to show helper and error text
Reset a form	reset-state (action)	Reset a form
Set state on an active item in a list when the onPress event executes	set-state (action)	Color a choosen item when pressing on an item in a list

Expressions - cheatsheet

Navigation

State

State syntax

Solution (Global) State

Component (local) State

Jig (local) State

How to use State

Solution state (global read and write state)

Write solution state

Read solution state

Jig state (read and write state)

Within the jig

Component state (read state)

Within the current component

Within all components in the current jig

Within all jigs and components in the solution

Action state (write state)

Setting a state using an action (set-states)

Reset a state using an action (reset-states)

Setting a state on an event using an action

Examples of state

See Also