1. What is a class?
2. But…wait! vRO doesn’t support ES6
3. How to create a local class in vRO?
4. Create a globally callable class in vRO
   1. Steps
   2. It’s time to test it
5. Advantages
6. Limitations
7. References

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();

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.

• No option to extend classes. I even used Babel to generate a transpiled version of extends

function _inherits(subClass, superClass) {
    if (typeof superClass !== "function" && superClass !== null) {
        throw new TypeError("Super expression must either be null or a function");
    }
    subClass.prototype = Object.create(superClass && superClass.prototype, {
        constructor: {
            value: subClass,
            writable: true,
            configurable: true
        }
    });
    Object.defineProperty(subClass, "prototype", {
        writable: false
    });
    if (superClass) _setPrototypeOf(subClass, superClass);
}

function _setPrototypeOf(o, p) {
    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
        o.__proto__ = p;
        return o;
    };
    return _setPrototypeOf(o, p);
}

But this throws error InternalError: Changing attributes not supported for Function prototype property

That’s in this post. I hope you like it.

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