Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 13 additions & 11 deletions content/en/docs/refguide/modeling/resources/javascript-actions.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,17 @@ To learn how to create, configure, and use a JavaScript action, see these [Build

{{% alert color="info" %}}

In Studio Pro 11.9, a new modernized JavaScript action editor was released in beta. Enable it via **New Features** in the Studio Pro **Preferences**.
In Studio Pro 11.12, the new modernized JavaScript action editor was released in general availability (GA). To use the old legacy JavaScript Action Editor, go to **Preferences** > **New Features** > **Use the legacy JavaScript Action editor**.

In Studio Pro 11.9, the new modernized JavaScript action editor was released in beta. Enable it via **New Features** in the Studio Pro **Preferences**.

{{% /alert %}}

## General Settings

Double-click the JavaScript action in your **App Explorer** to open the action's settings:

{{< figure src="/attachments/refguide/modeling/resources/javascript-actions/javascript-action-settings-no-para.png" alt="javascript settings" width="600" class="no-border" >}}
{{< figure src="/attachments/refguide/modeling/resources/javascript-actions/javascript-action-settings-no-para.png" alt="javascript settings" >}}

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

Expand All @@ -46,15 +48,15 @@ This setting handles a JavaScript action's name, which a nanoflow refers to when

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:

{{< figure src="/attachments/refguide/modeling/resources/javascript-actions/parameter-naming.png" alt="parameter" class="no-border" >}}
{{< figure src="/attachments/refguide/modeling/resources/javascript-actions/parameter-naming.png" alt="parameter naming" >}}

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

{{< figure src="/attachments/refguide/modeling/resources/javascript-actions/parameter-code.png" alt="parameter code" class="no-border" >}}
{{< figure src="/attachments/refguide/modeling/resources/javascript-actions/parameter-code.png" alt="parameter code" >}}

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:

{{< figure src="/attachments/refguide/modeling/resources/javascript-actions/call-js-action-dialog.png" alt="call javascript action dialog" width="400" class="no-border" >}}
{{< figure src="/attachments/refguide/modeling/resources/javascript-actions/call-js-action-dialog.png" alt="call javascript action dialog" >}}

The parameter types supported by JavaScript actions are described below.

Expand Down Expand Up @@ -118,19 +120,19 @@ When using a JavaScript action for a specific platform in a nanoflow, it will re

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:

{{< figure src="/attachments/refguide/modeling/resources/javascript-actions/type-parameter.png" alt="type parameter" class="no-border" >}}
{{< figure src="/attachments/refguide/modeling/resources/javascript-actions/type-parameter.png" alt="type parameter" >}}

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 example action has been given *Example Action* caption text, assigned *Workshop* as its category, and given no icon or image:

{{< figure src="/attachments/refguide/modeling/resources/javascript-actions/expose-jsaction.png" alt="expose action" class="no-border" >}}
{{< figure src="/attachments/refguide/modeling/resources/javascript-actions/expose-jsaction.png" alt="expose action" >}}

When the **Expose as nanoflow action** option is selected, the JavaScript will appear in the **Toolbox** of a [nanoflow editor](/refguide/nanoflows/) 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 and image are being displayed as no custom icon and image were assigned:

{{< figure src="/attachments/refguide/modeling/resources/javascript-actions/workshop-exposed.png" alt="workshop exposed" class="no-border" >}}
{{< figure src="/attachments/refguide/modeling/resources/javascript-actions/workshop-exposed.png" alt="workshop exposed" >}}

### Caption

Expand Down Expand Up @@ -160,13 +162,13 @@ A separate image can be provided for the [dark mode](/refguide/preferences-dialo

## Documentation

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

{{< figure src="/attachments/refguide/modeling/resources/javascript-actions/documentation-pro.png" alt="documentation" width="450" class="no-border" >}}
{{< figure src="/attachments/refguide/modeling/resources/javascript-actions/documentation-pro.png" alt="documentation" >}}

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:

{{< figure src="/attachments/refguide/modeling/resources/javascript-actions/documentation-js-file.png" alt="documentation js file" width="450" class="no-border" >}}
{{< figure src="/attachments/refguide/modeling/resources/javascript-actions/documentation-js-file.png" alt="documentation js file" >}}

## Code

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading