The POWER of the Code block

Nicolas · February 13, 2019, 11:07pm

Hello everyone, today we will see how to set up a skill to use Javascript functions in the Code block.

Javascript is a fairly simple code to understand that will allow you to perform operations a bit more advanced in your skills. This code is used in the Voiceflow Code block that you can place anywhere in your skills.

I have made some functions that you will be able to use in this tutorial and in your skills but feel free to add specific code requests in the comments, and if possible, I will add these new functions to those already existing.

Before starting in detail, here is the working principle of the system I have set up to allow you to have new functions as soon as they are available and/or updated.
I use a file that contains all the functions (existing and future ones), this file is encoded and hosted on a server. In your skill you will use the API block to retrieve this file in a variable and launch it from a Code block. This is your Init block if you want, the one that loads all the functions at each launch of your skill.
Then, all you have to do is launch the function(s) you want to use (we will see together the functions available to date).

So much for the basics, let’s start by creating our new skill in Voiceflow.

So start by logging into your account in Voiceflow

Then click on “New Project”

24%20PM

We will start by adding Global variables in our skill,

myVar which will be used to test our functions
theCode which will contain our code with all the functions
voiceflowJS that allows us to call our functions

Once you have created these variables, we will add the API block which will allow us to retrieve all the Javascript functions I have created for you.

In the block API parameters, use https://s3-eu-west-3.amazonaws.com/gallagan/codejs.json as url and map the response.code response to the theCode variable we just created.

You can add a Speak block on the Fail output of the API block just in case

19%20PM

Then, let’s add a Code block just after our API block.

46%20PM

I renamed it Init but you can rename it as you wish

Copy and paste the following code:
eval(Buffer.from(theCode, 'base64').toString('ascii'));
Warning, if you have changed the names of your variables, you must also change “theCode” here.

You have just setup your skill to be able to use the functions in a Code block.

Let’s end up adding a Code block and a Speak block after the previous ones.

23%20PM

In the last Speak block, add the variable we created at the beginning of the tutorial, for me it was myVar.

You can add Speack blocks to the fail outputs,
here is what your skill should look like:

Everything is ready, let’s move on to the fun part!

From now on, we will only use the Code block that I renamed “Demo”. So for the next code, copy/paste them into this block.

Let’s start with a rather simple example, in the “Demo” block code, copy/paste the following code:

myVar = eval(voiceflowJS.getLocaleDatetoString);

Here we use the getLocaleDatetoString function of our voiceflowJS variable, then we pass the result into our “myVar” variable. Finally, thanks to the Speack block, we display the result.

The principle will always be the same here, voiceflowJS contains all the functions, so to call a function we use: voiceflowJS.thenameofthefunction.

Let’s test our code with the “test” button at the top right of your screen.

09%20PM

Then click on the “Start Test” button

There you go, you get the result of our getLocalDatetoString function.

Are you starting to understand the process here?
Let’s try again with another function, getHours

In the Code block, add the following line:
myVar = eval(voiceflowJS.getHours);

If you wish you can comment the first line of code with //. This way, the commented line will be ignored.

For this example it will not have any impact since we replace our myVar varaible every time but it is a good idea to have this habit to find out later on what functions you use or not.

Again, run the test.

Here I get 17 because that’s when I write this tutorial. You will have the time of the code execution.

Now that you have understood the basics, have fun testing the following functions:

myVar = eval(voiceflowJS.getMinutes);

myVar = eval(voiceflowJS.getSeconds);

myVar = eval(voiceflowJS.getCurrentDay);

myVar = eval(voiceflowJS.getCurrentDayinLetters);

myVar = eval(voiceflowJS.getCurrentMonth);

myVar = eval(voiceflowJS.getCurrentMonthinLetters);

myVar = eval(voiceflowJS.getCurrentYear);

Here is the example for getCurrentDayinLetters

Let’s now move on to functions that use parameters. Add the following code to your block code:

voiceflowJS.minNumber = 0;
voiceflowJS.maxNumber = 20;
myVar = eval(voiceflowJS.getRandomNumber);

