How to create a custom JS class in vRO [CB10110]

What is a class?

A class is a template for creating objects. It encapsulates data and functions that manipulate data, grouping data and functionality together.

Classes are based on object-oriented programming concepts. As JavaScript is not an object-oriented programming language at its core, JavaScript classes are considered syntactic sugar.

What this means is classes are there as a visual aid in Javascript. They were introduced in EcmaScript2015 (ES6) to allow developers to follow object-oriented programming patterns in a cleaner way. It’s just one of the many reasons that ES6 is so great.

class Pen {
    constructor(name, color, price){
        this.name = name;
        this.color = color; 
        this.price = price;
    }
    
    showPrice(){
        console.log(`Price of ${this.name} is ${this.price}`);
    }
}
const pen1 = new Pen("Marker", "Blue", "$3");
pen1.showPrice();

But…wait! vRO doesn’t support ES6

Aria Automation Orchestrator (or vRO) doesn’t support ES6. It uses ES5.1 and in ES5.1, there is no such keyword as class. However, we can still use function construct to create a psuedo-class in vRO because a class is technically a function with prototype-based inheritance.

Before classes existed, prototypes were used to emulate classes in JavaScript. A prototype is a default object attached to every JavaScript function and object. Additional properties can be attached to a prototype, which helps us emulate JavaScript classes. We can see that when we transpile a ES6 class to ES5 syntax on Babel.

How to create a local class in vRO?

Let’s see how to create to a class in vRO using similar syntax structure. We can create the same Pen class using function as

function Pen(name, color, price) {
    this.name = name;
    this.color = color;
    this.price = price;
}
Pen.prototype.showPrice = function(){
    System.log("Price of "+ this.name+" is "+this.price);
}
//Calling Pen class locally
const pen1 = new Pen("Marker", "Blue", "$3");
pen1.showPrice();

This will create a class that can be used locally inside a workflow scriptable task or an action. But what if you want to use a class globally in vRO, across actions and workflows, just like any other vRO SDK class. Let’s see how we can create that.

Create a globally callable class in vRO

To create a global class in vRO, we can use the action construct that is easily callable both in Workflows and Actions.

Steps

• Create a new action module to store your custom classes. eg. in.co.cloudblogger.customclasses
• Create a new action with class name. eg. Pen

• Create a function which is basically the pseudo-class very similar to what we did for a local class. But here, we have to return that function. Lets see the example of Pen.

/**
 * @function Pen
 * @param {string} name 
 * @param {string} color 
 * @param {string} price 
 *
 * @return {*} A new Pen instance 
 */
function Pen(name, color, price) {
    this.name = name;
    this.color = color;
    this.price = price;
}

Pen.prototype.showPrice = function(){
    System.log("Price of "+ this.name+" is "+this.price);
}

Pen.prototype.showColor = function(){
    System.log("Color of "+ this.name+" is "+this.color);;
}

return Pen;

• This class has 3 inputs, so add them as Inputs in action.

• Set Return type to Any. Or you can also create a Composite Type and set it in Return type.

OR

It’s time to test it

• Go to a scriptable task or an action where you want to call this Pen class.
• Call the class action here in the first line.

var Pen = System.getModule("in.co.cloudblogger.customclasses").Pen();

• Now, instantiate a pen object using the new keyword.

const pen1 = new Pen("Marker", "Blue", "₹30");

• That’s it. You can call the method/attributes inside the Pen class like any other class.

var Pen = System.getModule("in.co.cloudblogger.customclasses").Pen();

// Pen 1
const pen1 = new Pen("Marker", "Blue", "₹30");
pen1.showPrice();
pen1.showColor();

//Pen 2
const pen2 = new Pen("Roller", "Black", "₹200");
pen2.showPrice();
pen2.showColor();

Class Inheritance in Orchestrator

Inheritance is useful for code reusability: reuse properties and methods of an existing class when you create a new class. We can utilize the prototype-based inhertiance inside Orchestrator JavaScript as shown below:

var Shape = function (id, x, y) {
    this.id = id;
    this.move(x, y);
};
Shape.prototype.move = function (x, y) {
    this.x = x;
    this.y = y;
};

var Rectangle = function (id, x, y, width, height) {
    Shape.call(this, id, x, y);
    this.width  = width;
    this.height = height;
};
Rectangle.prototype = Object.create(Shape.prototype); 

var R = new Rectangle(1,2,3,4,5);
System.log(R.x); //2
R.move(6,7);
System.log(R.x); //3

Here, we can observe that the Rectangle.prototype = Object.create(Shape.prototype) statement makes the Rectangle prototype’s constructor property point to Shape which overrides the Rectangle prototype’s constructor property and allows for delegation which virtually results in class inheritance.

Advantages

One big advantage of using these global classes is that you can create beautiful and well-organized code for vRO. Other one being the ability to create multiple methods in your class and use them using one object. Ex.

var MathFunctions = {
    sum: function(a, b) {
        return a + b;
    },
    sub: function(a, b) {
        return a - b;
    },
    div: function(a, b) {
        return a / b;
    }

};
return MathFunctions;

var MathFunctions = System.getModule("in.co.cloudblogger.customclasses").MathFunctions();
var sum = MathFunctions.sum(1, 2);
var diff = MathFunctions.sub(10, 2);

Limitations

• Custom class/Composite type is detected by vRO as a object or Properties. Learn more here.

That’s all in this post. I hope you like it. Feel free to reach out in the comments if you have any concerns.

References

• Babel Transpiler compatible with vRO: You can use to convert any ES6 or TypeScript code to ES5. Don’t forget to change console.log() to System.log(). Trick here is to use loose and forceAllTransforms options in Babel which generates ES5-style code.

• Article by Alexandre Marques