--- sourceDocument: Australie Gestion de la relation client pour les ventes sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/order-management Release : - australia ft:locale : - fr-FR ft:publication_title : - Australie Gestion de la relation client pour les ventes ft:clusterId : - omgmt bundleId : - omgmt workflow : - Customer and Industry --- # Composants d'affichage de l'interface utilisateur # Composants d'affichage de l'interface utilisateur {#ariaid-title1} * Rversion finale: Australia * * Mis à jour 16 mars 2026 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 minutes de lecture Affichez des exemples de champs de liste déroulante, de texte et de nombre tels qu'ils apparaissent aux utilisateurs finaux dans l'interface CPQ utilisateur. ## Champs de liste déroulante {#cpq-ui-display-components__section_xp4_q2v_p3c} {#cpq-ui-display-components__table_hsb_ffv_p3c__entry__4} | Nom | Options | Apparence | Notes | |-|-|-|-| | RadioButtons | | ![Cases d’option dans le sens horizontal]() | Sélection unique | | VerticalRadio | | ![Cases d’option dans le sens vertical]() | Sélection unique | | Radio | | ![Options]() | Sélection unique | | Checkbox | | ![Cochez les cases dans le sens horizontal]() | Sélection multiple | | VerticalCheckbox | | ![Cochez les cases dans le sens vertical]() | Sélection multiple | | Picklist | | ![Liste déroulante avec une seule option]() | Sélection unique ; Comprend une liste déroulante pour le filtrage | | BasicPicklist | | ![base Liste déroulante de base avec une seule option]() | Sélection unique ; sélection uniquement ; aucune liste déroulante pour le filtrage | | MultiSelectPicklist | | ![Liste déroulante à sélection multiple]() | Sélection multiple ; Comprend une liste déroulante pour le filtrage | | VisualPicker | | | Sélection unique à l'aide d'images | | MultiSelectVisualPicker | | | Sélection multiple à l'aide d'images | | ExtendedPicklist | | | Sélection unique à l'aide d'images ; extension de la liste déroulante ; Comprend une liste déroulante pour le filtrage | | MultiSelectExtendedPicklist | | | Sélection multiple à l'aide d'images ; extension de la liste déroulante ; Comprend une liste déroulante pour le filtrage | | ExtendedPicklistDisplayOnly | * Masquer l'étiquette de champ * Masquer l'étiquette de l'option * Centrer le contenu * Disposer horizontalement ou verticalement * Taille de l'image de contrôle {#cpq-ui-display-components__ul_kvh_fmv_p3c} | | Sélection unique à l'aide d'images ; extension de la liste déroulante ; Comprend une liste déroulante pour le filtrage | | MultiSelectExtendedPicklistDisplayOnly | * Masquer l'étiquette de champ * Masquer l'étiquette de l'option * Centrer le contenu * Disposer horizontalement ou verticalement * Taille de l'image de contrôle {#cpq-ui-display-components__ul_tys_hmv_p3c} | | Sélection multiple à l'aide d'images ; extension de la liste déroulante ; Comprend une liste déroulante pour le filtrage | | SingleSelectPicklistGrid | * Définir les en-têtes de colonnes * Définir l'alignement des colonnes * Taille de l'image de contrôle {#cpq-ui-display-components__ul_b3m_hnv_p3c} L'affichage du prix (code ou symbole de devise) suit les paramètres de mise en page | | Sélection unique à l'aide d'images ; extension de la liste déroulante | | MultiSelectPicklistGrid | * Définir les en-têtes de colonnes * Définir l'alignement des colonnes * Taille de l'image de contrôle {#cpq-ui-display-components__ul_zqt_knv_p3c} L'affichage du prix (code ou symbole de devise) suit les paramètres de mise en page | | Sélection multiple à l'aide d'images ; extension de la liste déroulante | | SingleSelectProductPickerGrid | * Définir les en-têtes de colonnes * Définir l'alignement des colonnes * Taille de l'image de contrôle {#cpq-ui-display-components__ul_mtr_h4v_p3c} Crée automatiquement des règles de produit L'affichage du prix (code ou symbole de devise) suit les paramètres de mise en page L'utilisateur peut modifier les sous-champs personnalisés : inclut la quantité par défaut Actions en bloc : * Définir les valeurs * Inclure ou exclure des options * Spécifier la quantité minimale et maximale {#cpq-ui-display-components__ul_ntr_h4v_p3c} | | Sélection unique à l'aide d'images ; Sélecteur de produit | | MultiSelectProductPickerGrid | * Définir les en-têtes de colonnes * Définir l'alignement des colonnes * Taille de l'image de contrôle {#cpq-ui-display-components__ul_mvt_xnv_p3c} Crée automatiquement des règles de produit L'affichage du prix (code ou symbole de devise) suit les paramètres de mise en page L'utilisateur peut modifier les sous-champs personnalisés : inclut la quantité par défaut Actions en bloc : * Définir les valeurs * Inclure ou exclure des options * Spécifier la quantité minimale et maximale {#cpq-ui-display-components__ul_ab4_f4v_p3c} | | Sélection multiple à l'aide d'images ; Sélecteur de produit | | VisualProductPicker | * Rectangle large ou haut * Champs Image, Étiquette, Prix, Description et Quantité {#cpq-ui-display-components__ul_hwl_p4v_p3c} | | Sélection unique à l'aide d'images ; Sélecteur de produit | | MultiSelectVisualProductPicker | * Rectangle large ou haut * Champs Image, Étiquette, Prix, Description et Quantité {#cpq-ui-display-components__ul_vcf_r4v_p3c} | | Sélection multiple à l'aide d'images ; Sélecteur de produit | [Tableau 1. Champs de liste déroulante] {#cpq-ui-display-components__table_hsb_ffv_p3c} ## Champs de texte {#cpq-ui-display-components__section_omb_r2v_p3c} {#cpq-ui-display-components__table_mqv_2fv_p3c__entry__4} | Nom | Options | Apparence | Notes | |-|-|-|-| | Text | | ![Champ de texte]() | | | TextArea | | ![Zone de texte]() | | | ReadOnlyText | | ![Texte Lecture Seule]() | Prend en charge le formatage Markdown, y compris les liens et l'insertion de contenu à partir d'autres champs | | Date | | | | | FormattedNumber | | | Prend en charge les unités avant ou après le nombre, affiché dans l'entrée | | LocationLookup | | | Accède à l'API Google et renvoie des données d'emplacement, qui peuvent être insérées dans les champs spécifiés | [Tableau 2. Champs de texte] {#cpq-ui-display-components__table_mqv_2fv_p3c} ## Champs de numéros {#cpq-ui-display-components__section_vlq_s2v_p3c} {#cpq-ui-display-components__table_jc4_2fv_p3c__entry__4} | Nom | Options | Apparence | Notes | |-|-|-|-| | Number | Valeurs minimales et maximales ; Taille de l'étape Exemple de valeur de mise en page : `{"step >> :1,"min >> :0,"max >> :100}` | ![Champ NUmber]() | | | Slider | Valeurs minimales et maximales ; Taille de l'étape Exemple de valeur de mise en page : `{"step >> :1,"min >> :0,"max >> :100}` | ![Curseur]() | | | NumberWithSubmit | Étiquette de bouton | ![Nombre avec soumission]() | | [Tableau 3. Champs de numéros] {#cpq-ui-display-components__table_jc4_2fv_p3c} ## Champs booléens {#cpq-ui-display-components__section_fdg_t2v_p3c} {#cpq-ui-display-components__table_vph_cfv_p3c__entry__4} | Nom | Options | Apparence | Notes | |-|-|-|-| | Boolean | Étiquettes pour les états vrai et faux | ![Champ booléen]() | | [Tableau 4. Champ booléen] {#cpq-ui-display-components__table_vph_cfv_p3c}