Managing actions
Action editor
Actions are managed in the action editor in the bottom panel of the app editor. You can easily toggle this panel on and off by using the middle icon in the header of the editor. In case you need more space, you can expand the bottom panel by using the expand-icon in the top-right of that panel. Resizing the panel is possible by dragging the top-border of the panel up and down.
The following cast summarizes all basic UI interactions of the action editor panel:
The action editor panel can be in one of three possible states:
Hidden: The panel is not visible and does not distract you from building the UI and configuring components.
Reduced: The panel is visible, but only takes 20-30% of the screen. This is the default state when it is activated, and works perfectly for modifications of small scripts
Expanded: The panel was expanded to increase the size of the code editor. Ideal for creating or editing larger pieces of code
Action types
Each action has a specific type, which determines how they are configured, with which datasources they may be connected, and of course how they are executed. This action type is usually tightly coupled with the datasource type that can be associated with the particular action. For example, a MYSQL action is able to operate on any MYSQL datasource of your workspace, however it may not operate on e.g. a POSTGRES database. A SALESFORCE action may perform REST requests or execute SOQL queries against a SALESFORCE datasource, but not with any other datasource type. You will find a dedicated action type for each existing datasource type.
On top of that, there are JS actions, which are not connected to any datasource at all. Instead, they allow to write custom JavaScript code, which uses state variables, mutates component state by using their exposed setters or trigger other actions (learn more).
Creating actions
Actions are created via the plus-icon above the action list. Clicking that icon opens the action type choice, in which you can select the datasource type you would like to interact with, or alternatively select the JS type to write native JavaScript code. The new action will be placed at the bottom of the list, which means that you have to drag and drop it to its final place manually.
Actions are currently always create at top-level, i.e. it is not possible to create new actions in a specific target folder immediately. We are working on this issue and hope that we can make this experience more convenient soon.
After creating an action, its type cannot be changed. In case you have chosen the wrong type, the only way to fix it is to delete the action with the wrong type, and create a new action with the correct one.
Organizing actions with folders
With a growing number of actions in your app, a flat action list becomes unusable fairly quickly. For that reason, the action editor allows to create a nested folder tree, similar to what you are already used to in your file system. Folders are created in exactly the same way like actions, and can be repositioned with drag and drop as well. It is easy to place actions or folders in a parent folder by dragging and dropping it onto that folder:
Dropping an item onto a closed folder will automatically expand it:
There is no limitation with regards to how many nested levels your folder tree can have, so you can create complex structures that are still maintainable and convenient to use.
Editing actions
The action type determines how exactly an action should be configured. For an SQL-based action, the main input is the code editor to write the SQL query. However, for a REST request, you will rather configure the URL path, request method, request headers, body, etc.
Therefore, the UI will look differently depending on the type of the action you are editing. Please refer to the integration reference to learn more about the configuration options for each individual action type.
The common principle for all actions, except JavaScript actions, is that you are required to select the datasource on which you would like to run the particular action. The list will only suggest datasources that have the same type like your action. For convenience, you can also create a new datasource in case that will be necessary.
Like state variables and computed values, actions follow a different process of saving changes. While any changes in the application canvas and in the component properties is saved instantly, actions require you to hit the "Save"-button. This persists your changes, distributes them to other collaborators, and activates the new version of your action for future runs. The reason for this mechanism is to prevent unfinished changes disrupting the functionality of your app for yourself or other collaborators.
Use the keyboard shortcut CMD+s (Mac) / CTRL+s (Win) to save changes without using the "Save"-button.
Deleting actions
Actions can be deleted via the context menu of the action in the list. In case the action is used anywhere in a code snippet, you will receive a warning about these usages. Ignoring this warning will break these code snippets and it is therefore highly recommended to verify these usages before proceeding with the action deletion (learn more).
Deleting an action cannot be undone. Once an action is deleted, there is no way to bring it back. Therefore, caution is advised!
Last updated
