With the Code Addon, you can add custom JavaScript to one or more projects, which allows you to:
- Integrate 3rd party scripts, such as external analytics
- Do calculations for your calculator experiences
- Manage advanced business logic with internal state
- Reutilize any of the above on multiple projects
The code you add is then able to read and write Data Fields, fire Triggers, and run Actions, so you can integrate it into your projects logic and flow.
How to Enable It
- Open the store on the left sidebar of the editor
- Search for “Code Addon”
- Drag the Code addon onto your project to enable it
- Create a new Code addon and name it, e.g. My Custom Code
- Follow the settings below to configure the addon
Settings
Define Data Fields
Data Fields are the first layer of connection between your Code Addon and the Dot.vu project. Although you are always free to read and write your data fields inside the Code Addon, from the outside data fields can have various use cases, depending on their Read/Write options.
| Read Only | This means that the Data Field can be read from the Editor, but it cannot be modified. |
| Write Only | This means that there will only be an Action to modify its value. The Data Field will not be accessible for printing/reading its value. |
| Read and Write | This means that the Data Field can both be read and modified. |
It is important to decide what type of Read/Write operations you allow from the outside, as they are an integral part of how your Code Addon will be used in a Dot.vu Project.
Define Actions
Your Code Addon can also export Actions that can be used to perform commands on your Code Addon. Actions are identified by their name and can have optional parameters. Parameters are especially useful when you want to receive information together with your Actions.
For example, if you are creating a calculator, an example of an Action could be Calculate, and its parameters would be the data necessary to perform the calculation.
As another example, if you are integrating to a 3rd party analytics service, an example of an Action could be Report Event, and its parameters could be Event Name and Event Data for example.
To act upon an Action being called, you need to subscribe to it in the JavaScript code. This will be described later in this article.
Define Triggers
The final layer of connection between the Code Addon and the Dot.vu project are the triggers. Triggers are used to announce that something happened inside the Code Addon, to which you can have your project react to using trigger rules. An example of a triggers could be Calculation Complete.
JavaScript
The JavaScript code is where you write your business logic, or add your third party JavaScript snippet. With it, you are able to interact with data fields, triggers, and actions. To interact with these, there are several global variables available, which are described next.
Data Fields
The dataFields variable is an object containing all the created data fields from the Code Addon as its keys. If you have a data field called myDataField, you would access it by typing dataFields.myDataField (or dataFields[“myDataField”]). You can then do several operations with it:
dataFields.myDataField.get()gets the current values from the data fielddataFields.myDataField.set(value)sets the value of the data fielddataFields.myDataField.subscribe(myHandler)subscribes to value changes in the data field. myHandler is then called with the new value for the data field.dataFields.myDataField.unsubscribe(myHandler)unsubscribes to value changes to a previously used handler function.
Actions
The actions variable is an object containing all the created actions from the Code Addon as its keys. If you have an action called myAction, you would access it by typing actions.myAction (or actions[“myAction”]). You can then do several operations with it:
actions.myAction.subscribe(myHandler)subscribes to the action. This means that whenever this action is run from outside, the myHandler function is executed. Moreover, if you have added parameters to your action, the parameters would be available as arguments.actions.myAction.unsubscribe(myHandler)Unsubscribes myHandler from handling the action
Triggers
The triggers variable is an object containing all the created triggers from the Code Addon as its keys. If you have a trigger called myTrigger, you would access it by typing triggers.myTrigger (or triggers[“myTrigger”]). Triggers are much simpler than actions and data fields, as the only thing you can do is to fire them. To fire myTrigger, just type: triggers.myTrigger().
JS Docs
Click JS Docs on the top right corner of the code editor to access a documentation panel that lists all data fields, actions, and triggers created in your Code Addon.
For each one of these, you can see a snippet of code for each available method. You can copy and paste the snippets you need into your JavaScript Code, and just fill out the values and handler functions.
Integrate With Your Project
To integrate your Code Addon with your project, i.e. to connect your project logic with your Code Addon logic, simply search for its Data Fields, Actions or Triggers where applicable, while editing the logic of your project. Let’s use a calculator as example:
- When a “Calculate” button is clicked, run a “Calculate” action from your Code Addon
- Use rules to navigate the user to a result stage when your Code Addon fires a “Calculation Done” trigger
- Use the result Data Fields from your Code Addon to print their values on your result stage
Unbind From Project
When you add the Code Addon to a project, it becomes bound to that project. If you want to use a Code Addon instance on multiple projects, you need to unbind it from the project.
Then, whenever you want to use an unbound addon, you can simply add the Addon from the store to your project, and then enable the instance you wish to use from the global list.
You can find the “Unbind from Project” button at the top bar of the addon screen. Simply click it to make it available across other projects.
Q: How Is This Different From The Code Component
Both the Code Component and Code Addon offer similar setup experiences, and integrate with your project in the same way, via Data Fields, Actions and Triggers.
However, the Code Component is a component, which means you place it within your project layout and have it render some custom coded content, which could be for example a marketing game. It supports HTML and CSS, along with JavaScript.
The Code Addon on the other hand, exists “behind the scenes” of your project, and executes only JavaScript. It is therefore more appropriate for things like integrating and reporting analytics, doing calculations or manage other business logic.
A key difference is that the Code Addon, like many Dot.vu Addons, can be made global, allowing you to utilize the same instance across multiple projects.