Dynamic component list

The dynamic themes approach supports theme-dependent lists of components. The components you define with this approach appear in eWizard Editor, depending on a theme selected when creating a content item based on your dynamic template.

Define theme-based components

To define theme components, do the following:

1. Add required components to your project.

2. Specify the components for corresponding themes in ./common/components/components-themes.json of your project. This way, you're setting up components that to be displayed on the Components tab in eWizard Editor based on the selected theme.

/* ./common/components/components-themes.json */
{
  "themes": {
    /* Your theme name */
    "aethercare": {
      "components": [
        {
          "id": "wiz-text",
          "name": "Therapy notes"
        }
      ]
    },
    "mediplus": {
      "components": [
        {
          "id": "wiz-title",
          "name": "Evidence title"
        },
        {
          "id": "wiz-image",
          "name": "Efficacy graph"
        }
      ]
    }
  }
}

Make sure to provide both fields—id and name—for every component you need to be displayed per theme:

• id: A string identifier for the component (e.g., wiz-text)

• name: The display name shown in eWizard Editor (e.g., Therapy notes)

  Field priority

  The name field value overrides the component name defined in the components.json file when displayed in eWizard Editor.

With this configuration, eWizard Editor will display components as follows:

• The Therapy notes (wiz-text) components if AetherCare is selected as the content item's theme in eWizard.
• The Evidence title (wiz-title) and Efficacy graph (wiz-image) components if MediPlus is selected as the content item's theme in eWizard.

3. For local development, set your required theme as current in your project's settings.json. With it, your theme-specific components become available in development builds:

/* settings.json */
{
  "theme": {
    "default": "aethercare",
    "current": "mediplus"
  }
}

Fallback components

eWizard Editor displays all components listed in components.json as a fallback under the following conditions:

• The components-themes.json file is missing in your project's ./common/components/ folder
• The current theme value in settings.json doesn't match any theme defined in ./common/components/components-themes.json