Configs

• 4 minutes to read

UI Framework config describes components of the editor and the sequence of actions, which the user performs while personalizing print products.

Structure of Configs

Configs are defined in the JSON format and may contain the following objects and properties:

• driver - parameters of the BackOffice driver.
• vars - a container for the data you may want to use in the config.
• logo - a link to an image and URL to go to.
• modals - an array of modal window definitions.
• showSteps - (optional) disables the navigation panel with steps. The default value is true.
• showCustomTopPanel - (optional) hides the navigation panel to display a custom top panel instead. You can define it as topPanel in the steps widget. The default value is false.
• language - the language of the user interface (en, nl, de, fr, ru). You can find all the string resources in locales.json.
• widgets - editor's components.
• steps - a sequence of screens, where the user personalizes and orders print products.
• defaultStep - (optional) parameter containing the name of the step you want to start from. By default, the editor starts from the first step.
• clearDesignOnStep - (optional) a step that activates the initial command of the design-editor widget to reset the design. You can define this property when design-editor appears after the first step that contains a widget for selecting a design (for example, option or gallery).
• displayInPopup - (optional) if true, displays the editor in the pop-up window. The default value is false.
• layout - (optional) if verticalmobile, displays a vertically oriented editor to fit small screens on mobile devices.

Your config may look as follows:

{
  "driver": {
    "backOffice.assetStorageUrl": "https://my-assetstorage.azurewebsites.net/",
    "backOffice.assetProcessorUrl": "https://my-assetprocessor.azurewebsites.net/",
    "backOffice.tenantId": 8,
    "backOffice.token": "eyJhbGc1OiJSUzZ1Ni...."
  },
  "logo": {
    "src": "https://example.com/images/logo.svg",
    "url": "https://example.com/"
  },
  "modals": [
    {
      "name": "manual",
      "header": "User manual",
      "htmlContent": "<iframe src='https://example.com/manual/'></iframe>",
      "styles": { "width": "50%", "height": "50%" }
    }
  ],
  "language": "en",
  "widgets": [
    { "name": "cc", "type": "design-editor", /* other widget properties */ },
    { "name": "approve", "type": "image-carousel", /* other widget properties */ }
  ],
  "steps": [
    /* Step 1 - personalization in the Design Editor. */
    {
      "title": "Personalize", 
      "mainPanel": {
        "name": "cc" /* Places the cc widget on the mainPanel. */
      }, 
      "toolPanel": {
        "name": "options" /* Places the options widget on the toolPanel. */
      }   
    },
    /* Step 2 - the approval of personalization results. */
    { 
      "title": "Approval", 
      "mainPanel": {
        "name": "approve" /* Places the approve widget on the mainPanel. */
      }
    }
  ]
}

Note that the toolPanel is not defined in the second step. This means that nothing will be displayed in the left panel.

If there is only one step, the navigation panel will be hidden. For more details about defining steps, see the Editor Layout topic.

The config may be dynamic, i.e. you can configure how one widget's settings depend on the user's input. For example, you may want to re-load a mockup in Design Editor depending on the option value selected by a user. See the Dynamic Configs guide for more details.

Passing data to the config

It is often necessary to parametrize the config. For example, you may configure the editor to change the background image based on the user's choice in the gallery widget. However, it is unlikely that you want to hardcode a list of backgrounds in the config.

The first approach is to use the ajax widget to fill the gallery with items. This approach is great when you want to update the list depending on the other choices.

However, you may often want to pre-fetch some data and pass it to the config before you initialize it. You can do this using the vars section.

You must add the JSON object describing your data to the vars:

{
    "vars": {
        "bands": [
            {
                "id": 0,
                "name": "The Beatles",
                "gentre": "Rock",
                "thumbnail": "http://example.com/1.jpg"
            },
            {
                "id": 1,
                "name": "Miles Davis Quintet",
                "gentre": "Jazz",
                "thumbnail": "http://example.com/2.jpg"
            }
        ]
    },
    ...
}

Based on this variable, you can write a dynamic config, which creates a proper structure of options.

{
    "widgets": [
        {
            "name": "band-gallery",
            "type": "gallery",
            "params": {
                "items": {
                    "{{#each vars.bands as band}}": {
                        "name": "{{band.id}}",
                        "title": "{{band.name + '(' + band.gentre + ')'}}",
                        "previewUrl": "{{band.thumbnail}}"
                    }
                }
            }
        }
    ]
}

All you need to do to apply another set of data is to modify the vars node of the config before initializing the editor with it.

---

To define configs, you do not need to set only values. You can also use references to values, conditional expressions, loops, and more. Let's learn the syntax with which you can make configs dynamic.