Skip to main content

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.

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

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

const designer = Designer.create(/* ... */);
// ...
designer.setIsReadonly(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';
    },
  }
};

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';
    },
  }
};

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';
    },
  }
};

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?');
    },
  }
};

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?');
    },
  }
};

Can Unselect Step​

You can prevent a step from being unselected based on your custom logic. When an unselection is blocked, the onStepUnselectionBlocked event is triggered.

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

designer.onStepUnselectionBlocked((targetStepId) => { /* ... */ });

Please note that you should NOT use window.confirm() or other blocking functions inside the canUnselectStep callback, as this callback may be invoked multiple times during drag operations. To handle this correctly, implement your own UI logic to notify the user about any required actions before unselection can proceed. Please check this example.

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,
    // ...
  }
};