Simulating Conditions

Part of any complex UI is the conditional logic it uses to present its state to users or to collect and process data from various sources. Data can be produced by user interaction from a variety of inputs, such as buttons and controls, sensor readings from arrays of equipment, or general values received from backend or service APIs.

The Flow Decision component simulates conditions by displaying a list of options you can choose from when you preview the flow. This enables you to prototype complex interactions before you have access to the physical controls, backend, or sensor data that will be required for the production version.

"Flow Decision in Form Editor"

To simulate conditions:

  1. Drag a Flow Decision component from Library > Components Flow View to a flow view in Navigator or Form Editor.
  2. Select the flow item where you want the application to start in Navigator or Form Editor, and then select Flow > Set Flow Start in the context menu.
  3. Create an action area for the component that will trigger the condition and connect it to the flow decision.
  4. Select the flow decision, and then select Connect in the context menu to create connections to the flow items that will open depending on whether the condition is met.
  5. In Properties, Dialog title field, enter a title for the selection dialog that opens when the condition is triggered.
  6. Select a transition line in Navigator or Form Editor and add a descriptive text in the Question field in Properties to represent a choice in the selection dialog.

    "Flow Transition properties"

  7. Press Alt+P to preview the UI.
  8. Select action areas in the preview, double-click events in the event list, or use the keyboard shortcuts to trigger events.

Flow decisions are listed in a dialog where you can select which condition is met to see the results.

"Selection dialog for flow decision"

Flow Decision Properties

You can specify basic properties for a Flow Decision component in the Type and ID fields.

"Flow Decision properties"

In the Dialog title field, enter a title for the selection dialog that opens when the condition is triggered.

You can specify the following properties to change the appearance of the flow decision icon :

  • Select the Show label check box to display the ID of the Flow Decision component in Form Editor.
  • In the Label position field, select the corner of the flow decision icon to place the label in.
  • In the Size field, specify the size of the flow decision icon.
  • In the Radius field, specify the radius of the flow decision icon corners.

You can use the color picker to set the outline and fill color of the flow decision icon.

Available under certain Qt licenses.
Find out more.