Troubleshooting - bsi-software/bsi-cx-design-build GitHub Wiki

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')
  // ...
⚠️ **GitHub.com Fallback** ⚠️