Editing Restrictions

The designer allows you to restrict some editing behaviors.

Example

Check the Editing Restrictions Example.

Readonly Mode

You can set the isReadonly property in the start configuration to true to disable all editing behaviors.

JavaScript

const configuration = {
  isReadonly: true,
  // ...
};

Also, you may change the mode dynamically by calling the setIsReadonly method.

const designer = Designer.create(/* ... */);
// ...
designer.setIsReadonly(false);

React

const [isReadonly, setIsReadonly] = useState(true);

<SequentialWorkflowDesigner ...
  isReadonly={isReadonly} />

You may change the mode by calling the setIsReadonly method.

setIsReadonly(false);

Angular

public readonly isReadonly = true;

<sqd-designer ...
  [isReadonly]="isReadonly">
</sqd-designer>

To change the mode dynamically, you need to set the isReadonly property.

this.isReadonly = false;

Svelte

let isReadonly = true;

<SequentialWorkflowDesigner ...
    isReadonly={isReadonly} />

To change the mode dynamically, you need to set the isReadonly variable.

isReadonly = false;

Is Step Deletable

You can control which step may be deleted. If the step is not deletable, the designer will not show the delete button.

const configuration = {
  steps: {
    isDeletable: (step, parentSequence) => {
      return step.type !== 'someType';
    },
  }
};

Can Delete Step

You can ask a user to confirm the step deletion. If the user cancels the deletion, the designer will not delete the step.

const configuration = {
  steps: {
    canDeleteStep: (step, parentSequence) => {
      return confirm('Are you sure?');
    },
  }
};

Is Step Draggable

You can control which step may be dragged. If the step is not draggable, the designer doesn't allow to move it.

const configuration = {
  steps: {
    isDraggable: (step, parentSequence) => {
      return step.type !== 'someType';
    },
  }
};

Can Insert Step

You can ask a user to confirm the step insertion. If the user cancels the insertion, the designer will not insert the step.

const configuration = {
  steps: {
    canInsertStep: (step, targetSequence, targetIndex) => {
      return confirm('Are you sure?');
    },
  }
};

Can Move Step

You can ask a user to confirm the step moving. If the user cancels the moving, the designer will not move the step.

const configuration = {
  steps: {
    canMoveStep: (sourceSequence, step, targetSequence, targetIndex) => {
      return confirm('Are you sure?');
    },
  }
};

Is Step Duplicable

The designer allows to duplicate a step by clicking the "Duplicate" option in the context menu. By default this option is disabled for all steps. To enable it, you need to pass a function to the isDuplicable property. This function should return true if the step is duplicable.

const configuration = {
  steps: {
    isDuplicable: (step, parentSequence) => {
      return true;
    },
  },
  // ...
};

Is Step Selectable

You can control which step may be selected. If the step is not selectable, the designer doesn't allow to select it.

const configuration = {
  steps: {
    isSelectable: (step, parentSequence) => {
      return step.type !== 'someType';
    },
  }
};

Please note that, if the handler always returns false, the designer will not allow to select any step.

Auto Select

By default, the designer selects a step when you drop it on the canvas. You can disable this behavior by setting the isAutoSelectDisabled property to false.

const configuration = {
  steps: {
    isAutoSelectDisabled: false,
    // ...
  }
};