--- 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 --- # Setting up the Image Viewer # Setting up the Image Viewer {#ariaid-title1} Release version: Australia Updated March 12, 2026 ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 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 Setting up the Image Viewer The Image Viewer feature in ServiceNow CPQ enables administrators to add and display images in a media carousel format within supported fields on layouts. This enhances visual presentation by allowing users to browse through multiple images associated with a record. Show full answer Show less ## Supported Field Types * Static Image * MultiSelectProductPickerGrid * MultiSelectVisualProductPicker * ProductPickerGrid * VisualProductPicker * MultiSelect picklistGrid * SingleSelect picklistGrid * Multiselect Visual Picker * Visual Picker ## Configuration Steps ### Static Image Fields * Edit the layout and hover over the target field to access settings. * Add a raw value configuration specifying an array of feature images and a boolean to enable or disable the carousel. * Each feature image object includes image source URL, optional alt text, and label. * Deploy the blueprint to apply changes. ### Product Picker Fields * Create corresponding Text fields for each image URL, label, and alt text in the Option Fields tab. * Use Bulk Actions to populate these fields with image URLs and optional descriptive text. * Enable the Image Viewer in the layout field settings and map the created fields for image URL, alt text, and label. * Add multiple images by repeating the mapping process for each image to include in the viewer. * Save and deploy the blueprint. ### Picklist Fields * Import image data via CSV with columns for value, imageUrl, and optional imageLabel and imageAltText in the Picklist Extension tab. * Map CSV columns to the corresponding extension fields. * Enable Image Viewer in the layout field settings and select the mapped fields for URLs, alt text, and labels. * Add multiple images by repeating field selection for each image. * Save and deploy the blueprint. ## Best Practices and Guidelines * Use images of consistent size to ensure proper alignment of thumbnails and featured images. * Order images in the Image Viewer settings to control display sequence; field names do not affect order. * Choose sufficiently high-resolution images to avoid quality loss when expanded. * Avoid very large or extremely high-resolution images to maintain optimal rendering performance. ## User Experience Users can hover over images to reveal an expand icon that opens the carousel in a dialog box. Navigation is possible via arrow buttons or thumbnail clicks. Provided labels and alt text are displayed in the carousel. The dialog box can be closed by clicking outside it or using the close (X) button. You can use the Image Viewer to add images to fields for viewing in a media carousel. The image viewer allows a ServiceNow CPQ Admin to add featured images to supported fields that can be viewed in a media carousel. This article covers how to set up the Image Viewer in the ServiceNow CPQ Admin and how it displays on your layout. ## Supported field display types {#cpq-image-viewer-setup__section_d3v_ypt_fhc} * Static Image * MultiSelectProductPickerGrid * MultiSelectVisualProductPicker * ProductPickerGrid * VisualProductPicker * MultiSelect picklistGrid * SingleSelect picklistGrid * Multiselect Visual Picker * Visual Picker {#cpq-image-viewer-setup__ul_iqz_bqt_fhc} ## Static images {#cpq-image-viewer-setup__section_gfb_hqt_fhc} To display the Image Viewer for a Static Image field, follow these steps: 1. Open the layout where you want to add the Image Viewer. 2. Hover over the field and click the gear icon. 3. Open the raw value menu and add the following while including the required inputs in place of the placeholder text below. 4. Click Save, and deploy the blueprint. {#cpq-image-viewer-setup__ol_nlh_jqt_fhc} ## Raw value details for Image Viewer {#cpq-image-viewer-setup__section_m5c_nqt_fhc} Add the following to the "Raw Value" section of an image display component through the Admin UI, where `Array` is an array of your additional feature images in the Feature Image type format and `carouselEnabled` is set to true or false. "featureImageSettings": { "additionalImages": Array, "carouselEnabled": boolean } By default, `carouselEnabled` is false. ## Defining a feature image {#cpq-image-viewer-setup__section_eh4_yqt_fhc} FeatureImage = { "src": string, "alt"?: string, "label"?: string, } ## Product Pickers {#cpq-image-viewer-setup__section_msz_1rt_fhc} To display the Image Viewer for a product picker field, follow these steps: 1. Select your product picker field. 2. Select the Option Fields tab. 3. Click + Add. * Set the Field Type to Text. * Set the Product List Property to Product Extended. {#cpq-image-viewer-setup__ul_lcf_mrt_fhc} 4. Create one Text field for each image to include in the Image Viewer. Note: To display alt text or a label, additional fields for each type must be created. These fields are not required. 5. Select the Bulk Actions tab. 6. Click Add New Action. 7. Select type Determined Action. 8. Enter a Bulk Action Name. 9. Select all of the fields added for your Image Viewer. 10. Click Save. 11. On the Bulk Actions tab, provide the URL for each image as well as text for labels and alt text if desired. 12. Click Save 13. Open a layout that includes the product picker field. 14. Hover over the field and click the gear icon. 15. Toggle Enable Image Viewer to On. 16. Expand the Image Viewer Settings section. 17. Select the fields created from steps 3-4 that correspond to Image URL, Alt Text, and Label.Alt Text and Label are optional. 18. Click + Add and repeat step 17 for each image that you want to include. 19. Click Save, and deploy the blueprint. {#cpq-image-viewer-setup__ol_hdv_jrt_fhc} ## Picklists {#cpq-image-viewer-setup__section_n4r_nst_fhc} 1. Open the picklist field. 2. Click the Picklist Extension tab. 3. Click Import Data. 4. Create a CSV that includes the following columns: * value * imageUrl * Ensure this is a valid URL for the image to display. * Create an imageUrl column for each image to include in the Image Viewer. {#cpq-image-viewer-setup__ul_bgn_p5t_fhc} * imageLabel (optional) * imageAltText (optional) {#cpq-image-viewer-setup__ul_phy_n5t_fhc} 5. Import the created CSV. 6. Click Column Mapping. 7. For each field added, select the mapping menu and select the column name under the Extension mapping section. 8. Click Save Mapping. 9. Open a layout that includes the product picker field. 10. Hover over the field and click the gear icon. 11. Toggle Enable Image Viewer to On. 12. Expand the Image Viewer Settings section. 13. Select the fields created from the picklist extension data that correspond to Image URL, Alt Text, and Label.Alt Text and Label are optional. 14. Click + Add and repeat step 13 for each image that you want to include. 15. Click Save, and deploy the blueprint. {#cpq-image-viewer-setup__ol_w5b_qst_fhc} ## General guidelines {#cpq-image-viewer-setup__section_ark_cvt_fhc} Ensure that the image sizes are the same for all images in a viewer. If they do not match, the thumbnails and featured image will not align properly. Add images in the order you want them to display. Images will display from the Image Viewer settings from top to bottom. The name of the field does not affect the display order. Use images with a high enough resolution to properly fill the window. Low resolution images will be expanded in size to fit the window and will not look good when select as the featured image. For optimal performance, avoid large or high resolution images since that will impact the render time for the image viewer. ## Image Viewer display {#cpq-image-viewer-setup__section_jhg_fvt_fhc} On a layout with a field that includes an image view, a user can hover over an image to see the expand icon. Once clicked, the image view will open in a dialog box. A user can move between images with the arrow buttons or by clicking the thumbnails below the feature image. This carousel displays any label and alt text if provided. A user can close the dialog box by clicking outside it or by clicking X in the top right.