Format

• Last updated on June 24, 2024
• •
• 2-3 minutes to read

Workflow Elements is represented by a JSON file that consists of one or more Workflow Element Configurations. Each Workflow Element Configuration corresponds to one component like the Handy Editor, CC Options or other supported element.

Single Workflow Element Configuration

Each workflow element description is represented by the following object:

{
   "configVersion": 2,
   "component": "handy-editor",
   "tagName": "au-handy-editor",
   "settings": { ... },
   "resources": { ... } 
}

Let's describe these properties.

configVersion

This version specifies a protocol of initializing the element. You can consider this protocol as a structure of the configuration.

This field is used for compatibility with newer versions of the config in the elements that where implemented before introducing Workflow Elements or when a version with breaking changes is released. If this field is not specified, such components will assume that the config version is 1.

You can find a configVersion for a specific Workflow Element in its reference.

component

The component name, for example, handy-editor or simple-editor. You can find the component names in the reference of the corresponding Workflow Element.

tagName

The name of the HTML container that you are using for this Web component. You can find the tag names in the reference of the corresponding Workflow Element.

settings

The JSON structure of the Workflow Element settings. It's a set of feature flags or configuration that change the component behavior.

Settings are divided into sections. Each section controls some aspect of a component functionality. For example, if we consider the Handy Editor, it may be an uploader or image gallery configuration.

resources

The JSON structure of the auxiliary data for this element. Unlike settings, resources don't change the element behavior, they rather supplement the input data.

For example, if we consider the Handy Editor, the resource can be a root folder name for the image gallery. It does not change the behavior of the gallery; it just specifies which data to load to the gallery viewer. In a contrast, a toggle which turns on/off the captions or enables a support of subfolders changes the way how the element works, and hence it would be a part of settings.

Multiple Workflow Elements

Your workflow file would work even if you inserted a single Workflow Element Configuration. However, if you need to configure several elements, for example, the options component and the editor, you may just add them as an array:

[
    {
        "configVersion": 2,
        "component": "handy-editor",
        "tagName": "au-handy-editor",
        "settings": {},
        "resources": {}
    },
    {
        "configVersion": 2,
        "component": "cc-options",
        "tagName": "au-cc-options",
        "settings": {},
        "resources": {}
    }
]

They may go in any order. The integration code should locate the necessary component and use the appropriate Workflow Element Configuration when initializing it.

When using the Preview button in your Customer's Canvas tenant, only the first description will be loaded to test the workflow file with the product. That's why it is recommended to put the editor element first.

Note, if the integration code does not support certain elements, it won't load. You can refer to the team who implemented the integration for the details which elements are supported.