Variables, Modules, and Functions, OH MY! Custom Client Code in Visual Builder

Not only does the new version of Visual Builder (as of 18.2.5) give you full access to modify your generated client source code it also makes it really easy to create and manage custom code within the client application. This custom code can be accessed and called from other custom code blocks and from visual editors like the action editor. To get the most out of your custom code, it is import to understand 3 key concepts and how they present themselves within Visual Builder. 

1) Variables

Variables are cornerstone to working with code. With Visual Builder, you will use variables to interact with UI controls, REST interfaces, and general application logic. Visual Builder support standard Javascript types with built in types as well as custom types that can be declared and instantiated as needed. 

To create a variable, you use the variables editor found within the designer. It is denoted by a symbol and allows you to quickly create new variables you wish to use within your module. Simply select a type (or create a custom type) and give it a unique name. 

2) Modules

Variables and Functions are stored within the scope of a Module. Visual Builder presents three types of modules: The AppModule, the FlowModule, and the PageModule. You may also declare a variable within the scope of an Action Chain. 

In the below screenshot, the hierarchy of the various module types is visually shown. At the top level, called "custom" in this case, you have your AppModule. An App can contain one or more flows, each with their own FlowModule, and each flow can contain one or more pages, each with their own PageModule. Within a page, there can be several UI events captured and each associated with and action chain. And within each module and/or action, we define our custom variables and functions. 

3) Functions

To create a custom function, you use the Javascript editor, denoted by the  symbol, for either the app, flow, page, or action. Within each you will see a Module defined that within you can create a custom function. To define the function use the prototype function within the module object. Below is an example of adding a custom function to the AppModule, it takes a string appends some additional text to it and returns that new string. 

Putting it all together

To put this all together, we are going to create some UI within which we can enter some text, hit a button to call the function and pass that text, then modify the string and bind it to an output control.  To do this we need to use variables, actions, and custom module function.

The UI control that takes input is bound to a PageVariable we created within the page.

The output control is bound to the AppVariable we created at the app level.

Now, we create an Action Chain that gets called when the button is pressed. The Action chain calls my custom function and maps that PageVariable to that input.

Then the Action chain assigns the output of that function to my AppVariable. 

Since those are already bound to my UI control, they update automatically when the action chain runs.