VOGO Voice – Knowledge Base

variableClone Function

Estimated reading time: 7 min

In this comprehensive tutorial, you will learn how to write a variableClone function as well as how to make use of it to present any desired list within a custom skill. The framework for this interaction flow is purposed to implement a simple use case such as presenting a list of pet details based on names stored within the Save Settings component without losing any values from the Save Settings. 

The variableClone that is based on structured clone algorithm supports cloning arrays, array buffers, booleans, date objects, maps, numbers, Object objects, regexes, sets, strings, symbols, and typed arrays.  The guided instructions combined with highlighted screenshots will provide a demonstration of pulling up the list of pets admitted to a clinic by furnishing details like name, breed, and age. Moreover, this tutorial presents how the aforementioned list is identified, segregated, and retrieved from the list of all the pets treated at the clinic that day.

Prerequisites

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

Create a Custom Intent 

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

Create an intent titled ‘Pet Clinic’ with suitable sample utterances linked to it. The sample utterances would be, “How many pets were admitted today”, “List the pets that were admitted today”, “What’s todays count of admitted pets”.

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 ‘Pet Clinic’ 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 a Save Settings component onto the flow diagram area and connect it to the Start component.

7. Configure the Save Settings as shown in the screenshot below by adding the requisite key-value pair, the format, and content of which is provided below in detail.  Input pets as the key and add the following array as its corresponding value. Set the data type as Array. 

pets:

["Charlie", "Max", "Buddy", "Milo"]

🖍 Note: This list contains the names of pets that got admitted to the clinic.

8. Continue to configure by adding another setting in the same Save Settings component and configure it as shown below. Name the new settings as petData and add the below-provided array as value and set the type as Array.

[
{
"token": 1,
"name": "Archie",
"type": "fish",
"age": 5,
"breed": "Gold Fish"
},
{
"token": 2,
"name": "Buddy",
"type": "cat",
"age": 4,
"breed": "Persian Cat"
},
{
"token": 3,
"name": "Charlie",
"type": "dog",
"age": 3,
"breed": "German Shepherd"
},
{
"token": 4,
"name": "Max",
"type": "dog",
"age": 5,
"breed": "Pit Bull"
},
{
"token": 5,
"name": "Milo",
"type": "Bird",
"age": 2,
"breed": "Parrot"
},
{
"token": 6,
"name": "Ollie",
"type": "crustacean",
"age": 1,
"breed": "Crab"
}]

🖍 Note: This array contains the names and details of all the pets treated at the clinic that day.

9. Next, drag and drop a Response component and connect it to the Save Settings as shown in the screenshot below.

10. Configure the  Response component as shown below  To configure, 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 response curated with a customized template as illustrated below.

Say: We have {{settings.pets.length}} {{pluralize settings.pets.length 'pet'}} admitted today.

Check the checkmark box in the Expect Response and type in the suitable Prompt message to proceed with the flow.

Prompt: Do you want me to list them?
The same message will be replicated in the Reprompt field.   
Reprompt: Do you want me to list them?

Next check the Allow Global Interactions check box and click on Set Yes/No button.

🖍 Note: Here {{settings.pets.length}} will render the total number of items in the Save Settings named settings.pets and the template {{pluralize settings.pets.length ‘pet’}} will pluralize the word pet

To know about how to configure the Response component, refer to the https://university.vogovoice.com/kb/response-component/

To add a display message in a display voice-assisted device, click on the Computer icon, and populate the required fields. 

Title: Pet Clinic
Display Message: We have {{settings.pets.length}} {{pluralize settings.pets.length ‘pet’}} admitted today.

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

For further reference on how to populate the additional fields visit https://university.vogovoice.com/kb/guide-response-component/

11. Drag and drop an Add variables component and connect it to the Yes path of the Response component as shown below.

12. Configure the  Add Variables component by adding the key-value pairs as shown in the screenshot below. Fill in the first variable name as patients and add a variableClone function as value. To fetch the variableClone function, search for it in Data part, and drag and drop it into the value field corresponding to the variable patients. Thenset the argument as settings.pets and set its data type as Path. This will create a copy of settings.pets.

Next, name the second variable as details. Drag and drop the variableClone function to the variable details once again and set the argument as settings.petData and the type as Path. This will create a copy of settings.petData.

