Overview

Using Advanced Actions, developers can access and alter values in their JavaScript files with the Umajin platform.  In this tutorial, we will make a basic two-page demonstration project with an Action which creates a Global Variable that can be used later in the development process.

Prerequisites

1. Umajin Editor downloaded and installed
2. Any text editor
3. Completed the registerAction tutorial

Pro Tip: using Visual Studio Code as your editor will allow you to integrate debugging.

Instructions

Step 1) Create a new blank project in the Umajin Editor to use as a testing platform for our property altering platform.

Step 2) Create a new JavaScript document and name it something that relates to your desired action. For our example, we will be naming the file advancedAction.js because our goal is to demonstrate the use of using Advanced Actions and Global Variables to set the Properties of a Component. Make sure that you save this file in the scripts folder under the Umajin Resources Folder.

File → Open Resources Folder → scripts.

Note: In order for this Component to be available for use, simply reload the page.

Step 3) Register an Action in Umajin. This Action will allow us to set the text of a Text Component to that contained in a Global Variable in our JavaScript file. This Action will have two Components: a Text Component, and a string. Ours is called “getVar” because we will ultimately be extracting the Global Variable from this JavaScript file in the Umajin platform.

registerAction("getVar",'',"getVar",'component:text:text,string:i:');

Step 4) Now we will write the function that will correspond to this Action. First, though, we will set the Global Variable that we will have the key “name” to the name, “Carolyn”. Now we can write a very simple function that will take in the Text Component as well as the provided string. The line of code within the function sets the Text Property of the Text Component to that of whatever we input into the Umajin platform.

var name = "Carolyn";
function getVar(text,i){
   setProperty(text,"text",i);
}

Step 5) Go into your Umajin platform and set up your page for testing. Ours will be very simple, as only a Text Component and a Button Component are required.

Step 6) Now we can tie our Action to the Button Component. Click on the Actions tab in the Properties Inspector. Add an “On Press” Action which will be our “getVar” Action from the JavaScript file. Once the Action is added, you should see that it is tied to your desired page, and provides you with options.

Step 7) Use the drop down menu beside the text label to select your desired Text Component. This will be the Component onto which our Global Variable “name” is mapped. Now we will choose the string to have displayed. To test this out, feel free to put any string into the text entry panel and see that it is displayed with the press of your button. To display the value of the Global Variable, put the key associated (aka the name of the variable) in square brackets.

Step 8) Test out your Global Variable display feature! Ours looks like this: