Implementing Conditional Navigation

Conditional navigation allows you to implement a custom function that allows you to override navigation behavior between screens.

This procedure gives an example of how you can use conditional navigation to skip a screen.

  1. In the Screen Design page, modify the menu item by adding conditions.
    In this example, two conditions are added to the Previous Expenses menu item.
    Conditional2
  2. Go to the Flow Design page to see the conditional navigation paths in the flow.

    Conditional
  3. In the Custom.js file, add the custom code for conditional navigation.
    //This example demonstrates the conditional navigation functionality for an online request.
    //In this example we skip the list view screen and go directly to the details screen if there is only one item in the list
    function customConditionalNavigation(currentScreenKey, actionName, defaultNextScreen, conditionName, workflowMessage) {
        if ((currentScreenKey === 'Process') && (actionName === 'Previous Expenses')) {
            if (conditionName === 'ONE_ROW') {
                var values = workflowMessage.getValues();
                var m = workflowMessage.serializeToString();
                var expenseTracking = values.getData("ExpenseTracking21View");
                var etList = expenseTracking.getValue();
                var count = etList.length;
                if (count == 1) {
                    var etRow1 = etList[0];
                    workflowMessage.updateValues(etRow1);
                    return true;
                }
            }
            else if (conditionName === 'MANY_ROWS') {
                 return false;  //ie do the normal navigation which is to go to the listview screen
            }
        }
        // default case is to NOT change the flow
        return false;
    }
    
  4. Use the Mobile Workflow Package Generation wizard to re-generate the Mobile Workflow Package with a new workflow_jQueryMobileLookAndFeel.html file that contains the newly added conditional navigations.
  5. Use a browser to debug the code.