Skip to main content

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.

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.
// This method is called every time the brick receives a new trigger event.
// Override `setupExecution()` to change that behavior.
}
}

registerBrick('017db97537b4c9f074b3', NewCodedAction);

The update method takes four 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 are none.
  • The final parameter 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.
// This method is called every time the brick receives a new trigger event.
// Override `setupExecution()` to change that behavior.

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.

CODE Action API

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