Toolbox

The toolbox allows a user to drag new steps into the designer. This is source of new steps, so you need to pass a list of possible new steps to the designer. New steps are divided into groups to make it easier for a user to find a step.

Example

Check the Live Testing Example.

To configure the toolbox you need to set the toolbox property of the start configuration.

const configuration = {
  toolbox: {
    groups: [
      {
        name: 'Group 1',
        steps: [
          {
            componentType: 'task',
            type: 'sendEmail',
            name: 'Save e-mail',
            properties: { /* ... */ },
          },
          // ...
        ],
      },
      {
        name: 'Group 2',
        steps: [
          // ..
        ],
      },
    ],
  },
  // ...
};

Hide Toolbox

If you don't need the toolbox you can hide it by setting the toolbox property to false.

const configuration = {
  toolbox: false,
  // ...
}

Change Toolbox Width

The easiest way to change the width of the toolbox is to override the default CSS. The following option works from version 0.23.0 onward.

.sqd-toolbox { width: 170px !important; }