Toolbar

The toolbar 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 toolbar you need to set the toolbar property of the start configuration.

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

Hide toolbar

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

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