UI macros
-
- UpdatedAug 1, 2024
- 6 minutes to read
- Xanadu
- Building applications
UI macros are discrete scripted components administrators can add to the user interface.
- All formatters
- The Service Catalog cart
- The action icons next to fields
- The action icons on forms and lists
- The widgets of a content management system
- The Orchestration activity designer
Administrators can create their own UI macros to provide custom controls or interfaces. Creating UI macros requires knowledge of Jelly script. Review the existing UI macros for examples and suggested approaches. Those who want to build custom interfaces with JavaScript technologies should consider Service Portal as an alternative.
UI macro basics
UI macros can be used to build solutions that can’t be built using the available catalog variable types.
Accessible UI macros
Several UI macros are available in the UI macros [ui_macros] table. These UI macros have names starting with ui_
and emulate the behavior of a subset of standard form field types for use in UI pages. For example,
the ui_date_time UI macro can act like a glide_date_time field in a UI page, providing a type-able input field with a date/time selector.
Attributes | jvar-prefixed variables |
---|---|
name | jvar_name |
value | jvar_value |
onchange | jvar_onchange |
The ui_
-prefixed UI macros include descriptions specifying supported attributes that can (or must) be provided in the UI page's <g:> Jelly tag. To view available UI macros, navigate to
All > System UI > UI macros.
Custom UI macros
The ui_example UI macro uses three jvar-prefixed variables: jvar_name, jvar_test_attribute and jvar_laptop_type. These variables can be provided to the UI macro as name, test_attribute and laptop_type attributes in a <g:> Jelly tag in a UI page.
- Creating the ui_example UI macro
- Navigate to All > System UI > UI Macros and select New.Name the macro ui_example and add the following script to the XML field:
- Using the macro in a UI page
- Navigate to All > System UI > UI Pages and select New. You will be asked to select an administrator role.Name the UI page and add the following script to the HTML field:
- Checking output
- In the UI page, you can click Try It to view the results.
Calling UI macros
Administrators can call UI macros from certain record types associated with the user interface.
Record type | Example |
---|---|
Dictionary attribute | Display an icon for a reference field: |
UI page | Display something on a UI page: |
UI macro | Call a UI macro from another UI macro: |
UI macro form
Each UI macro record consists of a name and an XML document written in Jelly code.
Custom approval UI macro
This section describes how to create a custom approval UI macro.
Script Name: Custom Approval UI Macro
Type: UI Macro
Description: Here is an option to get more detail out of the My
Approvals view of an Execution Plan. This can be done by creating a new UI macro.
Navigate to System UI and click UI
Macros. First, you will need to rename the existing
approval_summarizer_sc_task
to something like
approval_summarizer_sc_task_old
and deactivate it. Then you
will need to create a new one using the same name
(approval_summarizer_sc_task
). The name should basically tell
you what the macro does and what it applies to. In this case, we're replacing an
existing one so we decided to re-use the existing name.

Then you should copy the xml script at the bottom of this article into the xml code window in the new UI macro. This is great way to give some detail to an approver when you are doing line item approvals via approval tasks within the Service Catalog Execution Plans.
The old way
This is the view you see in My Approvals when using an approval task via the old method.

Notice there is not much detail telling the approver what they are actually approving. You can see the short description of the task but not much around what the item is.
The new way
This is the view you will see if you use the xml script below in place of the OOB (out-of-box) UI macro.

Using this method you can see details much like the request approval. You have a link into the item ordered, a short description (which contains the ability to expand the variables from the item), price, quantity and the total price. This helps the approver in that it shows more detail. They can now see what they are actually approving.
Script:
On this page
Related Content
- UI pages
UI pages can be used to create and display forms, dialogs, lists, and other UI components.
- Jelly tags
Use Jelly to turn XML into HTML.
- <g:ui_form/>
This tag defines a form on the UI page.