VOGO Voice – Knowledge Base

Data Branching

Estimated reading time: 6 min

In this in-depth tutorial, you will learn how to utilize the Data Branching component to branch the interaction flow based on the number of results. The core functionality of the Data Branching component emulates the None One Many concept. The illustration put to use in this tutorial serves as a resource to showcase the step-by-step process of rendering the information of the number of students belonging to selected classes. The comprehensive instructions combined with highlighted screenshots will offer the required direction needed to follow with ease the task of demonstrating the three varied situations, namely None, One, and Many

Prerequisites

  • VOGO Voice account: https://www.vogovoice.com/
  • Access rights to the Interactions section.
  • Access rights to the Interaction builder platform.

Create a Custom Slot

Make a custom slot named Class to store variables that will represent the different user input values namely Class A, Class B, and Class C. In this use case, we will query the number of students belonging to the aforementioned classes. With the aid of the Data Branching component, the user’s specific request to retrieve results regarding the number of students in each of the classes, namely, Class A, Class B and Class C is executed.

To learn how to create custom slots refer to the guide: https://university.vogovoice.com/kb/creating-custom-slots/

Create a Custom Intent 

Make a suitable intent to be invoked for executing an interaction flow mapped to it.

Create an intent titled ‘Attendance’ with a suitable sample utterance linked to it. The sample utterances for this intent would be, “How many students are present in {class}”, “Number of students present in {class}”, “What is the strength of {class}”. These sample utterances will serve the purpose of fetching the desired results via the Data Branching component.

To learn how to create custom intents refer to the guide: https://university.vogovoice.com/kb/creating-intents/

