UI display components
View examples of picklist, text, and number fields as they appear to end users in the ServiceNow CPQ UI.
Picklist fields
| Name | Options | Appearance | Notes |
|---|---|---|---|
| RadioButtons | Image omitted: cpq\_display-components-radio-buttons.png Radio buttons in horizontal direction | Single-select | |
| VerticalRadio | Image omitted: cpq\_display-components-vertical-radio.png Radio buttons in vertical direction | Single-select | |
| Radio | Image omitted: cpq\_display-components-radio.png Options | Single-select | |
| Checkbox | Image omitted: cpq\_display-components-checkbox.png Check boxes in horizontal direction | Multi-select | |
| VerticalCheckbox | Image omitted: cpq\_display-components-vertical-checkbox.png Check boxes in vertical direction | Multi-select | |
| Picklist | Image omitted: cpq\_display-components-picklist.png Picklist with multiple options\[Omitted image "cpq\_display-components-picklist-2.png"\] Alt text: Picklist with a single option | Single-select; includes combo box for filtering | |
| BasicPicklist | Image omitted: cpq\_display-components-basic-picklist.png Basic picklist\[Omitted image "cpq\_display-components-basic-picklist-2.png"\] Alt text: Basic picklist with a single option | Single-select; selection only; no combo box for filtering | |
| MultiSelectPicklist | Image omitted: cpq\_display-components-multiselect-picklist.png Multi select picklist\[Omitted image "cpq\_display-components-multiselect-picklist-2.png"\] Alt text: Multiple options\[Omitted image "cpq\_display-components-multiselect-picklist-3.png"\] Alt text: Multiselect - picklist | Multi-select; includes combo box for filtering | |
| VisualPicker | Image omitted: cpq\_display-components-visual-picker.png Visual picker options | Single-select using images | |
| MultiSelectVisualPicker | Image omitted: cpq\_display-components-multiselect-visual-picker.png Visual pickers to select multiple options | Multi-select using images | |
| ExtendedPicklist | Image omitted: cpq\_display-components-extended-picklist-1.png Extended picklist\[Omitted image "cpq\_display-components-extended-picklist-2.png"\] Alt text: ERP application image | Single-select using images; picklist extension; includes combo box for filtering | |
| MultiSelectExtendedPicklist | Image omitted: cpq\_display-components-multiselect-extended-picklist-1.png MultiSelectExtendedPicklistappearing as a list\[Omitted image "cpq\_display-components-multiselect-extended-picklist-2.png"\] Alt text: MultiSelectExtendedPicklist appearing as different options | Multi-select using images; picklist extension; includes combo box for filtering | |
| ExtendedPicklistDisplayOnly | - Hide field label - Hide option label - Center content - Arrange horizontally or vertically - Control image size | Image omitted: cpq\_display-components-extended-picklist-display-only.png ExtendedPicklistDisplayOnly | Single-select using images; picklist extension; includes combo box for filtering |
| MultiSelectExtendedPicklistDisplayOnly | - Hide field label - Hide option label - Center content - Arrange horizontally or vertically - Control image size | Image omitted: cpq\_display-components-multiselect-extended-picklist-display-only.png MultiSelectExtendedPicklistDisplayOnly | Multi-select using images; picklist extension; includes combo box for filtering |
| SingleSelectPicklistGrid | - Set column headers - Set column alignment - Control image size Price display \(currency code or symbol\) follows layout settings | Image omitted: cpq\_display-components-single-select-picklist-grid.png SingleSelectPicklistGrid | Single-select using images; picklist extension |
| MultiSelectPicklistGrid | - Set column headers - Set column alignment - Control image size Price display \(currency code or symbol\) follows layout settings | Image omitted: cpq\_display-components-multiselect-picklist-grid.png MultiSelectPicklistGrid | Multi-select using images; picklist extension |
| SingleSelectProductPickerGrid | - Set column headers - Set column alignment - Control image size Automatically creates product rules Price display \(currency code or symbol\) follows layout settings User can edit custom subfields - includes quantity by default Bulk actions: - Set values - Include or exclude options - Specify minimum and maximum quantity | Image omitted: cpq\_display-components-single-select-product-picker-grid.png SingleSelectProductPickerGrid | Single-select using images; product picker |
| MultiSelectProductPickerGrid | - Set column headers - Set column alignment - Control image size Automatically creates product rules Price display \(currency code or symbol\) follows layout settings User can edit custom subfields - includes quantity by default Bulk actions: - Set values - Include or exclude options - Specify minimum and maximum quantity | Image omitted: cpq\_display-components-multiselect-product-picker-grid.png MultiSelectProductPickerGrid | Multi-select using images; product picker |
| VisualProductPicker | - Wide or tall rectangle - Image, label, price, description, and quantity fields | Image omitted: cpq\_display-components-visual-product-picker.png VisualProductPicker | Single-select using images; product picker |
| MultiSelectVisualProductPicker | - Wide or tall rectangle - Image, label, price, description, and quantity fields | Image omitted: cpq\_display-components-multiselect-visual-product-picker.png MultiSelectVisualProductPicker | Multi-select using images; product picker |
Text fields
| Name | Options | Appearance | Notes |
|---|---|---|---|
| Text |
Image omitted: cpq\_display-components-text.png
Text field| |
Text field| |
|TextArea| |
Image omitted: cpq\_display-components-text-area.png
TextArea| |
TextArea| |
|ReadOnlyText| |
Image omitted: cpq\_display-components-read-only-text.png
ReadOnlyText|Supports markdown formatting, including links and inserting content from other fields|
ReadOnlyText|Supports markdown formatting, including links and inserting content from other fields|
|Date| |
Image omitted: cpq\_display-components-date.png
Calendar| |
Calendar| |
|FormattedNumber| |
Image omitted: cpq\_display-components-formatted-number.png
Formatted number field|Supports units before or after number, displayed within the input|
Formatted number field|Supports units before or after number, displayed within the input|
|LocationLookup| |
Image omitted: cpq\_display-components-location-lookup.png
Lookup selection list|Accesses Google API and returns location data, which can be inserted into specified fields|
Lookup selection list|Accesses Google API and returns location data, which can be inserted into specified fields|
Number fields
| Name | Options | Appearance | Notes |
|---|---|---|---|
| Number | Minimum and maximum values; step size Layout value example: `{"step":1,"min":0,"max":100}` | Image omitted: cpq\_display-components-number.png NUmber field | |
| Slider | Minimum and maximum values; step size Layout value example: `{"step":1,"min":0,"max":100}` | Image omitted: cpq\_display-components-slider.png Slider | |
| NumberWithSubmit | Button label | Image omitted: cpq\_display-components-number-with-submit.png Number with Submit |
Boolean fields
| Name | Options | Appearance | Notes |
|---|---|---|---|
| Boolean | Labels for true and false states |
Image omitted: cpq\_display-components-boolean.png
Boolean field| |
Boolean field| |
Parent Topic:ServiceNow CPQ reference