Shape Icons In Flow Designer

Last Updated: 06/27/2018 Introduced in Version: 4.0

This tutorial demonstrates how to adjust/design Step Shapes in the HTML Flow Designer in Decisions 4.0. Shapes in the Flow Designer in Decisions 4.0 are customizable to satisfy any designer needs.

Example:

In this example we are going to demonstrate how to customize Step Shapes in Flow Designer.

We begin in the Designer Folder with clicking Create Flow

Then, we Name the Flow and click Ok to proceed to the Flow Designer.

Flow Designer opens with Start and End Step on the work-space. Shapes for these Steps are default.

Note: all Step Shapes modifications that we are going to demonstrate in this tutorial are applicable to any type of Step in Decisions.

First, we select Start Step on the work-space. By dragging selection corners we can adjust the size of the Step Shape.

With Start Step selected on the work-space we may change its color by using Override Color setting in the Common Properties of the Step.

After we picked desirable color, our Step Shape looks as following…

Next, we are going to modify our Shape with Shape Settings for the Step.

First, we pick Shape Type. Each Shape Type may have its sub-types and additional Shape Settings (background color, border color etc.).

Also, we may apply an Image to be our Shape Icon. We pick Image as Shape Type.

Then, in Image settings we check Has Image check-box. Using Image picker we can choose an Image file or provide a URL to our file. In this example we are using URL.

Next, we expand Shape Settings and adjust Background Color and Border Color for our Shape. Click Ok to save and continue.

pickcolors

Our Start Step Shape now looks as following…

startstep

Also, we modified our End Step in the similar manner.

 

Additional Resources