The action builder has a lot of action steps that are used within the majority of the applications. But there are always niches and things that your application could use that Betty Blocks doesn’t provide. For these issues, we have a solution - custom action steps that you can build yourself. By defining the logic of these steps yourself, you make sure the step does exactly what you want it to do.
What are steps?
Within our platform, actions represent and provide the logic of the application. Each time you build your action flow, it will consist of event sequences called action steps. These steps determine the action’s roadmap and they are divided into categories: Authentication, CRUD, Debugging, External, Flow, and Miscellaneous.
Getting started
Apart from the basic knowledge of Javascript (ES) and Command line tools (Terminal or Command Prompt), one will need to have the Betty Blocks CLI installed and running. Before you start you need an editor such as Visual Studio Code or whichever editor you prefer. After this, you have to open Terminal or Command Prompt and follow the steps linked here.
In order to create your own action step, you will need to implement several functions - snippets of code that can be published to the actions IDE so that later they can be used as action steps. At the moment, the platform only supports functions written in Javascript.
Each function consists of two parts:
The implementation of the function itself, written in Javascript
The function definition that describes operations in a JSON format following a predefined JSON Schema
Create your own step
1) In order to initiate a new application, run the following command:
$ bb functions init <your-app-identifier> --app
Assuming the application is cli-wiki.betty.app, the identifier will be cli-wiki.
2) As your new application was initialized and created, navigate to the created folder through the CLI by executing the command:
$ cd <your-app-identifier>
If you are using Visual Studio Code, for example, run the desk command in order to make changes to code:
$ code .
3) The next thing you need to do is initiate a new function with this command:
$ bb functions new hello-world
Coming back to your code editor (VS Code in our case), you’ll notice the new function “hello-world” in the functions folder with two files: function.json and index.js showing the pieces of code in JSON format and Javascript accordingly. Basically, function.json code shows the structure of your custom action step and the “description”, “label”, etc. are the input variables.
{
"label": "Example Function",
"description": "Description",
"category": "Misc",
"icon": "LightningIcon",
"options": [],
"yields": "NONE"
}
Get more information about these functions and definitions from our Wiki.
4) Define your step inputs. Go through the function.json file and fill in its fields providing the data you can use in your action. An action can use this info:
Label: the name of your action
Description: a description/short info segment about the functionality of your action step
Category: category in the action overview under which you want your action step to appear
Icon: the image used to display your action step in the action builder, the icons you can use can be found here
Options: options you want to give your action step, these options can/should be configured by a builder when using the action step. The types we currently support:
Input
Output
Validations
Yields: The yields field gives functions the option to execute nested steps within your function. We currently support three different values for this field, namely:
NONE
ALL
PATHS
More info on yields can be found here
5) Open up index.js and write your code. Make sure the input variables have exactly the same in both function.json and index.js ("numberOne").
6) Upload it to your application using the publish function (described in CLI) in Terminal or Command Prompt:
$ bb functions publish
Note: The first time you are going to upload the function, you should know your application's UUID. In order to learn how to retrieve your application's ID, you can check out this article: Betty Blocks app ID.
7) Open your application's actions and there in the actions steps overview, see your custom steps among others.
After completing these seven steps, you will also have to set your custom action step with proper variables. Working with variables is explained in this article. Have fun!
Deleting or editing entries
Sometimes an edit needs to be made or you might want to delete an entry for your application. This can be done in the .bb-cli.json file in your computer's user folder, usually located under \Users\<user> folder.
Be careful with the file as it contains important information regarding your step, so be sure to check twice before re-publishing your changes!
Want to discuss the creation of your own action step with other developers? check out our community!