Troubleshooting

This chapter should help you to identify and solve common problems with the design build. Make sure you consulted this guide first, before you try to find help elsewhere.

Feature Matrix

The following feature matrix should give a quick overview about BSI CX and the available features:

	Landingpages	E-Mails	Websites	Style Configs	Editor Configs	Format
Studio 1.0	yes	yes	no	yes	no	legacy
Studio 1.1	yes	yes	no	yes	no	legacy
Studio 1.2	yes	yes	no	yes	yes	legacy
BSI CX 1.3	yes	yes	yes	yes	yes	legacy*
BSI CX 22.0	yes	yes	yes	yes	yes	JSON**

* JSON schema version 1.0 is used for websites.
** Upload of designs in the legacy format still supported.

Circular Dependencies

Imagine you have two content elements named one-column and two-column. Each content element has at least one dropzone. You want to allow the content editor to place the one-column element inside a two-column element's dropzone and vice versa. This means you must deal with circular dependencies when specify this structure. Here is one possible solution:

const {cx, Icon} = require('@bsi-cx/design-build');

const element = cx.contentElement;

module.exports = element;

element.withElementId('one-column')
  .withIcon(Icon.ONE_COLUMN)
  .withLabel('1 Column')
  .withFile(require('./template.twig'))
  .withDropzones(
    cx.dropzone
      .withDropzone('b6608fe9-4815-4ef1-a118-6e945ead513f')
      .withAllowedElements(
        require('../two-column')));

const {cx, Icon} = require('@bsi-cx/design-build');

const element = cx.contentElement;

module.exports = element;

element.withElementId('two-column')
  .withIcon(Icon.TWO_COLUMN)
  .withLabel('2 Columns')
  .withFile(require('./template.twig'))
  .withDropzones(
    cx.dropzone
      .withDropzone('20816df1-f8c0-47d1-94a1-1cd124c2b348')
      .withAllowedElements(
        require('../one-column')),
    cx.dropzone
      .withDropzone('5971732b-bf41-493d-a678-0fce1a2b5771')
      .withAllowedElements(
        require('../one-column')));

The trick is to export the unspecified content element object as early as possible and then finish the specification afterwards.

Preview Image

If CX version 22.0.48 or older is in use, the path to the preview image of a design is not validated correctly when uploading to CX. This issue occurs when the path to the preview image in design.js is specified in the following way:

// design.js

const {cx, Locale} = require('@bsi-cx/design-build');

module.exports = cx.design
  // ...
  .withPreviewImage(require('./preview.png'))
  // ...

To avoid this, the following workaround can be used:

In webpack.config.js copy the preview image to a path without ./ in the beginning of the path.

// webpack.config.js

const {BuildConfig, WebpackConfigBuilder, Version, DesignType, ModuleConfig} = require('@bsi-cx/design-build');

module.exports = WebpackConfigBuilder.fromConfigs(
    new BuildConfig()
    // ...
    .withAdditionalFilesToCopy({
        from: path.resolve(
            __dirname,
            'templates',
            'landingpage',
            'preview.png'
        ),
        to: 'static/preview.png',
     })
     // ...

In design.js adjust the path without require() as follows:

// design.js

const {cx, Locale} = require('@bsi-cx/design-build');

module.exports = cx.design
  // ...
  .withPreviewImage('static/preview.png')
  // ...