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 noreturn
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.
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.