Here the getRandomNumber function uses two parameters, voiceflowJS.minNumber and voiceflowJS.maxNumber. Pretty simple, isn’t it? Go ahead, test this function!

You can run the test several times, you will get a random number between 0 and 20.

The following function rounds off the number passed in parameter with voiceflowJS.number

voiceflowJS.number = 42.42;
myVar = eval(voiceflowJS.getRoundNumber);

Here is the result

This other function allows you to obtain a random string of the length you want

voiceflowJS.stringLength = 20;
myVar = eval(voiceflowJS.getRandomString);

voiceflowJS.stringLength = 20 indicates here that you want to get a random string of 20 characters long.

I think you have understood, here is another one getFormatedNumber

voiceflowJS.number = 12584.89;
voiceflowJS.currency = 'EUR'; //EUR, USD, JPY...
voiceflowJS.currencyFormat = 'fr-FR' //fr-FR, en-US, ja-JP...
myVar = eval(voiceflowJS.getFormatedNumber);

voiceflowJS.number = 12584.89;
voiceflowJS.currency = 'USD'; //EUR, USD, JPY...
voiceflowJS.currencyFormat = 'en-US' //fr-FR, en-US, ja-JP...
myVar = eval(voiceflowJS.getFormatedNumber);

Another one, getYearsMonthsDaysSinceBirthdate

voiceflowJS.year = 1979;
voiceflowJS.month = 5;
voiceflowJS.day = 22;
myVar = eval(voiceflowJS.getYearsMonthsDaysSinceBirthdate);

With this one, getReplaceAll, you can replace all occurrences in a text:

voiceflowJS.myText ="We are outside. We are waiting.";
voiceflowJS.replaceFrom = "We are";
voiceflowJS.replaceWith = "He is";
myVar = eval(voiceflowJS.getReplaceAll);

The last one allows to clean up an html source, getRemoveHTML

voiceflowJS.htmlSource = `
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!--comment-->

<head>

<title>This is my title.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>

    body {margin-top: 15px;}
    a { color: #D80C1F; font-weight:bold; text-decoration:none; }

</style>
</head>

<body>
    <center>
        This string has <i>html</i> code i want to <b>remove</b>.<br>
        In this line <a href="http://www.bbc.co.uk">BBC</a> with link is mentioned.<br/>Now back to &quot;normal text&quot; and stuff.                 
    </center>
</body>
</html>
`;
myVar = eval(voiceflowJS.getRemoveHTML);

Finally, here is the content of your Code block at the end of this tutorial:

//myVar = eval(voiceflowJS.getLocaleDatetoString);

//myVar = eval(voiceflowJS.getHours);

//myVar = eval(voiceflowJS.getMinutes);

//myVar = eval(voiceflowJS.getSeconds);

//myVar = eval(voiceflowJS.getCurrentDay);

//myVar = eval(voiceflowJS.getCurrentDayinLetters);

//myVar = eval(voiceflowJS.getCurrentMonth);

//myVar = eval(voiceflowJS.getCurrentMonthinLetters);

//myVar = eval(voiceflowJS.getCurrentYear);

voiceflowJS.minNumber = 0;
voiceflowJS.maxNumber = 20;
//myVar = eval(voiceflowJS.getRandomNumber);

voiceflowJS.number = 42.42;
//myVar = eval(voiceflowJS.getRoundNumber);

voiceflowJS.stringLength = 20;
//myVar = eval(voiceflowJS.getRandomString);

voiceflowJS.number = 12584.89;
voiceflowJS.currency = 'EUR'; //EUR, USD, JPY...
voiceflowJS.currencyFormat = 'fr-FR' //fr-FR, en-US, ja-JP...
//myVar = eval(voiceflowJS.getFormatedNumber);

voiceflowJS.currency = 'USD'; //EUR, USD, JPY...
voiceflowJS.currencyFormat = 'en-US' //fr-FR, en-US, ja-JP...
//myVar = eval(voiceflowJS.getFormatedNumber);

