Using the Loop Component to Navigate Upwards

Introduction

We are often asked how to use the Loop component to repeat the options in a menu, or navigate to an upper level menu. Creating such a Call Flow with the 3CX Call Flow Designer is quite simple, although some considerations should be kept in mind.

💡 Tip: The project for this example application is available via the CFD Demos GitHub page, and is installed along with the 3CX Call Flow Designer in your Windows user documents folder, i.e. “C:\Users\YourUsername\Documents\3CX Call Flow Designer Demos”.

For this demonstration, we will create an application with 2-level menus, represented in the following tree:

Step 1: Create the Project

First, we need to create a new project. Open the CFD and go to “File” > “New” > “Callflow Project”, select the folder where you want to save it, and enter a name for the project, e.g. “LoopMenuDemo”.

Step 2: Add the Menu component for the Main Menu

Let’s add a Menu component and configure the options we need:

1. Drag a “Menu” component from the toolbox, and drop it into the design surface of the “Main” callflow. Then select the component added, go to the “Properties Window” and rename it to “MainMenu”.

2. Double-click on the “Menu” component to configure these properties:

• “Initial Prompts” - configure with a WAV file inviting the user to select an option, e.g. “This is the Main Menu. To play a message press 1, to repeat this menu press 2, to go to a sub menu press 3”. As part of the prompt, we’re explaining that we’re on the main menu, so it’s clear where we are while testing.
• “Subsequent Prompts” - set a WAV file that gives more detailed information on what the user needs to enter, as this message is only played when the user entered invalid or no digits. E.g. “This is the Main Menu. Please enter a valid option. To play a message press 1, to repeat this menu press 2, to go to a sub menu press 3”.
• “Timeout Prompts” - set a WAV file that explains that no digit was detected, e.g. “Sorry, we didn’t receive any digit”.
• “Invalid Digit Prompts” - use a WAV file that explains that the digit entered is invalid, e.g. “Sorry, the selected option is not valid”.
• Configure the remaining options as in the above example.

3. Press “OK” to save the changes.

Step 3: Add the Loop component around the menu

In a CFD callflow, components are executed from top to bottom. The only exception is the Loop component, which executes all the components inside the loop while a condition is met. Then, the logic we need to apply here is the following:

1. Define a boolean variable, name it “ContinueLoopingMainMenu”, and set the initial value to true.

2. Set the Loop Condition to this variable, so the first time it is evaluated, the condition is met, and the components inside the Loop are executed.

3. Change the boolean variable to false.
4. Use the Menu component to offer some options.

5. When the user selects the option to repeat the menu, set the boolean variable to true again.

In this way, when the option to repeat the menu is selected, the variable will be set to true, and when the Loop evaluates the condition again, it will continue iterating.

Step 4: Repeat the procedure for the sub menu

For the sub menu we will follow a very similar procedure:

1. Define a boolean variable, name it “ContinueLoopingSubMenu”, and set the initial value to true. Also, use the Assign a Variable component to set this value to true, so we’re sure that the variable is true before entering the loop, even after sub menu iterations.

2. Add a second Loop component inside the Option 3 branch, and set the Loop Condition to this variable, so the first time it is evaluated, the condition is met, and the components inside the Loop are executed.
3. Change the boolean variable to false.
4. Add a second Menu component for the Sub Menu, with 3 options enabled, and configure the prompts for it.
5. When the user selects the option to repeat the sub menu, set the boolean variable “ContinueLoopingSubMenu” to true again.
6. When the user selects the option to go back to the main menu, set the boolean variable “ContinueLoopingMainMenu” to true.

This is how the callflow should like like after doing the changes mentioned above:

Step 5: Build and Deploy to 3CX Phone System

The project is ready to build and upload to our 3CX Phone System server, with these steps:

1. Select “Build” > “Build All” and the CFD generates the file “LoopMenuDemo.zip”.
2. Go to the “3CX Management Console” > “Advanced” > “Call Flow Apps” > “Add/Update”, and upload the ZIP file generated by the CFD in the previous step.
3. The Call Flow app is ready to use. Make a call to the application, select the options and navigate through these 2 nested menus.

See Also

• Learn more about CFD components.
• Automated Telephone Ordering Voice app with CRM integration via the 3CX API.
• Sending emails from a CFD voice app.
• Routing Calls Based on the Time of Day.
• Using the Authentication Component to Validate Customers.
• Using the Credit Card Component.
• Text to Speech and Speech to Text with the 3CX Call Flow Designer.
• Registering and making callbacks
• Using the survey component
• Using the CRM Lookup component
• See how to integrate your PBX with a CRM via the 3CX API.

Last Updated
This document was last updated on 29th April 2021
https://www.3cx.com/docs/cfd-navigate-upwards/