---
sourceDocument: Australia Sales Customer Relationship Management
sourceDocumentLink: https://www.servicenow.com/docs/r/australia/order-management

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia Sales Customer Relationship Management

ft:clusterId :

    - omgmt

bundleId :

    - omgmt

workflow :

    - Customer and Industry


---

# ServiceNow Quote Experience layout UI effects

# ServiceNow Quote Experience layout UI effects {#ariaid-title1}

Release version: Australia  
Updated May 7, 2026  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 4 minutes to read
Summarize  
![AI sparkle icon](https://servicenow.com/docs/portal-asset/ai-sparkle-icon) Summarized using AI  
This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.  

## Summary of ServiceNow Quote Experience layout UI effects

UI effects in ServiceNow Quote Experience layouts add specific button functionalities within the ServiceNow CPQ environment.
Administrators can customize existing UI effects but cannot create new ones.
UI effects are defined by parameters such as type, target, location, and options, which determine their behavior and appearance.
They enhance user interaction by enabling actions like opening URLs, product searches, line detail views, and session refreshes directly from buttons in the layout.
Show full answer Show less  

## UI effect parameters and types

Each UI effect is identified primarily by a **type**, and may include:

* **target:** Defines how the effect is displayed (e.g., inline, modal, slideout, tab, window, lineDrawer, fullScreen).
* **location:** Specifies a URL or element ID relevant to the effect.
* **options:** Additional settings depending on the UI effect type.

Common UI effect types include:

* **url:** Opens a URL in various display modes; supports dynamic field values.
* **anchor:** Navigates to specific layout elements by element ID.
* **productSearch:** Opens product catalog for adding products, implicitly triggers the `upsertLines` event; typically used in grid header buttons.
* **lineDetail:** Opens detailed view of a selected line; used on line-level buttons.
* **reconfigure:** Opens configurator for selected products, also triggers `upsertLines`.
* **addFavorite:** Enables creating favorites from line selections; requires tenant setting for sharing favorites across users.
* **manageFavorites:** Opens the favorites manager interface.
* **refreshSession:** Refreshes session ID if changes are detected; no extra parameters needed.
* **exportLines:** Exports filtered and sorted line data to CSV; must be a header-level button.
* **showTier:** Opens a tier in full screen, commonly used to display line item grids.

## Access conditions and behavior

Access to UI effects is indirectly controlled by their context or associated events since UI effects lack direct access settings. For example, `productSearch` and `reconfigure` UI effects rely on the access settings of the `upsertLines` event. Buttons combining an event and a UI effect respect the stricter access condition of either. UI effects may be hidden or disabled based on line configurability or event restrictions, ensuring relevant and secure user interactions.

## Practical configuration examples

ServiceNow customers can configure UI effects using YAML or JSON in layout definitions. Examples include:

* **Product Search Button:** Opens product catalog in a slideout with optional favorites tab.
* **Line Detail Drawer:** Displays line details in a drawer interface.
* **Reconfigure Button:** Opens product configurator in a modal window.
* **Open URL:** Opens dynamic URLs in a new browser tab using transaction field values.
* **Add to Favorites and Manage Favorites:** Enables users to create and manage favorite selections.
* **Refresh Session:** Provides a button to check and refresh the user session.
* **Export Lines:** Allows exporting current line data based on applied filters and sorting.

## Key benefits for ServiceNow customers

* Enhances user experience by embedding powerful actions directly into quote layouts.
* Enables dynamic and contextual interactions such as product searching, reconfiguration, and data export.
* Supports customization of button behavior to fit business workflows without custom development.
* Access control integration ensures secure and context-sensitive UI actions.
* Facilitates efficient quote management and improves productivity within ServiceNow CPQ.  
Reference for UI effect types, parameters, access conditions, and YAML and JSON code examples for configuring button behavior in ServiceNow Quote Experience layouts in ServiceNow CPQ.

## UI effects overview {#quote-tm-ui-effects__overview}

UI effects are layout elements that add specific functionality to a button. Administrators can customize existing UI effects but can't create new ones. When a UI effect and an event are both present on the same button, the UI
effect runs after the event.

A UI effect is defined by a combination of parameters. All UI effects have a `type`. Some also have a `target`, `location`, or `options`.

## UI effect parameters {#quote-tm-ui-effects__parameters}

{#quote-tm-ui-effects__table_tvv_svp_jjc__entry__2}

| Parameter | Possible values |
|-|-|
| `type` | `url`, `anchor`, `productSearch`, `lineDetail`, `reconfigure`, `addFavorite`, `manageFavorites`, `refreshSession`, `showTier`, `exportLines` |
| `target` | `inline`, `tab`, `window`, `modal`, `slideout`, `lineDrawer`, `fullScreen` |
| `location` | A URL or an element ID in the layout. |
| `options` | Depends on the UI effect type. See the following type reference. |
[Table 1. UI effect parameter values]

{#quote-tm-ui-effects__table_tvv_svp_jjc}  
Note:  
Layout JSON is not validated and some parameter combinations aren't supported. Unsupported combinations may fail without indicating errors.

## UI effect type reference {#quote-tm-ui-effects__type-reference}

`url`
:   Opens a URL inline, in a tab, in a window, or in a modal or slideout iframe. Requires a `location` value containing the URL. Use curly braces to pass field values dynamically into the URL --- for
    example, `https://example.com/search?q={txn.custom.searchTerm}`. Common use cases include passing values to output documents or opening record pages in external systems.

`anchor`
:   Navigates to a specified element ID in the layout. Focuses or scrolls to the element and opens related parent elements in tabs or an accordion structure. Set `target` to `inline`.
    Requires a `location` value containing the element ID.

`productSearch`
:   Opens the product catalog and starts the Add Products flow. Implicitly runs the `upsertLines` event. Must be added to the `gridHeaderButtons` element. Target options:
    `slideout` or `modal`.

    Options:

    * `products: true` --- shows the Products tab.
    * `favorites: true` --- shows the User Favorites tab.
    * `actionLocation: footer | header | both` --- placement of the action buttons (Add Line, Configure, Done Configuring, Cancel). Defaults to `footer` if not specified.
    {#quote-tm-ui-effects__ul_uvv_svp_jjc}

`lineDetail`
:   Opens the line detail layout for a selected line. Must be on a line-level button. Target options: `modal`, `slideout`, `lineDrawer`.

`reconfigure`
:   Opens selected products in the Configurator for reconfiguration. Implicitly runs the `upsertLines` event. Can be on a line-level or header-level button. At the header level, requires a selection of
    lines. Target options: `modal`, `slideout`, `lineDrawer`. Supports the same `actionLocation` option as `productSearch`.

`addFavorite`
:   Opens a window to describe and create a favorite from the line selection. Can be on a line-level or header-level button. At the header level, requires a selection of lines. No other properties are supported.  
    Note:  
    To share favorites across users, a tenant setting must be enabled. Contact customer support to enable favorites sharing.

`manageFavorites`
:   Opens the Favorites Manager. Target options: `modal`, `slideout`, `inline`.

`refreshSession`
:   Checks whether the session has been modified and, if so, refreshes the session ID and merges changes. No additional parameters required.

`exportLines`
:   Exports to a CSV file all lines that meet the current sort, filter, and column visibility settings. Must be on a header-level button. No additional parameters required.

`showTier`
:   Opens a tier in full screen. To open the line item grid in full screen, set `target: fullScreen` and `location` to the tier variable name of the line items (typically
    `lineItems`). Works with any tier.

## Implicit event calls {#quote-tm-ui-effects__implicit-events}

Some UI effects run a related event automatically. The `productSearch` and `reconfigure` UI effects both implicitly call the `upsertLines` event when triggered.

## Access conditions {#quote-tm-ui-effects__access-conditions}

Access to a UI effect can't be controlled in the same way as access to an event. There are no UI settings comparable to the event access settings for UI effects directly.

However, access to a UI effect can be changed by its context or by related events.

* When a UI effect has an implicit event associated with it, the access conditions of that event determine the access conditions of the button and UI effect. To restrict when a `productSearch` UI effect can be triggered, apply those restrictions to the `upsertLines` event.
* A `reconfigure` button in the line item grid is hidden on lines that aren't configurable. At the header level, it is enabled only when every selected line is configurable.
* When a button has both an event and a UI effect, access is determined by the intersection of their individual access settings. If either the event or the UI effect is disabled or hidden, the entire button is disabled or hidden.
{#quote-tm-ui-effects__ul_vvv_svp_jjc}

## Code examples {#quote-tm-ui-effects__code-examples}

Product search (YAML):

    type: button
    variableName: addLines
    label: Add Lines
    uiEffect:
      type: productSearch
      target: slideout

Product search with favorites enabled (YAML):

    type: button
    variableName: addLines
    label: Add Lines
    uiEffect:
      type: productSearch
      target: slideout
      options:
        products: true
        favorites: true

Line details drawer (YAML):

    lineLevelButtons:
      - icon: settings
        label: reconfig
        uiEffect:
          type: lineDetail
          target: lineDrawer
        variableName: reconfig

Reconfigure (YAML):

    lineLevelButtons:
      - icon: settings
        label: Reconfigure
        uiEffect:
          type: reconfigure
          target: modal
        variableName: reconfig

Open URL in new tab with dynamic field value (YAML):

    columnorder: 1
    label: Google it
    type: event
    variableName: LinkToSite
    uieffect:
      type: url
      target: tab
      location: "https://google.com/search?q={txn.custom.search}"

Add to favorites (YAML):

    label: Add To Favorites
    uiEffect:
      type: addFavorite
    variableName: addFavorites

Manage favorites (YAML):

    label: Manage Favorites
    uiEffect:
      type: manageFavorites
      target: slideout
    variableName: manageFavorites

Refresh session (YAML):

    type: button
    variableName: Refresh
    label: Refresh
    uiEffect:
      type: refreshSession

Export lines (YAML):

    label: Export Lines
    uiEffect:
      type: exportLines
    variableName: exportLines

**Related concepts**   

* [Quote transaction layouts](https://www.servicenow.com/docs/Lw416qa_lBBm7jF66xiaKA "Layouts define the quote user interface in ServiceNow Quote Experience, controlling which fields, events, and UI effects are visible and how the quote is organized for users in ServiceNow CPQ.")  
**Related tasks**   

* [Create a quote transaction layout](https://www.servicenow.com/docs/itTjqjoZi~gQ_chAbMquUg "Create a layout in ServiceNow Quote Experience to define the quote interface for a stage in ServiceNow CPQ.")