Skip to main content
Version: 2.4

Create a Coded Action

Coded actions are one of the three types of coded brick that you can create in DRAW and implement with CODE.

In this tutorial, you will create a simple action that prints a string when an event occurs, e.g. when we click on a button.

tip

The code of the Olympe Core bricks is open source and publicly available on GitHub. This is a great source of examples covering many different scenarios.

Create the action signature in DRAW and generate the CODE template​

The procedure is the same as in the Coded Function tutorial, but instead of a Coded Function you will use a Coded Action from the Marketplace. Call the Action Print, add to it only one input called text and then generate its skeleton.

Implement your brick with CODE​

Open Print.js in an editor. The files contains a single class Print, which contains a single method update. Implementing a coded action consists in implementing this method.

import { ActionBrick, registerBrick } from 'olympe';

export default class Print extends ActionBrick {

    /**
     * @override
     * @protected
     * @param {!BrickContext} $
     * @param {string} text
     * @param {function()} forwardEvent
     */
    update($, [text], [forwardEvent]) {
        // Write your code here.
        // Check https://olympe.support for documentation.
        // Check https://github.com/olympeio/CORE for examples.
        //
        // This method is executed every time the brick's input Control Flow is triggered.
        // Override `setupExecution()` to change this behavior.

        // Trigger the output Control Flow
        forwardEvent();
    }
}

registerBrick('017db97537b4c9f074b3', Print);

The update method takes three groups of parameters:

  • The first parameter is the brick context: $. Its purpose and possible uses are described in Understanding Coded Bricks and Understanding Brick Context.
  • The second group of parameters are the inputs of the action which you defined in DRAW: text.
  • The third group of parameters are the outputs of the function. The update method expects no return statement: a coded action's outputs are always returned through callbacks. In this case there is forwardEvent, which represents the brick's output control flow.

At the bottom of the file, registerBrick is a function taking the unique identifier of your coded function in DRAW to associate it with the JavaScript class in CODE.

We can now implement the function. Find the lines

// Write your code here.
// Check https://olympe.support for documentation.
// Check https://github.com/olympeio/CORE for examples.
//
// This method is executed every time the brick's input Control Flow is triggered.
// Override `setupExecution()` to change this behavior.

// Trigger the output Control Flow
forwardEvent();

and replace them with the brick implementation:

console.log(text);
// Call forwardEvent once the brick finished its processing
forwardEvent();

Calling forwardEvent(); triggers the output control flow of the Print brick. If that control flow is plugged within other bricks in DRAW, those bricks will start their execution. It is therefore important that forwardEvent() is called after the processing of the brick is completed and any potential output has been set.

Test your brick​

In DRAW, click on the Run button in the top right corner as for the Coded Function tutorial.

Type something in the text input and open your browser console, then press the Run action button. You should see your text appearing in the console.

info

This Print brick is quite simple but very useful, and is already available in the Marketplace under the name Log.

JavaScript and TypeScript implementations​

Here is the code for the JavaScript and equivalent TypeScript implementation of Print.ts.

import { ActionBrick, BrickContext, registerBrick } from 'olympe';

export default class Print extends ActionBrick {

    /**
     * @override
     * @protected
     * @param {!BrickContext} $
     * @param {!Array} inputs
     * @param {function()} forwardEvent
     */
    update($, [text], [forwardEvent]) {
        console.log(text);
        // Call forwardEvent once the brick finished its processing
        forwardEvent();
    }
}

registerBrick('017db97537b4c9f074b3', Print);

CODE Action API​

To deepen your understanding of the CODE API you may read Understanding Coded Bricks and High Order Bricks.