voiceflowJS.year = 1979;
voiceflowJS.month = 5;
voiceflowJS.day = 22;
//myVar = eval(voiceflowJS.getYearsMonthsDaysSinceBirthdate);

voiceflowJS.myText ="We are outside. We are waiting.";
voiceflowJS.replaceFrom = "We are";
voiceflowJS.replaceWith = "He is";
//myVar = eval(voiceflowJS.getReplaceAll);

voiceflowJS.htmlSource = `
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!--comment-->

<head>

<title>This is my title.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>

    body {margin-top: 15px;}
    a { color: #D80C1F; font-weight:bold; text-decoration:none; }

</style>
</head>

<body>
    <center>
        This string has <i>html</i> code i want to <b>remove</b>.<br>
        In this line <a href="http://www.bbc.co.uk">BBC</a> with link is mentioned.<br/>Now back to &quot;normal text&quot; and stuff.                 
    </center>
</body>
</html>
`;
myVar = eval(voiceflowJS.getRemoveHTML);

Congratulations, you have just finished discovering the Code block.
As usual, if you have any questions or if you want to see new Javascript functions do not hesitate to comment below.

Michael · February 13, 2019, 7:02pm

This is awesome, thanks for making it!

Hermann · February 13, 2019, 7:57pm

Wow, thats great, thank you.

Braden · February 13, 2019, 9:00pm

This is unbelievable Awesome job!

Hermann · February 18, 2019, 12:08pm

I made a test skill with your api-JS and it works great, thank you!

Hermann · February 18, 2019, 12:18pm

it is possible to get the local time. I’m in Germany, Stuttgart
now we have 13:09

Varhours = eval(voiceflowJS.getHours);
Uhrzeit: 12

marco · February 18, 2019, 3:49pm

Hello , try this :

var today = new Date();
var hour = today.getHours();

in code block .

bye

Hermann · February 18, 2019, 4:06pm

Thank you, but the problem is the same as with Varhours = eval(voiceflowJS.getHours)
I get one hour to low.
speak => clock: 16
Now wie have 17 clock in germany, UTC …
I can add an hour, but this is always correct?

marco · February 18, 2019, 4:13pm

Strange , we are on the same timezone , and I have a correct result.

Hermann · February 18, 2019, 4:24pm

is this summertime problem

Nicolas · February 18, 2019, 6:23pm

You can use this code to get the correct time according the time zone. You just need to change the timezone to Germany.

var theTime = new Date().toLocaleString(“en-US”, {timeZone: “Australia/Brisbane”});
theTime = new Date(theTime);
var hour = the time.getHours();

Hermann · February 18, 2019, 7:34pm

thank you Gallagan, but I get an Java Error when I use it for germany.

var theTime = new Date().toLocaleString(‘en-US’, {timeZone: ‘Australia/Brisbane’});
alert(theTime);
theTime = new Date(theTime);
var hour = theTime.getHours();
alert(hour);

//de-De did not work, Invalid Java… this statement: var varhours = vargermany.getHours();

var vargermany = new Date().toLocaleString(‘de-DE’, { timeZone: ‘Europe/Berlin’ });
alert(vargermany);
var varhours = vargermany.getHours();

//vargermany are: 18.2.2019, 20:32:58

Nicolas · February 18, 2019, 8:02pm

Watch for ``in your code and replace them with the correct ’ ’ and you need to add the
vargermany = new Date(vargermany);

So here is the full script you can use in your Code block:

var vargermany = new Date().toLocaleString('de-DE', { timeZone: 'Europe/Berlin' });
vargermany = new Date(vargermany);
var varhours = vargermany.getHours();

Hermann · February 19, 2019, 8:07pm

sorry, Gallagan, the highlight statement did not work

statement 1 and 2 works, but not statement 3

Nicolas · February 20, 2019, 1:14am

Just test it in Voiceflow @Hermann, it works fine

Hermann · February 20, 2019, 4:55pm

Hello Gallagan,
Thank you, that works wonderfully. It did not work with Tool Javascipt online.
In VoicFlow it works very well.
You are the best 20-02-_2019_17-53-06