Branching in a Flow

1 minute to read

Print
Dark

Light

Branching requires:

Condition (which must be evaluated to " true")

Target Flow (and a step of the Flow to branch to)

your title goes here

When selecting a target Flow, the user is presented with a dialog listing all available Flows in the account
A step can have multiple branches. The first branch whose conditions evaluate to true is selected.

Commonly used conditions when configuring branching rules are explained below.

Condition	Description
Other Element	If you want to identify a page based on the presence of a particular element (other than the one you have selected) on your web page, you can use this condition. The values passed to this condition are CSS selectors like #ID, .class or Jquery. Note: Use this condition only if it doesn't slow down your application.
Window Variable	For advanced customization, you can choose to identify a page using the value of a particular Javascript global variable. Example: If you want to check user . role='admin', you can set the condition. You can also use this option to perform comparison options as below: Greater than Less than Date Greater than Date Less than Note: You don't need to add a window at the start for window variables.
Action Element	This is the element that the user clicks to decide which branch to take. These are typically buttons or tabs that do not have any options to choose from. Ensure that when selecting an action element as a branching rule, the step completion is set to on selected element.
Action Element Text	This is the text that is displayed on the Action Element that is selected above.
Element CSS Selector/ JQuery	Your application uses unique IDs for some elements on the page. This is used when your element is selected from a list of options. For example, a drop-down menu. This lets you provide your own CSS selector identifier for the element .Sample values #ID_ELEMENT .CLASSNAMEinput [title="Search"] $ ("#ID")
Element Text	This is the text that is displayed on the Element selector that is selected above. If your application supports multiple languages, you can choose "is one of" option and add the name with a comma (,) as a delimiter. Note: The value is case sensitive.

Condition

Description

Other Element

If you want to identify a page based on the presence of a particular element (other than the one you have selected) on your web page, you can use this condition. The values passed to this condition are CSS selectors like #ID, .class or Jquery.

Note: Use this condition only if it doesn't slow down your application.

Window Variable

For advanced customization, you can choose to identify a page using the value of a particular Javascript global variable.

Example: If you want to check user . role='admin', you can set the condition.

You can also use this option to perform comparison options as below:

Greater than
Less than
Date Greater than
Date Less than

Note: You don't need to add a window at the start for window variables.

Action Element

This is the element that the user clicks to decide which branch to take. These are typically buttons or tabs that do not have any options to choose from.
Ensure that when selecting an action element as a branching rule, the step completion is set to on selected element.

Action Element Text

This is the text that is displayed on the Action Element that is selected above.

Element CSS Selector/ JQuery

Your application uses unique IDs for some elements on the page. This is used when your element is selected from a list of options. For example, a drop-down menu. This lets you provide your own CSS selector identifier for the element .Sample values

#ID_ELEMENT .CLASSNAMEinput [title="Search"]

$ ("#ID")

Element Text

This is the text that is displayed on the Element selector that is selected above.

If your application supports multiple languages, you can choose "is one of" option and add the name with a comma (,) as a delimiter.

Note: The value is case sensitive.

your title goes here

When you select the Action element or Other element on page as the condition, you do not need to find the code. Instead, use the Selector from the drop-down menu to simply click the element in your application and select the necessary value.
When you select Action Element as the condition, the Step Completion Rule must always be On click of selected element only.

For a better understanding of CSS selectors, see CSS Selectors.

Supported Operators

Operator	Description
Equals	For exact match
Not Equals	Doesn't equal the value
Contains	Setvalue is present anywhere in the value of the condition. (Check for strings)
Not Contains	Setvalue is not present anywhere in the value of the condition
Starts With	Setvalue is at the beginning of the value of the condition
Ends With	Setvalue is at the end of the value of the condition
Exists	Setvalue is available (or true)
Not Exists	Setvalue is not available (or false)

Operator

Description

Equals

For exact match

Not Equals

Doesn't equal the value

Contains

Setvalue is present anywhere in the value of the condition. (Check for strings)

Not Contains

Setvalue is not present anywhere in the value of the condition

Starts With

Setvalue is at the beginning of the value of the condition

Ends With

Setvalue is at the end of the value of the condition

Exists

Setvalue is available (or true)

Not Exists

Setvalue is not available (or false)

Note

If you have created Flows inside iframes then the window variable must be pointed to the respective frame. You may use window . frames
If you are adding multiple conditions, then the tip will show up only if all the conditions are true. (Similar to Boolean AND)
jQuery CSS selector options will always show in the UI, however, it is supported ONLY for applications that have jQuery in the underlying platform
For window variables:
Greater and less than only accept numerical values
For date greater than/less than the default format is “MM/DD/YYYY”. The format can be changed to match your system date format. Contact support@whatfix.com for the same.

Note

Here is a great resource to learn more about JQuery Selectors and CSS selectors .

For advanced customizations, branching can be achieved by adding custom code. Contact support@whatfix.com to know more about advanced customizations.

Note

Incomplete branches are not evaluated.
If you don't have the Flow that you want to skip to, you can add the conditions while creating the Flow and add the Flow later.
A step can have multiple branches. The first branch whose conditions are evaluated as true is selected.

Branching in a Flow

Branching requires:

Supported Operators

Related Articles