VOGO Voice – Knowledge Base

Replace Multiple Components using Code Block

Estimated reading time: 6 min

In this comprehensive tutorial, you will learn how to replace multiple components using a single Code Block component that is capable of rendering the same functionality as those other components when chained together on our interaction builder platform. The framework for this interaction flow is purposed to implement the same use-case illustrated in the Data Branching tutorial. In a nutshell, this tutorial showcases the step-by-step process of rendering the information of students present in each class. The comprehensive instructions combined with highlighted screenshots give a demonstration of the three situations, namely None, One, and Many through the representation of Class A with no students, Class B with one student, and Class C with 3 students.

Prerequisites

  • Knowledge in JavaScript
  • VOGO Voice account: https://www.vogovoice.com/
  • Access rights to the Interactions section.
  • Access rights to the Interaction builder platform.
  • Know-how of the tutorial without Code Block

👍 Note: Prior to reading this advanced tutorial, it is advisable to visit the Data Branching tutorial to understand how to implement the aforementioned use case by configuring other basic components to build an interaction flow. It will also help you identify the benefits of leveraging Code Block to restrict the number of components used in an interaction.   

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 Code Block 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 will be executed accordingly.

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 suitable sample utterances linked to it. The sample utterances would be, “How many students are present in {class}”, “Number of students present in {class}”, “What is the strength of {class}”.

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)
  1. 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 Code Block component onto the flow canvas.

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

11. Configure the Code Block component as shown below. 

Here the first line of code declares a new variable named newdata and stores the parsed data from the data part. This step is followed to make a deep copy as alterations to the contents in the data part cannot be made directly. The second line declares a new empty variable named result as an array. Line numbers 3 to 13 are used to write the switch statement. In the first switch case, we are checking if the user input value is Class A. If so, assign the array of students present in Class A to the variable named result

Repeat the steps to the next two cases as shown in the aforementioned image for Class B and Class C. This code replaces a Switch component and three Add Variables components from the flow in the Data Branching tutorial. 

Line numbers 14 to 24 are used to check the length of the value stored in the variable result. If the length is greater than 1, add a new output response variable named answer and assign the length of the variable result to it as value. To do so, use the code response.var.answer = result.length;. then assign the output path for the condition as 2 by using the code response.path = 2;. If the length is equal to 1, add a new output response named answer and assign the length of the variable result to it as value. Then assign the output path for the condition as 1 by using the code response.path = 1;. Or else add a new output response named answer and assign the length of the variable result to it as value.  Then assign the output path for the condition as 0 by using the code response.path = 0;. and set the number of paths as 2.

12. Drag and drop three Response components and connect them to the Default, Path 1, and Path 2  of the configured Code Block component as shown below.

13. Now, configure the Response components as shown below. To configure components, one by one, click on the Voice icon on the top right-hand side of the Response components. Clicking on the voice icon opens a Speak pop-up window with a field titled Say wherein you need to type the related voice response curated with a customized template as illustrated below.

For the Response component from the Default path:

Say: There are no students 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 no students present in {{inputs.class.value}}.

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

For the Response component from Path 1:

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 fetch the user input data which is Class B

For the Response component from Path 2:

Say: There are {{var.answer}} {{pluralize var.result 'student'}} 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 {{var.answer}} {{pluralize var.result 'student'}} present in {{inputs.class.value}}.

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

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

14. The dual screenshots below illustrate the significance of a Code Block component, former with and latter without, in an interaction flow. The former represents the current use case modeled with the aid of a Code Block component, while the latter shows the same use case implemented within an interaction flow without the Code Block component, the use of which is substituted with several other components. 

Current Use Case with Code Block component

Use case represented in tutorial without Code Block

👍 Note: Overall, this exemplifies how the implementation of Code Block component can simplify the interaction flow by reducing the number of components. This is made possible because this specific component has the capability to accommodate the execution of multiple other components on the interaction builder platform. 

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 ‘A’, ‘B’, and ‘C’ in separate test windows as highlighted below to test out the three different situations demonstrated via this tutorial. Then click Save to perform each test.

Test A

Test B

Test C

5. To validate the Test Response, click on the lightning symbol on the left-hand side of each test case, completing one after the other as shown below.

6. The resultant Test Response windows displays the output i.e. the three different responses representing the None, One, Many solutions.

Output

Test A

Test B

Test C

Congratulations! You have successfully learned how to execute the Code Block component to render a tailored interaction flow that represents a None, One, Many solutions attuned to the end-users requirements.

👍 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 Code Block, click here.

Tags:
Was this article helpful?
Dislike 0
Previous: Delete Settings in Code Block
Next: Set favorites & retrieve items from the list