How to build a functional action step tailored to your needs.
After reading this article you’ll know:
- How to build a calculator action step
- How to configure the function.json file connected to your custom action step
- How to publish your function to your application
- How to test the function in the Betty Blocks platform
- How to use the custom step in a real situation
Pre-requisites
To create and update your content you need to understand the syntax and logic of the following coding languages and libraries:
- Javascript (ES6)
- React
- We advice to have read the custom action step guide before creating more advanced steps
We recommend using Visual Studio Code as your code editor to create custom components and steps as this is what we use in our guides.
Function initialization
Before starting everything we have to check if the Betty Blocks CLI is installed correctly on your computer, we can do that by running the following command on your command line tool (Terminal or Command prompt):
$ bb –version
If installed, you will see the current version of the Cli you installed. If you see an error message on your command-line tool, you do not have the Betty Cli installed. To install it properly, please visit our article on how to set up your low-code environment here.
Start Function
After checking if the Betty Blocks CLI is installed, you can now initialize your first function (Action Step), to do that run the following command in your command line tool:
$ bb functions init <your app-identifier>
This will initiate your functions' environment, now, to create the calculator function, you will need to run the following command in your command line tool:
$ bb functions new calculator
After the command was run, a new directory called ‘calculator’ has been created with 2 new files, with them being:
- Function.json
- index.js
Default code after creating function
After creating our new function directory, you’ll see some code already written in the index.js file.
The default code was:
const calculator = async ( ) => {
}
export default calculator;
This initial code makes it possible for the functions.json to extract information from the index.js file
Writing calculator function logic
Now that everything is prepared and ready, we can start writing code for our calculator function.
Inputs
Here we will put the 2 number inputs and the operator input in the async (in between {} ) and then define them inside of the function.
const calculator = async ({input1, input2, operator}) => {
let firstInput = input1;
let secondInput = input2;
Writing the calculator code
The app's logic will be very simple, using four if statements for add, subtract, division, and multiplication.
It will look like this:
if(operator == '+'){
result = firstInput + secondInput // addition
}
else if(operator == '-'){
result = firstInput - secondInput // subtraction
}
else if(operator == '*' || operator == 'x'){ // multiplication, both ‘*’ and ‘x’ can
be used
result = firstInput * secondInput
}
else if(operator == '/'){
result = firstInput / secondInput // division
}
else(
result = "operator doesn't exist"
)
Return
Return must be written in the following array format so the functions.json file can translate it to the Betty Blocks platform.
return {
output: result
};
The whole code will look like this:
const calculator = async ({input1, input2, operator}) => {
let firstInput = input1;
let seconInput = input2;
if(operator == '+'){
result = firstInput + secondInput // addition
}
else if(operator == '-'){
result = firstInput - secondInput // subtraction
}
else if(operator == '*' || operator == 'x'){ // multiplication
result = firstInput * secondInput
}
else if(operator == '/'){
result = firstInput / secondInput // division
}
else(
return {
output: result
};
}
export default calculator;
Update function.json file
After our calculator function is done, we can update our function.json file:
The part you can still see.
Options
First, we need to change the options part of the JSON file, these are the inputs and outputs you see in the action steps on the Betty Blocks platform. For more information on options please visit our CLI Wiki.
{
"description": "Description",
"label": "Calculator",
"category": "Misc", // on which section of the action step your
action can be found
"icon": {
"name": "ActionsIcon", // icon
"color": "Teal" // color of the icon
},
"options": [
{
"meta": {
"type": "Number"
},
"name": "input1", // The name of your input, that will be called in your
code’s async
"label": "first input", // Label of the input field in the betty blocks platform
"info": "the first number you put in the calculator",
"advanced": false,
"configuration": {
"placeholder": "number here" // what you’ll see as the placeholder of
the first input field in the action
step on the platform
}
},
{
"meta": {
"type": "Number"
},
"name": "input2",
"label": "second input",
"info": "the second number you put in the calculator",
"advanced": false,
"configuration": {
"placeholder": "number here"
}
},
{
"meta": {
"type": "Text"
},
"name": "operator",
"label": "operator",
"info": "choose between: +, -, * or /",
"advanced": false,
"configuration": {
"placeholder": "choose between: +, -, * or /"
}
}
]
Outputs
The output part looks like this, you can choose what the type of the output can be, in this situation we will select the output to be a number.
You can find more on the type of Outputs here
{
"meta": {
"type": "Output",
"output": {
"type": "Number"
}
},
"name": "output", // referred in index.js
"label": "output as a number",
"info": "The result of the values you put in the step"
}
The Complete code looks like this:
{
"description": "Description",
"label": "Calculator",
"category": "Misc",
"icon": {
"name": "ActionsIcon",
"color": "Teal"
},
"options": [
{
"meta": {
"type": "Number"
},
"name": "input1",
"label": "first input",
"info": "the first number you put in the calculator",
"advanced": false,
"configuration": {
"placeholder": "number here"
}
},
{
"meta": {
"type": "Number"
},
"name": "input2",
"label": "second input",
"info": "the second number you put in the calculator",
"advanced": false,
"configuration": {
"placeholder": "number here"
}
},
{
"meta": {
"type": "Text"
},
"name": "operator",
"label": "operator",
"info": "choose between: +, -, * or /",
"advanced": false,
"configuration": {
"placeholder": "choose between: +, -, * or /"
}
},
{
"meta": {
"type": "Output",
"output": {
"type": "Number"
}
},
"name": "output",
"label": "output as a number",
"info": "The result of the values you put in the step"
}
],
"yields": "NONE"
}
Publish function
Now that your calculator code is done, and the function.json file is configured, you can publish it to your application, you do that by running the following command in your command line tool:
$ bb functions publish
After running the code, to be able to publish your action step, you will have to submit:
- the ID of the application you want to use the action on, you can find it here.
- Your e-mail you use to log in to the Betty Blocks platform.
- Your password you use to log in to the Betty Blocks platform.
The result will be on your command line tool after publishing.
Your action is now available in your application after running the publish command
Test function
Now, we will test the calculator function. We can do that using the ‘test action’ button at the top-left corner of the action steps page.
First, we have to configure the inputs in the calculator action step, we can do that using input variables to make testing easier.
For example:
And Using these action inputs we can configure the calculator inputs with them
Now, to see the result of our inputs we will add a log action step to make the results of testing visible
Now we run the test, to do that change your action from private to public(this is just for testing, you’ll have to change it back to private so your application stays safe.)
The result in the logs:
Using steps in a real situation
First, you create a model, with the inputs, the iterator, and the result
Now we build on the page builder how it should look, we will make something simple, a create form with a data list showing the inputs with results
Create a simple design, with a data list using the ‘Calculator’ model, a create-form
This is how the create action should look like
Use the create step to save the data (where applicable) in your application:
By following the step-by-step guide in this article, you have learned how to create, configure, and test a custom calculator action step made specially for your application in the Betty Blocks platform. From initializing the Betty Blocks CLI and writing the calculator function logic to configuring the function.json file and publishing your function, you now have the tools and understanding to precisely build functional action steps.
Do you want to discuss the creation of your action step with other developers? Check out our community!