Define the Config Object for the React Parser

This feature is available starting in MicroStrategy 2021 Update 3.

You must define a config object for the React parser to work. A config object is plain JavaScript object.

1. A tagName is required. It specifies which React component you are using.

2. A key is optional. It is used when calling the query and apply functions. A key is necessary if you want something dynamic.

If you want a static component, such as static text, you don't need to specify a key. However, if you want the text to change during run-time, you can specify a key later on. Once a key is specified, the component knows that when it asks fora value, it calls query(key) to get its runtime value. When it needs to write back the value, it calls apply(key, value) to store the value in the backend.

3. children is optional. It is used by the container component. Children of an array are treated as children of the current component.
4. The className is optional. It is used to implement CSS customizations.

Here is an example of a config object:

{
    tagName: "HorizontalLayout",
    className: "background-color-container",
    children: [
        {
            tagName: "Text",
            text: "Background"
        },
        {
            tagName: "ColorPicker",
            key: "backgroundColor",
        }
    ]
}

The code sample above defines a "HorizontalLayout" container, which has a className of "background-color-container" and two children: The first child is a "Text" component, with its text attribute set as "Background". The second child is a "ColorPicker" component, with a key attribute of "backgroundColor". You cannot change value of the "Text" component because it's declared statically, but you can change value of the "ColorPicker". You assigned a key attribute of "backgroundColor" to "ColorPicker". It uses this key to query its value before rendering and calls the apply function using that key when interaction occurs inside.