Building Apps with Jigx
Logic

State

9min

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. 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 broken into two categories:

  1. 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.
  2. 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 syntax

States vary based on the context in which they are used. Use IntelliSense (ctrl+space) 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

=@ctx.solution.state.

activeItem key now

  • Global variable used throughout a solution.
  • Your variable that can be set and read.

Component (local) State

Syntax

Key

Area

=@ctx.jig.state.

activeItem activeItemId amounts filter isHorizontal isRefreshing isSelectable isSelectActive searchText selected value

  • Applies to a list .
  • The creator configures the state in the YAML.

=@ctx.jigs.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.

=@ctx.component.state.

amount checked selected value

  • State is the variable of or for each component.

=@ctx.components.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.

=@ctx.current.state.

amount checked

  • Applies to a list, list.item, product-item, and stage components. The list's data is an array of records. The =@ctx.current.state is the state of the current object in the array.

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.

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-state action is an easy way 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.

@ctx.solution.state.[key]

solution-state.jigx


Defines the state [key] for that can be read from within the current .

Within the jig

Reads the value in the 's context (the where the expression is used), for example: @ctx.jig.state.[key]

Outside the jig

Reads the value of [key] from outside the current , for example from another by using jigId, for example: @ctx.jigs.[jigId].state.[key]

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 an action to set or reset a state in a solution, this either sets data in the state that can be used throughout the solution in multiple s or cleared from the solution. These actions can be configured under the actions node or under an event node, such as onPress.

Setting a state using an action(set-state)

The basic set-state action code structure is shown below:

set-state-action


See set-state for examples and code-snippets.

Reset a state using an action (reset-state)

The basic reset-state action code structure is shown below:

reset-state-action


Setting a state on an event using an action

You can use the set-state or reset-state action with the following events:

  • onFocus
  • onLoad
  • onPress
  • onRefresh
  • onChange
onFocus-set-state


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

searchText (component level)

searchText

filter and searchText (jig level)

filter searchText

Saving data to a provider

value

Evaluating an amount

amount

Evaluating if an item is selected

checked

Evaluating selected items

selected

Reset a form

reset-state (action)

Set state on an active item in a list when the onPress event executes

set-state (action)

See Also



Updated 11 Sep 2024
Doc contributor
Did this page help you?
Yes
No