Modifier l’apparence par défaut des composants

  • Rversion finale: Washingtondc
  • Mis à jour 1 févr. 2024
  • 6 minutes de lecture

    • Définissez les styles des composants et des wrappers pour modifier l’aspect par défaut.

    Cette vidéo vous montre comment effectuer la procédure suivante.

    Avant de commencer

    Rôle requis : ui_builder_admin

    Pourquoi et quand exécuter cette tâche

    Cette tâche décrit comment ajouter des styles aux composants et aux wrappers (tels que le corps, les dispositions de colonne ou une colonne) contenant des composants. Personnalisez le style du composant en sélectionnant le composant dans l’arborescence de contenu ou appliquez des styles à plusieurs composants en plaçant les composants à l’intérieur d’une couche.

    Pour en savoir plus sur l’ajout d’un style à l’ensemble de votre expérience, reportez-vous à Gérer le style visuel des expériences UI Builder.

    Cette tâche s’applique au nouveau système de mise en page introduit dans Washington DC. Si votre page utilise l’ancien système de mise en page, consultez Ajouter un style à un composant à l’aide de l’ancien système de mise en page pour plus d’informations.

    Remarque :
    Au fur et à mesure que vous ajoutez et configurez des composants sur la page, l’étape affiche votre travail. Si vous apportez des modifications et que les mises à jour ne se chargent pas sur l’étape, sélectionnez l’icône Ouvrir le menu , puis Développeur > Forcer le rechargement de l’étape. Le rechargement de l’étape affiche vos modifications, mais ne les enregistre pas. Pour enregistrer votre travail, sélectionnez Enregistrer en haut à droite.

    Vue de l’expérience avec le menu Ouvrir sélectionné affichant les options Développeur et Forcer le rechargement de l’étape.

    Procédure

    1. Accédez à la Tous > Cadre de travail Now Experience > Générateur d'IU.
    2. Ouvrez une expérience dans laquelle travailler ou créez une expérience en sélectionnant + Créer.
      Consultez Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour en savoir plus sur la création d’expériences.
    3. Créez ou ouvrez une page ou une variante de page.
      Pour plus d’informations sur la création d’une page dans UI Builder, consultez Créer une page dans UI Builder.
    4. Dans le panneau Contenu, sélectionnez un composant ou une couche (par exemple, Corps, une disposition en colonnes ou une colonne) auquel vous souhaitez ajouter un style.
    5. Dans le cas d’un corps ou d’un composant, sélectionnez l’onglet Styles dans le panneau de configuration.
      Onglet Styles du panneau de configuration.
    6. Utilisez les représentations visuelles de l’onglet Styles pour décider ce qui convient le mieux à l’apparence de votre page.
      Accessibilité (mise en page en colonne et colonne)
      Spécifie les paramètres d’accessibilité tels que le nom de la région ARIA, le niveau d’en-tête de la région ARIA, le rôle ARIA et l’inclusion de l’en-tête ARIA. Pour plus d’informations, consultez la documentation ARIA sur developer.servicenow.com.
      Alignement (poteau et composant)
      Pour une colonne, définit la façon dont les composants s’alignent au sein de la colonne en tant que groupe. Pour un composant, définit la façon dont le composant s’aligne dans l’élément de mise en page parent, tel qu’une colonne ou une disposition de colonne.
      Arrière-plan (corps, disposition en colonne, colonne et composant)
      Définit la couleur d’arrière-plan derrière l’élément de mise en page. Sélectionnez une couleur dans l’onglet Mes couleurs du sélecteur de couleurs ou dans l’onglet Personnalisé où vous pouvez spécifier n’importe quelle couleur au format HEX, RVB ou TSL.
      Options de couleur d’arrière-plan dans l’onglet Liste.
      Bordure (Mise en page des colonnes, Colonne et Composant)
      Ajoute une bordure autour du contenu. La bordure est placée à l’intérieur immédiat de la marge et à l’extérieur immédiat du remplissage. Spécifiez l’épaisseur de la bordure, le type, la couleur et la forme des coins. Pour les composants, vous avez la possibilité d’utiliser un CSS personnalisé pour la bordure.
      Option de bordure développée et affiche les options Épaisseur, Type, Couleur et Forme d’angle.
      Mise en page (Corps, Mise en page de colonne et Colonne)
      Pour le corps et la colonne, spécifie la direction, l’alignement et la justification du contenu. Pour la mise en page des colonnes, spécifie le nombre de colonnes et l’écart entre les colonnes (espace entre les colonnes).
      Shadow (disposition en colonnes, colonne et composant)
      Ajoute des effets d'ombre autour du composant. Vous avez la possibilité d’utiliser un CSS personnalisé.
      Dimensionnement (composant)
      Pour les composants applicables, définit la hauteur et la largeur par défaut, minimale et maximale du composant (en px, %, em, rem ou une valeur personnalisée). Cette valeur est pertinente lorsque la fenêtre du navigateur est redimensionnée.
      Option de dimensionnement développée affichant les options de largeur et de hauteur.
      Espacement (corps, disposition des colonnes et composant)
      Margin définit la taille de l’espace à l’intérieur immédiat du corps, de la disposition de colonne ou du composant. Le remplissage définit la taille de l’espace à l’extérieur immédiat du corps, de la disposition de colonne ou du composant. Sélectionnez Marge ou Marge intérieure pour définir la même taille pour les quatre côtés.
      Options d’espacement des marges et des marges intérieures.
      Vous pouvez définir la taille de chaque marge ou côté de remplissage en sélectionnant le paramètre actuel, puis en sélectionnant une option.

      Option d’espacement avec paramètres de marge et de remplissage pour les quatre côtés du corps, la disposition des colonnes ou le composant.

    7. Facultatif : Pour Corps et composants, vous pouvez modifier le code CSS en sélectionnant le lien Afficher et modifier CSS en bas de l’onglet Styles .
      L’onglet Styles affiche un éditeur de code de styles CSS. Les propriétés CSS suivantes sont les plus couramment utilisées :
      • couleur d’arrière-plan
      • image d’arrière-plan
      • style bordure
      • largeur de bordure
      • couleur de bordure
      • rayon de bordure
      • ombre de boîte
      • hauteur
      • hauteur minimale
      • hauteur max
      • marge
      • Débordement
      • remplissage
      • largeur
      • largeur minimale
      • largeur maximale
      • index z
      Éditeur de code de styles CSS.
      Important :
      Certains composants contiennent des configurations d’application de style intégrées que vous ne pouvez pas remplacer par CSS dans Générateur d'IU. Pour en savoir plus sur le remplacement de ces configurations de style, reportez-vous à la section Gérer le style visuel des expériences UI Builder.
    8. Dans l’en-tête principal, sélectionnez Enregistrer pour enregistrer vos modifications.

    Ajouter un style à un composant à l’aide de l’ancien système de mise en page

    Définissez les styles CSS d’un composant pour modifier son aspect par défaut.

    Avant de commencer

    Rôle requis : ui_builder_admin

    Pourquoi et quand exécuter cette tâche

    Cette tâche décrit comment ajouter des styles à la couche contenant votre composant, ce qui est généralement recommandé au lieu d’appliquer des styles directement au composant. Assurez-vous que le composant dont vous souhaitez définir les styles est placé dans un composant de conteneur pour placer le composant dans une couche. La couche de votre composant est d’un niveau supérieur à celle du composant de la hiérarchie de contenu et est étiquetée par défaut comme principale.

    Pour ajouter un style à une page entière, vous pouvez utiliser un CSS basé sur des normes dans la couche de la page. Pour en savoir plus sur l’ajout d’un style à l’ensemble de votre expérience, reportez-vous à Gérer le style visuel des expériences UI Builder.

    Procédure

    1. Accédez à la Tous > Cadre de travail Now Experience > Générateur d'IU.
    2. Ouvrez une expérience dans laquelle travailler ou créez une expérience en sélectionnant + Créer.
      Consultez Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour en savoir plus sur la création d’expériences.
    3. Créez ou ouvrez une page ou une variante de page.
      Pour plus d’informations sur la création d’une page dans UI Builder, consultez Créer une page dans UI Builder.
      Remarque :
      Un composant doit être placé dans un conteneur avant d’ajouter des styles au composant.
    4. Sélectionnez le conteneur contenant le composant auquel vous souhaitez ajouter un style.
      Le conteneur est généralement d’un niveau supérieur au composant de l’arborescence de contenu.
      L’onglet Styles s’affiche dans le panneau de configuration.
    5. Dans la fenêtre Styles CSS, entrez des propriétés et des valeurs CSS basées sur des normes.
      Les propriétés CSS suivantes sont les plus couramment utilisées pour appliquer des styles aux composants dans les conteneurs :
      • couleur d’arrière-plan
      • image d’arrière-plan
      • style bordure
      • largeur de bordure
      • couleur de bordure
      • rayon de bordure
      • ombre de boîte
      • hauteur
      • hauteur minimale
      • hauteur max
      • marge
      • Débordement
      • remplissage
      • largeur
      • largeur minimale
      • largeur maximale
      • index z
      Important :
      Certains composants contiennent des configurations d’application de style intégrées que vous ne pouvez pas remplacer par du CSS dans Générateur d'IU. Pour en savoir plus sur le remplacement de ces configurations de style, reportez-vous à la section Gérer le style visuel des expériences UI Builder.
    6. Dans l’en-tête principal, sélectionnez Enregistrer pour enregistrer vos modifications.
      Figure 1. Ajouter un style à un composant dans le panneau de configuration des styles
      Onglet Styles CSS Option permettant d’ajouter un style au corps ou à un composant à l’aide d’un CSS basé sur des normes.