UI Builder - How to use the action bar?

Hendrik6
Kilo Guru

Hello

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?

Kind regards,

Hendrik

1 ACCEPTED SOLUTION

Hendrik6
Kilo Guru

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:

find_real_file.png

New Ui Action form lower part:

find_real_file.png

Fields on the form:

The documentation provides an overview of the most important fields. However there are a few which need some further explanation:

FieldExplanation
ClientIf 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 ButtonIn 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 MenuIf desired the UI action can also be part of the form menu. Set it to true if this should be the case.
Workspace Client ScriptWrite 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 WorkspaceWhen 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:
    find_real_file.png
  • 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:find_real_file.png
  • The table nowRecordCommonUiactionbar contains the object the holds all data to configure the action bar:
    find_real_file.png
  • Unfortunately the text fields are not fully visible in the screenshot. Hence, I list the configuration below:
    • Actions: 
      @data.glide_form_record.nowRecordCommonUiactionbar.actionNodes
    • @data.glide_form_record.nowRecordCommonUiactionbar.daModel
       
    • @data.glide_form_record.nowRecordCommonUiactionbar.daClientActionContract
  •  
    Now the Actionbar should display the buttons. 

2. Hot to use an UI Action in a custom Button 

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.

find_real_file.png

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

find_real_file.png

The button should execute the UI action when clicking the button in the workspace.

View solution in original post

3 REPLIES 3

Muhammad Khan
Mega Sage
Mega Sage

Hi,

 

You may find this doc helpful.

https://docs.servicenow.com/bundle/tokyo-customer-service-management/page/product/customer-service-m...

 

See the below image for reference.

find_real_file.png

find_real_file.png

Hello Muhammad

Thank you for your reply! I read already this article before. However, it unfortunately was not helpful for me.

Kind regards,

Hendrik

Hendrik6
Kilo Guru

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:

find_real_file.png

New Ui Action form lower part:

find_real_file.png

Fields on the form:

The documentation provides an overview of the most important fields. However there are a few which need some further explanation:

FieldExplanation
ClientIf 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 ButtonIn 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 MenuIf desired the UI action can also be part of the form menu. Set it to true if this should be the case.
Workspace Client ScriptWrite 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 WorkspaceWhen 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:
    find_real_file.png
  • 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:find_real_file.png
  • The table nowRecordCommonUiactionbar contains the object the holds all data to configure the action bar:
    find_real_file.png
  • Unfortunately the text fields are not fully visible in the screenshot. Hence, I list the configuration below:
    • Actions: 
      @data.glide_form_record.nowRecordCommonUiactionbar.actionNodes
    • @data.glide_form_record.nowRecordCommonUiactionbar.daModel
       
    • @data.glide_form_record.nowRecordCommonUiactionbar.daClientActionContract
  •  
    Now the Actionbar should display the buttons. 

2. Hot to use an UI Action in a custom Button 

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.

find_real_file.png

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

find_real_file.png

The button should execute the UI action when clicking the button in the workspace.