UI JSON variables

Variables in a schema serve as a repository for grouped values, enabling organized and efficient data management. For instance, if you’re dealing with multiple translations, variables can be centrally defined and utilized within schema operations.

In the schema, variables are set up at the root level under a property named “variables”. This property acts as a dictionary, adaptable in complexity to suit various needs. You have the freedom to structure it simply, as a straightforward list, or more intricately, by categorizing different types of variables.

When accessing these variables, a unique approach is employed. The term “variables” is not used in the access path. Instead, an “@” symbol is utilized to signify a path leading to a schema variable. This notation implies that the path begins at the “variables” object, streamlining the reference process within the schema.

{
    "variables": {
        "translations": {
            "person": {
                "firstName": "First Name",
                "lastName": "Last Name",
                "age": "Age"
            }
        }
    },
    
    "body": { ... }
}

To retrieve the translation for ‘firstName’, you would use the path "@translations.person.firstName". This notation allows variables to be effectively utilized as property values within schema definitions.

{
    "variables": {
        "translations": {
            "person": {
                "firstName": "First Name",
                "lastName": "Last Name",
                "age": "Age"
            }
        }
    },
    
    "body": { 
        "elements": [
            {
                "element": "div",
                "content": "@translations.person.firstName"
            }        
        ]    
    }
}

The system actionsetVariable” can be used to modify variables.

{
    "variables": {
        "translations": {
            "person": {
                "firstName": "First Name",
                ...
            },
            "buttons": {
                "changeFirstName": "Change First Name"
            }
        }
    },
    
    "actions": [
        {
            "id": "changeFirstName",
            "action": "setVariable",
            "parameters": {
                "name": "translations.person.firstName",
                "value": "Your Name"
            }
        }
    ],
    
    "body": { 
        "elements": [
            {
                "id": "btnChangeFirstName",
                "element": "button",
                "title": "@translations.buttons.changeFirstName",
                "action": "changeFirstName"
            }        
        ]    
    }
}