👍 Note: As our platform works on call by reference method any changes made in the original data or something referring to the data will alter the data in the rest of the flow. It is to overcome this, that the variableClone function is used. variableClone function creates a copy of data and renders the copy to work on. The key advantage is that making changes in this copy will not affect the original data and therefore no risk of valuable data getting altered.

13. Drag and drop a  Response component and connect it to the No path of the previously configured Response component as shown below.

14. Now configure the Say and Display part of the Response card as shown below.

Say: Okay! you can check that later. Thank You.

Add a display message for a display-enabled voice-assisted device.

Title: Pet Clinic
Display Message:  Okay! You can check that later. 
Thank You.

15. Drag and drop another  Add variables component and connect it to the first Add Variables component as shown in the screenshot below.

16. Configure the  Add Variables component by adding the key-value pairs as shown below. Name the first variable as item. Drag and drop in the corresponding value field the pullAt function from the Data part. Click on the plus sign below to set the first argument as var.patients and its type as Path. Continue to set the second argument as 0 and its type as Number. This will pull out the first element from var.patients.

Next, name the Second variable as findName. Drag and drop in the corresponding value field the find function from the Data part. Set the first argument as var.details and its type as Path. Set the second argument as {“name”: “{{var.item}}” } and its type as Object. This will fetch the first element matching the name in var.details to the value in the template {{var.item}} 

Now, name the third variable as list. Drag and drop the concat function to it and set the first argument as var.list and its type as Path. Set the second argument as var.findName and its type as Path. This function will concat the object in var.findName to var.list.

🖍 Note: concat function creates a new array by concatenating the existing array with the added value. Here the existing array is list and the added value is in the path var.findName.

Name the fourth variable again as list. Drag and drop the compact function to it and set the argument under it as var.list and its type as Path. This function will create an array with all falsey values removed. The values false, null, 0, “”, undefined, and NaN are falsey.

17. Drag and drop a Check Variable component onto the flow canvas and connect it to the second Add Variables component as shown below. 

18.  Configure the Check Variable component as in the screenshot below. Populate the Left-Hand Side as var.patients.length and set the type as Path. Populate the Right-Hand Side as 0 and set the type as Number. Select the relational operator as is equal to from the drop-down list. 

🖍 Note: Here we are checking the length of the variable patients. As we are using pullAt function in the second Add Variable component, the data in the variable patients is altered. 

Left-Hand side: var.patients.length (Path)
Right-Hand side: 0 (Number)

19. Now, connect the Otherwise path of the Check Variable component back to the second Add Variables component as illustrated below.

👍 Note: If the length of var.patients is equal to 0, it will route the user to the Then path of the Check Variable component which is the Response card given in the next step, or else the Otherwise path gets executed looping it back to the second Add Variables component.

20. Drag and drop a Response component and connect it to the Then path of the Check Variable component as shown in the screenshot below.

21. Configure the Say and Display part of the Response component as shown below.

Say: {{#showList var.list}}{{name}}, a {{age}} year old {{breed}}{{/showList}}

To know more on how showList function works, refer to https://university.vogovoice.com/kb/template-engine/#ch_7

Add a display message for a display-enabled voice-assisted device.

Title: Pet Clinic

Display Message:  {{#each var.list}}
                  Name: {{name}}  
                  Breed: {{breed}} 
                  Age : {{age}}
                  {{/each}}

To know more of how each function works, refer https://university.vogovoice.com/kb/template-engine/#ch_4

Full Flow

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 the Name field of the Test Response window that shows up.

4. In the Conversation section of the Test Response, Pet Clinic intent through which this interaction flow has been initiated will be auto-generated in the User invokes field.

5. Click on the plus sign right below the Conversation and select Yes from the drop-down against the newly selected User Invokes.

6. Finally, click the Save button to save the input and perform the test.

7. To validate the Test Response, click on the lightning symbol on the left-hand side of the test case. 

Output

The following test windows reflect the resultant output.

🖍 Note: Here you can see the settings value is not altered. 

🖍 Note: In the above screenshot you will notice the data in the variable patients is empty as the elements have been pulled out from this variable. Early on in the tutorial, we had cloned the value in the settings named pets to the variable patients. This clearly indicates that if we didn’t use the variableClone function, the data in the save settings named pets will be altered.

Congratulations! You have successfully learned how to write a variableClone function as well as how to make use of it within a custom interaction model to present the desired list specific to the end-users’ spoken request.

👍 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 Check Variable, click here.

Tags:
Was this article helpful?
Dislike 0
Previous: Set favorites & retrieve items from the list