I would like to add some Buttons that use UI Actions. Hence I am trying to add a Action Bar to my page. Unfortunately, I cannot find any working examples and the documentation is also not really helpful.
Could you please explain me how to use this component?
I found a solution how to use the actionbar. I can imagine my future self or others will face this problem again. So here are two tutorials. In the first I describe how to get the Actionbar running for a specific form. The second one outlines how to use a custom UI Action in a button. Before following one of the tutorials I recommend to understand how you need to configure an UI Action so that you can use it in your workspace.
0. How to set up an UI Action to use it in a workspace
As a prerequisite an UI Action has to be configured to be useable in a workspace. See the screenshots below for an example.
New Ui Action form upper part:
New Ui Action form lower part:
Fields on the form:
The documentation provides an overview of the most important fields. However there are a few which need some further explanation:
Field
Explanation
Client
If this field is set to true a field opens where you can write your client script that will be executed. If it is set to false only the field to write server-side scripts is visible and will be executed.
Workspace Form Button
In the tutorial how to use the Actionbar I show how to retrieve the list of actions for a form. If this field is not set to true the action will not show in the list of all UI action. Hence, it must be set to true.
Workspace Form Menu
If desired the UI action can also be part of the form menu. Set it to true if this should be the case.
Workspace Client Script
Write your on script that should execute. Please bear in mind that there are some limitations. The screenshot above shows how to reload the page on click. Other UI actions might serve as a good source for inspiration.
Format for Configurable Workspace
When this field is set to true and you submit the form then the system automatically creates a new UX Form Action. This is a convenience feature. You could also create a new record in the UX Form Action list on your own.
1. How to use UI Actions in the Actionbar
Set up a Page with a Form component.
Add a data resource of the "Glide Form" type:
Connect the data resource to a table and set a sys ID. If no record is existing yet use -1 as a sys ID. This will set up the form to create a new record.
If everything is set up correctly the data resource should display data in the preview pane on the right:
The table nowRecordCommonUiactionbar contains the object the holds all data to configure the action bar:
Unfortunately the text fields are not fully visible in the screenshot. Hence, I list the configuration below:
If a UI Action is configured to be used in a workspace you can also use it in a custom button in a workspace.
In the Events tab add a new event handler to the "Button clicked" event.
The event handler should be "Execute Ui Action". In the Action Sys Id field add the Sys Id of the UI Action. You can retrieve the Sys Id by opening the UI Action record, right-clicking on the header and clicking "Copy sys_id".
The button should execute the UI action when clicking the button in the workspace.
I found a solution how to use the actionbar. I can imagine my future self or others will face this problem again. So here are two tutorials. In the first I describe how to get the Actionbar running for a specific form. The second one outlines how to use a custom UI Action in a button. Before following one of the tutorials I recommend to understand how you need to configure an UI Action so that you can use it in your workspace.
0. How to set up an UI Action to use it in a workspace
As a prerequisite an UI Action has to be configured to be useable in a workspace. See the screenshots below for an example.
New Ui Action form upper part:
New Ui Action form lower part:
Fields on the form:
The documentation provides an overview of the most important fields. However there are a few which need some further explanation:
Field
Explanation
Client
If this field is set to true a field opens where you can write your client script that will be executed. If it is set to false only the field to write server-side scripts is visible and will be executed.
Workspace Form Button
In the tutorial how to use the Actionbar I show how to retrieve the list of actions for a form. If this field is not set to true the action will not show in the list of all UI action. Hence, it must be set to true.
Workspace Form Menu
If desired the UI action can also be part of the form menu. Set it to true if this should be the case.
Workspace Client Script
Write your on script that should execute. Please bear in mind that there are some limitations. The screenshot above shows how to reload the page on click. Other UI actions might serve as a good source for inspiration.
Format for Configurable Workspace
When this field is set to true and you submit the form then the system automatically creates a new UX Form Action. This is a convenience feature. You could also create a new record in the UX Form Action list on your own.
1. How to use UI Actions in the Actionbar
Set up a Page with a Form component.
Add a data resource of the "Glide Form" type:
Connect the data resource to a table and set a sys ID. If no record is existing yet use -1 as a sys ID. This will set up the form to create a new record.
If everything is set up correctly the data resource should display data in the preview pane on the right:
The table nowRecordCommonUiactionbar contains the object the holds all data to configure the action bar:
Unfortunately the text fields are not fully visible in the screenshot. Hence, I list the configuration below:
If a UI Action is configured to be used in a workspace you can also use it in a custom button in a workspace.
In the Events tab add a new event handler to the "Button clicked" event.
The event handler should be "Execute Ui Action". In the Action Sys Id field add the Sys Id of the UI Action. You can retrieve the Sys Id by opening the UI Action record, right-clicking on the header and clicking "Copy sys_id".
The button should execute the UI action when clicking the button in the workspace.