JavaScript Actions

Introduction

With JavaScript actions, you can extend your application’s functionality in ways nanoflows alone cannot. To use a JavaScript action, call it from a nanoflow using the JavaScript Action Call.

To learn how to create, configure, and use a JavaScript action, see these Build JavaScript Actions how-tos.

General Settings

After double-clicking a JavaScript action in your Project Explorer you will see the JavaScript action’s settings:

The settings for JavaScript actions and their implications are detailed below.

Name

This setting handles a JavaScript action’s name, which a nanoflow refers to when performing a call to it. This name is also the name of the generated .js file.

Parameters

Parameters pass data to JavaScript actions. For example, if you had a JavaScript action which multiplied numbers, parameters would define the numbers to be multiplied. A JavaScript action can have zero or more parameters. Each parameter should have a unique name. You may add a parameter by clicking Parameters > Add, and then customize that parameter to pass data into a JavaScript action:

In a JavaScript action’s Code tab, you can see its parameters’ values and handle its implementation. Each parameter has a name (1), type (2), category, description (3), and return type (4):

You will see a parameter’s category (1), parameter name (2), and description (3) in the Call JavaScript Action dialog box after double-clicking its activity in your nanoflow:

The parameter types supported by JavaScript actions are described below.

Name

This setting handles the parameter’s name. A name is required. Names must start with a letter and contain only letters. Spaces are not permitted in names.

Type

Category

Use categories to keep parameters apart in a JavaScript Action Call. Categories are useful for making logical groups of parameters when your project has several parameters. If you do not specify a category, the parameter will appear in the Input group.

Description

For projects with several parameters, descriptions serve as useful reminders of parameters’ exact purposes. Descriptions also allow you to describe your parameters to project collaborators. Descriptions may contain both upper- and lower-case letters, numbers, and symbols.

Return Type

The return parameter type determines the type of data a JavaScript action returns. Because many APIs are asynchronous, you can also return a Promise object which resolves to this type. The return value of the JavaScript action can be given a name and stored so it can be used in the nanoflow where it is called. For all types which you can use for parameters, you can also use a return type. In addition, you can use the return type ‘Nothing’ if no data should return from the action.

Type Parameter

A type parameter is a placeholder for an entity type which will be filled with a specific entity when called in a nanoflow. Type parameters can be used when configuring the data type of a parameter, which allows users to pass an object or list of an arbitrary entity type. They can easily be added, edited, or deleted:

A JavaScript action can have zero or more type parameters. Each type parameter should have a unique name.

Expose as Nanoflow Action

In the Expose as nanoflow action tab, it is possible to expose a JavaScript action as a nanoflow action. This sample action has been given Sample Action caption text, assigned Workshop as its category, and given no icon:

Exposing the JavaScript action will make it appear in the Toolbox window when editing a nanoflow in the category of your choice. When this action is used in a nanoflow, it will show the caption and icon you provided. The category and caption are apparent here, and the default icon is being displayed as no custom one was assigned:

Caption

A caption is required when exposing a JavaScript action. This caption will accompany your JavaScript action inside the nanoflow Toolbox window and can give helpful reminder information about your JavaScript action there.

Category

A category is required when exposing a JavaScript action. Use categories to organize JavaScript actions with similar purposes together in the nanoflow Toolbox window.

Icon

An icon is optional when exposing a JavaScript action. When no icon is selected, the default JavaScript action icon is used. The recommended size for an icon is 16x16 pixels.

Documentation

In the Documentation tab, press Edit to document a JavaScript action:

Documentation is visible in the Code tab. Your documentation also is copied into the JavaScript action as comment on the function in the corresponding .js file:

Code

In the Code tab, you can edit the JavaScript action code without leaving Studio Pro. The editor is based on the Monaco Editor. It offers features such as syntax highlighting and code completion. From Mendix 8.3 and above, the code can be written in modern JavaScript (ES8 / ES2017) and can use functions like async with await and Promise. The code will be transpiled and polyfilled for you to run (even on Internet Explorer 11).

The code has three sections: an import list, an extra code block, and a user code block. All code that is added should go in one of these blocks. Code outside the blocks will lost when re-generating the template code on deploy or update of the JavaScript action settings.

Additional imports should start with import and be placed above // BEGIN EXTRA CODE. Extra code should be placed between // BEGIN USER CODE and // END USER CODE. User implementation code should be placed between // BEGIN EXTRA CODE and // END EXTRA CODE.

// This file was generated by Mendix Studio Pro.
//
// WARNING: Only the following code will be retained when actions are regenerated:
// - the import list
// - the code between BEGIN USER CODE and END USER CODE
// - the code between BEGIN EXTRA CODE and END EXTRA CODE
// Other code you write will be lost the next time you deploy the project.
import { Big } from "big.js";

// BEGIN EXTRA CODE
 function sayHello(message) {
     window.alert("Hello: " + message);
 }
// END EXTRA CODE

/**
 * Show an alert message to an user.
 * @param {string} message - Message shown to the user.
 * @returns {Promise.<void>}
 */
export async function Hello(message) {
	// BEGIN USER CODE
	sayHello(message);
	return Promise.resolve();
	// END USER CODE
}

Read More

• JavaScript Action Call
• Nanoflows
• Build JavaScript Actions
• Java Action Call
• Microflow Call