📄️ Badges
Badges are small circles or rectangles on the corner of the step component. They are used to display additional information about the step.
📄️ Conditional Placeholders
Placeholders represent locations where a user can place a step and are visible by default. For various reasons, you may want to hide them. You can hide all placeholders or only some of them. Additionally, you can show specific placeholders depending on the type of step being dragged.
📄️ Context Menu
The context menu is a menu that appears when you right-click on a step or in any place of the canvas. It allows you to perform various actions on the step or the canvas.
📄️ Editing Restrictions
The designer allows you to restrict some editing behaviors.
📄️ Editors
The designer doesn't provide editors for steps. Why? Because this part usually is strongly dependent on a project type. So you must create editors by your own and set them in the start configuration.
📄️ Grid
The grid increases the readability of the workflow. It is a background layer that is displayed behind the workflow. By default, the grid is a line grid but the designer supports also another type of grid.
📄️ Internationalization
The Sequential Workflow Designer supports internationalization (i18n). This allows you to translate the user interface into different languages.
📄️ Keyboard Shortcuts
Keyboard shortcuts are a great way to increase the productivity of the users. Currently the Sequential Workflow Designer supports the following keyboard shortcuts:
📄️ Root Component
Currently the Sequential Workflow Designers supports two types of root components.
📄️ Step Icons
Almost all available step components contain a place that shows an icon. The icon of a step depends on the componentType and the type fields.
📄️ Themes
The designer supports two themes: light and dark. If you want to customize the theme check the custom theme article.
📄️ 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.
📄️ Undo / Redo
The designer supports undo/redo operations. By default this feature is disabled.
📄️ Validation
The designer supports the validation of the definition. There are two types of validators: step and root. The step validator is called for each step and the root validator is called for the root of the definition (mainly for root properties). To add validation you need to provide your validators to the validator property of your configuration.
📄️ Wheel Mode
The designer supports different modes of interaction with the diagram by mouse wheel or touchpad.
📄️ Clickable Placeholder
The clickable placeholder works in a very similar way as the default placeholder. The main difference is that it contains a clickable button (with the plus icon). You may handle the click event and create a custom experience with inserting a new step. Your handler will receive the position of the clicked placeholder in the sequence.
📄️ Collapsible Region
The designer allows you to collapse and expand regions. You can collapse and expand regions by clicking on the region header.
📄️ Custom Dragged Component
The designer allows you to customize the component that is being dragged.
📄️ Custom Step Component Wrapper
The designer supports multiple step components. But what if you want to add some additional element to all step components? To not duplicate the code you can write a wrapper for all step components. How the wrapper works? After rendering a step component, the wrapper receives the rendered component. The wrapper can add some additional elements to the rendered component and change the side of the original component.
📄️ Custom Theme
For more advanced use cases, you may need to customize the designer's theme. To do this, you'll need to create a new theme and apply it to the designer. This article is relevant to the designer version 0.15.0 and later.
📄️ Custom Viewport
Not always is the center of the canvas the same as the center of the viewport. If you want to overlay the designer with some layers above, you will need to adjust the default viewport. Also, you may want to center the viewport as the first step after loading the workflow. The designer provides customization options for this behavior.
📄️ Double Click
This feature allows you to handle double clicks on steps. You can use it to open a dialog with the step editor or to perform any other action.
📄️ Extended Control Bar
The extended control bar keeps the default designer buttons and lets you add your own buttons next to them. Use it when you want to keep zoom, undo, redo, delete, and reset view, but also need extra commands in the same bar.
📄️ External Control Bar
If the default control bar is not enough for your needs, you can create your own component outside of the designer.
📄️ External Editor
The default editor can be replaced with your own component outside of the designer.
📄️ External Path Bar
If you are using folders in your flow, then to navigate across them, you need to use the path bar. The default path bar is included with the Pro version of the designer, but you can also create your custom component outside of the designer. By this you can adjust this component to your needs.
📄️ External Toolbox
If the default toolbox is not enough for your needs, you can create your own component outside of the designer.