Steps to create an interaction flow

  1. Log into your VOGO Voice account to be directed to VOGO Voice Management Console (https://account.vogovoice.com)
  2. Navigate to Interactions on the vertical bar displayed on the left-hand side of the Dashboard.
    Dashboard > Interactions

3. Now, click on the Interactions button at the bottom right-hand corner of the screen. Select the ‘Attendance’ intent to be directed onto the Interaction builder platform.

4. In the flow diagram area, you will be able to see the Start and Response components. 
5. Unlink the Start component from the Response card by clicking the delete icon placed in the middle of the chain.

6. Now, drag and drop an Add Variables component onto the flow diagram area.
7. Now mouse over the top right corner of the Add Variables component. Click on the pencil icon that appears. This will open up its configuration window. 

8. Configure the Add Variables component by adding the key-value pairs as shown in the screenshot below. Fill in the first variable name as students and add the object as value, the format, and content of which is provided below in detail. Then, set the datatype as Object. 


students:

{
"A":{
"strength": 5,
"present": []
},

"B":{
"strength": 5,
"present": ["Alex"]
},

"C":{
"strength": 5,
"present": ["Sam","Alex","John"]
}
}

9. Now drag and drop a Switch component onto the flow canvas and connect it to the already configured Add Variables card.

10. Next, mouse over the top right corner of the Switch component. Click on the pencil icon that appears. This will open up its configuration window. 

11. Configure the Switch component as shown below. Ensure to assign the Value field with the variable that will capture the incoming user-input value also known as switch input to execute the desired multibranched paths. Click the plus button below to add the required case values, here being Class A, Class B, and Class C respectively. Here, select Path as the data type for the Value, inputs.class.value, whereas for each of the Cases, choose String as its corresponding data type. To know more about data types, click here.

🖍 Note: The data type of the case value must be the same as that of the actual incoming value captured via switch input.

👍 Note: The first case will check if the user input value is Class A, the second one will check if it is Class B while the third will check for Class C. Subject to checking each case, the successive multi-pathing will branch accordingly. If none of the cases match the input value, and thereby all the set conditions are left unsatisfied upon checking, then the successive pathing will route from Default.

12. Drag and drop three Add Variables components onto the flow canvas and connect each of them to the three conditions on the Switch component.

13. Now, configure the Add Variables component by adding the key-value pairs as shown in the screenshots below. To configure this card, mouse over the top right corner of the Add Variables component. Click on the pencil icon that appears. This will open up its configuration window. 

For Condition 1: Fill in the variable name as result and add the value as var.students.A.present. Then, set the datatype as Path.

For Condition 2: Fill in the variable name as result and add the value as var.students.B.present. Then, set the datatype as Path.

For Condition 3: Fill in the variable name as result and add the value as var.students.C.present. Then, set the datatype as Path. 

🖍 Note: The only change in the above three images is the path. This is because only one of the Add Variables components will be called to action at a time triggered by the user’s input. According to the user input, the subsequent path will be executed.

14. Drag and drop a Data Branching component and connect it to the three configured Add Variables components as shown below.

15. Now configure the Data Branching component. To configure this card, mouse over the top right corner of the Data Branching component. Click on the pencil icon that appears. This will open up its configuration window. 

16. The purpose of utilizing the Data Branching component is to check the value in the variable var.result set within this componentagainst the data type specified as Path. If there is no value found, the None path will be executed. But if there is one value, the One path will be called to action; and if there are more values then the Many path will be implemented.

17.Next, drag and drop three Response components and connect them to the None, One, and Many paths of the configured Data Branching component. The below screenshot captures the interaction flow in its entirety.

18. Now, configure the Response components as shown below. To configure each, follow the instructions given below. Firstly, click on the Voice icon on the top right-hand side of the Response component. Clicking on the voice icon opens a Speak pop-up window with a field titled Say wherein you need to type the related voice responses curated with a customized template for each of the Response cards as shown below.

For the Response component linked from the None path:

Say: Sorry, there are no students present in {{inputs.class.value}}.

🖍 Note: Ensure to click the Save button to save the interaction flow as and when edits are made.

To add a display message in a display voice-assisted device.

  1. Click on the Computer icon, and type in the field titled Display Message of the Show pop-up window. 
  2. Populate the required fields and click the Save button. 

Title: Attendance
Display Message: There are no students present in {{inputs.class.value}}.

🖍 Note: Here the template {{inputs.class.value}} will render the user input data which is Class A

To learn about different template engines to be followed to run functions visit https://university.vogovoice.com/kb/template-engine/

For the Response component linked from the One path:

Say: There is only one student present in {{inputs.class.value}}.

To add a display message in a display voice-assisted device.

  1. Click on the Computer icon, and type in the field titled Display Message of the Show pop-up window. 
  2. Populate the required fields and click the Save button. 

Title: Attendance
Display Message: There is only one student present in {{inputs.class.value}}.

🖍 Note: Here the template {{inputs.class.value}} will provide the user input data which is Class B

For the Response component linked from the Many path:

Say: There are {{var.students.C.present.length}} {{pluralize var.students.C.present.length ‘student’}} present in {{inputs.class.value}}.

To add a display message in a display voice-assisted device.

  1. Click on the Computer icon, and type in the field titled Display Message of the Show pop-up window. 
  2. Populate the required fields and click the Save button. 

Title: Attendance
Display Message: There are {{var.students.C.present.length}} {{pluralize var.students.C.present.length ‘student’}} present in {{inputs.class.value}}.

👍 Note: Here the template {{var.students.C.present.length}} will render the total count of the students and the template {{pluralize var.students.C.present.length ‘student’}} will pluralize the word student based on the count. The template {{inputs.class.value}} will give the user input data which is Class C

Testing and Validation 

  1. Click on the Test button next to the Flow Editor button on the interaction builder platform.

2. In the Tests pop-up window that appears, click the + button on its top right-hand corner. 

3. Fill in the Name field of the Test Response window that shows up. In the Conversation section of the Test Response, the Attendance intent through which this interaction flow has been initiated will be auto-generated in the User invokes field as shown below. 

4. Fill the With slots field titled class under Conversation with the user’s input that is A. Click Save to perform the test.

🖍 Note: To validate the remaining inputs mainly B & C create new test for each but following the same set of Testing and Validation steps in the order of its succession.

Test A

Test B

Test C

5. To validate the Test Response for A, click on the lightning symbol on the left-hand side on the top of the test case as shown below. To test for B and C click on their respective lightning symbols.

First Response Output

Below are the three different responses while running the three separate tests.

Test A

Test B

Test C

Congratulations! You have successfully learned how to implement the Data Branching component to branch the interaction flow based on the number of results principled by the None One Many concept.

👍 Note: To test the functioning of the interactions on your device you have to deploy the custom skill to facilitate the skill with the new edits. To accomplish this, click on the Deploy button seen at the bottom of the Skill Settings pop-up window.

To know how to deploy a custom skill visit https://university.vogovoice.com/kb/deploying-a-skill/

To Learn about Data Branching, click here.

Tags:
Was this article helpful?
Dislike 0
Previous: If/Else
Next: Code Block