Hiding empty variables in UI Formatters in Service PortalIssue <!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } Service Portal does not display variables correctly when using the Variable Editor and Approval Summarizer UI Formatters on Requested Item and Approval forms. Empty variables — those with no system-generated or user-entered value — appear in the formatters instead of being hidden. This article describes the available approaches to suppress empty variables in the Variable Editor and Approval Summarizer on the sc_req_item and sysapproval_approver forms in Service Portal. Release<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } All Cause<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } Service Portal is built on Angular. UI Macros are built on Jelly, which does not work in Service Portal. This incompatibility prevents standard UI Macro configurations from controlling variable visibility in the Service Portal context. Resolution<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } Two UI Formatters control variable display on the Requested Item (sc_req_item) and Approval (sysapproval_approver) forms: Approval SummarizerVariable Editor The following approaches address each formatter separately. Option 1 — Customize the Variable Editor UI Macro The Variable Editor UI Formatter uses the UI Macro com_glideapp_servicecatalog_veditor. This macro can be modified to hide empty variables. Locate the UI Macro com_glideapp_servicecatalog_veditor in your instance.Create a copy of com_glideapp_servicecatalog_veditor to use as a custom UI Macro to avoid upgrade conflicts.In the custom macro, add logic to check whether each variable has a value before rendering it. 📄 Added context from ServiceNow docs: one approach is to create Display Business Rules on the sc_req_item and sc_task tables that run before a record is displayed; these rules query the sc_item_option_mtom table to identify variables with empty values, store them in a scratchpad variable, and then use a corresponding client script to call g_form.setDisplay() to hide those empty variables in the Variable Editor.Update the Variable Editor UI Formatter to reference the new custom UI Macro instead of the default one. Option 2 — Customize the Approval Summarizer UI Macro The Approval Summarizer UI Formatter uses the formatter approval_summarizer_main.xml, which is embedded in the base code and cannot be modified directly. Locate the UI Macro approval_variable_summary in your instance. This macro renders variable data within the Approval Summarizer formatter through a chain of Jelly calls from the Approval Formatter.Add logic to the approval_variable_summary macro to check for empty values before rendering, so that empty variables are suppressed on the approval form. 📄 Added context from ServiceNow docs: updating this macro to check for empty values before rendering allows empty variables to be suppressed on the approval form.To permanently exclude a specific variable from all approval summaries regardless of its value, open the variable record and uncheck the Visible on Summaries field. Note: Catalog UI policies can be applied to the sc_req_item, sc_task, and catalog item forms using their advanced view, but they cannot be applied on the Approval form. Variables hidden on the catalog form via UI policies may still appear in the Approval Summarizer, sometimes showing default or empty values. Use the approval_variable_summary macro modification or the Visible on Summaries field to control variable visibility on the Approval form. Option 3 — Implement Catalog Client Scripts As an alternative to modifying the UI Formatters, Catalog Client Scripts at the catalog item level can control variable visibility. Go to Catalog Client Scripts in your instance.Create or open a Catalog Client Script for the relevant catalog item.Select Applies on Requested Items in the Catalog Client Script record to ensure the script runs on Requested Item forms.Add script logic to set each empty variable's display to not visible when it has no value. Note: These modifications are beyond the scope of Support. Customers are responsible for implementing and maintaining these configuration changes.