Using the onStateChange Event

The onStateChange event is a powerful feature that allows you to trigger actions based on changes in the state of a specific page. This guide will provide you with an overview of what the onStateChange event is, how to use it effectively, and important considerations to keep in mind.

What is the onStateChange Event?

The onStateChange event is a type of event that gets triggered when the state of a page changes. It enables you to define actions or operations based on the updated state, allowing you to dynamically respond to user interactions and update the UI accordingly.

How to Use the onStateChange Event

1. Define the onStateChange Object: Create an onStateChange object that encapsulates the watchTarget and onChange actions. The onStateChange object should be separate from other events. This ensures that the onStateChange event is properly defined and isolated.

2. Identify the Watch Target: Determine the specific state property that you want to monitor for changes. In the given JSON example, the watchTarget is the “code” property.

3. Define the onChange Action: Specify the actions that should be performed when the watch target undergoes a change. In the provided JSON, the onChange action checks if the value of “id” is greater than 0. If it is, it sets the “visible” property of “newTab1” and “newTab2” to true, making the tabs appear on the page. If the condition is not met, the “visible” property of the tabs is set to false, hiding them.

4. Handle Alternate Scenarios: Consider any alternate scenarios or conditions that may arise in relation to the watch target. In the JSON example, the “else” block handles the scenario when the “id” value is not greater than 0. It sets the “visible” property of the tabs to false, ensuring they are hidden.

Example JSON

Here’s an example of how the onStateChange event can be used in JSON:

{
  "onStateChange": [
    {
    "watchTarget": "code",
    "onChange": [
      {
        "if": {
          "gt": [
            {
              "get": {
                "state": "id"
              }
            },
            {
              "string": {
                "value": "0"
              }
            }
          ],
          "then": [
            {
              "set": {
                "properties": {
                  "newTab1": {
                    "title": "New Tab 1",
                    "visible": true
                  },
                  "newTab2": {
                    "title": "New Tab 2",
                    "visible": true
                  }
                }
              }
            }
          ],
          "else": [
            {
              "set": {
                "properties": {
                  "newTab1": {
                    "visible": false
                  },
                  "newTab2": {
                    "visible": false
                  }
                }
              }
            }
          ]
        }
      }
    ]
  }
  ]
},

In this example, the onStateChange event is defined within the “events” section. It specifies the watch target as the “code” property. When the “id” property changes, the onChange action is triggered. If the condition is met (id > 0), the tabs with IDs “newTab1” and “newTab2” are made visible. If the condition is not met, the tabs are hidden.

The onStateChange event allows you to dynamically respond to changes in the state of a page. By utilising this event effectively, you can update the UI, trigger actions, and create interactive user experiences. By understanding how to define the watch target, specify the onChange action, and handle alternate scenarios, you can make the most of the onStateChange event in your JSON-based applications.