State
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.
Using states in is broken into two 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.
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 .
Syntax | Key | Area |
---|---|---|
=@ctx.solution.state. | activeItem key now |
|
Syntax | Key | Area |
---|---|---|
=@ctx.jig.state. | activeItem activeItemId amounts filter isHorizontal isRefreshing isSelectable isSelectActive searchText selected value |
|
=@ctx.jigs.jigInstanceId.components.componentInstanceId.state. | data isDirty isValid response |
|
=@ctx.component.state. | amount checked selected value |
|
=@ctx.components.componentInstanceId.state. | data filter isValid isDirty isPending searchText selected response value |
|
=@ctx.current.state. | amount checked |
|
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) |