Top
Branching in a Walkthrough
  • 1 minute to read
  • Print
  • Dark
    Light

Branching in a Walkthrough

  • Print
  • Dark
    Light

Branching is a way to redirect a particular Whatfix walkthrough to any step (instead of the next) of another (or same) walkthrough based on an user interaction, variables or conditions on the page.

Here's an example of how Whatfix Branching can work for you.

You have created a walkthrough that explains the User Dashboard of your web application. The walkthrough explains the multiple parts of your User Dashboard as the user hovers the mouse over each tooltip. Branching can be set up from this walkthrough to specific walkthroughs created to explain the separate parts on the dashboard.

Branching requires:

  • Condition (which must be evaluated to " true")
  • Target Walkthrough (and a step of the walkthrough to branch to)
    • When selecting a target walkthrough, the user is presented with a dialog listing all available walkthroughs in the account
    • A step can have multiple branches. The first branch whose conditions evaluate to true is selected.

    branching_ui.png

    Commonly used conditions when configuring branching rules are explained below.

    ConditionDescription
    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 only if it doesn't slow 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 ElementThis 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.

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

    Element CSS Selector/ JQueryYour 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.

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

    Supported Operators

    OperatorDescription
    EqualsFor exact match
    Not EqualsDoesn't equal the value
    ContainsSetvalue is present anywhere in the value of the condition. (Check for strings)
    Not ContainsSetvalue is not present anywhere in the value of the condition
    Starts WithSetvalue is at the beginning of the value of the condition
    Ends WithSetvalue is at the end of the value of the condition
    ExistsSetvalue is available (or true)
    Not ExistsSetvalue is not available (or false)
  1. Note
    • If you have created walkthroughs 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 your CSM 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. More details can be found     here    . We recommend reaching out to your CSM or Account Executive for these customizations.

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