Créer et modifier une page à l’aide du Portail de services concepteur

Interface utilisateur de ServiceNow AI Platform en Australie

Release

australia

ft:locale

fr-FR

ft:publication_title

Interface utilisateur de ServiceNow AI Platform en Australie

ft:clusterId

platux

bundleId

platux

workflow

Platform

Créer et modifier une page à l’aide du Portail de services concepteur

Rversion finale: Australia

Mis à jour 22 avr. 2026

8 minutes de lecture

Créez ou modifiez une page et utilisez des mises en page pour organiser les colonnes qui abritent les widgets.

Avant de commencer

Rôle requis : sp_admin ou admin

Pourquoi et quand exécuter cette tâche

Ces étapes sont destinées aux utilisateurs ayant peu ou pas d’expérience en codage. Le Portail de services concepteur comprend plusieurs couches de personnalisation, allant du simple ajout de widgets dans une configuration particulière sur une page à l’ajout de classes CSS.

Procédure

Accédez à la Tous > Portail de services > Configuration du Portail de services.
Sélectionnez Designer.
Basculez vers le portail pour lequel vous souhaitez concevoir des pages en sélectionnant le nom du portail dans l’en-tête.
Dans le Portail de services concepteur, sélectionnez une page à personnaliser ou sélectionnez Ajouter une nouvelle page.
Sous Mises en page, sélectionnez Conteneur et faites-le glisser sur la page.
Faites glisser l’une des autres mises en page et déposez-la dans le conteneur.
Cette mise en page définit la structure de votre page et l’espace disponible pour déposer des widgets. La structure de la mise en page s’aligne sur le modèle de grille Bootstrap et totalise 12.
Utilisez le filtre pour rechercher un widget, puis faites glisser le widget vers la mise en page.

Figure 1. Faire glisser les conteneurs, les mises en page, puis les widgets sur une page

Pour les widgets qui ne contiennent aucune information par défaut, vous devez configurer les options de leurs instances de widget avant qu’elles n’apparaissent sur une page de portail. Pour plus d’informations sur la configuration des options d’instance de widget, reportez-vous à la section Configurer des instances de widget.

Facultatif : Modifiez les propriétés de la page.

Sélectionnez Modifier les propriétés de la page.
L’enregistrement de page de la table Pages [sp_page] s’ouvre.

Modifiez le formulaire.

Tableau 1. Champs de page
Champ	Description
Titre	Nom interne de la page. Utilisez le titre pour rechercher une page dans le concepteur de portail de services.
ID	Un ID unique pour la page. L’ID est ce que vous utilisez pour affecter une page à un portail. Il détermine également l’URL de la page, par exemple https://instance name.service-now.com/doc_portal/?id=doc_page, où doc_page est l’ID de la page.
Application	Le périmètre de l’application.
Public	Permet d’accéder à la page sans avoir besoin de s’authentifier. Si Public est sélectionné, tous les utilisateurs peuvent afficher la page, quels que soient les rôles répertoriés.
Brouillon	Marquez une page comme brouillon pour limiter la capacité de l’utilisateur à afficher la page pendant que vous êtes encore en train de la créer. Seuls les utilisateurs disposant du rôle admin peuvent afficher une page en mode brouillon, tous les autres utilisateurs voient une page 404.
Rôles	Limitez l’accès de l’utilisateur à une page par rôle.
Description courte	Décrit la page du portail. Ce champ n’est pas accessible au public.
CSS spécifique à la page	À moins qu’une page ne comporte un CSS spécifique à la page, la page hérite du CSS du thème et de la marque. Si vous avez besoin qu’une page ait un aspect différent, le CSS spécifique à la page remplace l’héritage du thème et de la marque.
Titre de page dynamique	Créez des variables pour générer des titres descriptifs en fonction du contenu chargé dans une page. Pour plus d'informations, consultez Ajouter des titres dynamiques à une page.
Cloner la page	Vous permet de faire une copie d’une page qui peut être modifiée. Si vous copiez une page système de base, une nouvelle instance de widget est créée pour chaque widget de la page.
Utiliser le script SEO	Option permettant d’activer un include de script qui ajoute des balises SEO pour les URL canoniques et les balises hreflang. Pour plus d'informations, consultez Activer SEO pour les versions localisées d’une page de portail.
Script SEO	Include de script à appliquer à la page. Par défaut, le système utilise l’include de script SPSEOHeaderTags, qui inclut l’implémentation par défaut pour l’URL canonique et les balises hreflang pour Portail de services d'analyse les pages.
Structure de l’URL lisible par l’homme	Ajoutez des mots clés lisibles par l’homme à l’URL de la page pour améliorer l’optimisation des moteurs de recherche (SEO) et les taux de clics pour les pages publiques. Les URL lisibles par l’homme aident également les utilisateurs à comprendre à quoi s’attendre sur une page, qu’il s’agisse de pages publiques ou non publiques. Par exemple, https://<instance>/kb/en/faq/what-is-a-cookie ?id=kb_article_view&sysparm_article=KB0000007. Pour plus d'informations, consultez Ajouter des mots clés lisibles par l’homme aux URL de page.

Facultatif : Modifiez les propriétés du conteneur.

Sélectionnez dans le conteneur que vous souhaitez modifier ou sélectionnez Conteneur dans les fils d’Ariane.
Sélectionnez l’icône Modifier [icône ].
L’enregistrement conteneur de la table Conteneurs [sp_container] s’ouvre.

Modifiez le formulaire.

Tableau 2. Champs conteneur
Champ	Description
Nom	Nom interne du conteneur.
Ordre	Ordre dans lequel les conteneurs apparaissent sur une page. Pour définir un conteneur de sorte qu’il apparaisse au-dessus de tous les autres conteneurs, attribuez-lui le numéro le plus bas dans le champ Commande .
Page	Page qui inclut le conteneur.
Titre de lecteur de l’écran	Titre utilisé par un lecteur d’écran.
Balise sémantique	La balise HTML sémantique qui inclut le conteneur. Les options incluent : Aucun : tout le contenu de la page entre l’en-tête et le pied de page est inclus dans la <main> balise. Main : la <main> balise inclut uniquement le conteneur et son contenu. La <main> balise est un élément HTML sémantique qui contient le contenu principal de la page. Elle doit être appliquée au contenu unique à la page et doit être configurée pour un seul élément de la page. Remarque : La <main> balise peut être appliquée à un conteneur, une ligne ou une colonne. Pour plus d'informations, consultez Configurer la balise principale sur une page. En-tête : Le <header> est utilisée comme contenu d’introduction. Il peut être utilisé plusieurs fois par page, y compris dans un <article> . Nav : Le <nav> est utilisée dans la navigation au niveau de la page. Il peut être utilisé plusieurs fois dans chaque page. Section : Le <section> Balisez le contenu lié sous un en-tête ou un thème commun. Article : Le <article> est un contenu autonome qui peut être autonome ou réutilisé. Détails : Le <details> peut être utilisée dans les sections développer/réduire et est destinée aux FAQ. Résumé : <summary> la balise est le premier enfant de <details> et fait office d’étiquette cliquable. Heure : <time> la balise est pour les dates, les heures et les durées. Ajoutez pour les valeurs lisibles par machine. Légende de la figue : <figcaption> est valide uniquement en tant qu’enfant de <figure> et fournit la légende d’une figure.
Application	Le périmètre de l’application.
Largeur	Largeur du conteneur. Les options incluent : Fixe Fluide
Classes parents	Classe CSS parente pour le conteneur.
Classe CSS	Les classes CSS pour le conteneur. Remplace le CSS spécifique à la page.
Couleur d'arrière-plan	Couleur d’arrière-plan du conteneur.
Image d'arrière-plan	Image d’arrière-plan pour le conteneur.
Style d’arrière-plan	Style d’affichage d’une image d’arrière-plan. Les options incluent : Valeur par défaut Couverture Contenir Répétition
Alternative d’amorce	La sélection de ce champ supprime les classes de grille d’amorce standard et désactive le système de grille d’amorce dans le conteneur. Si cette option est sélectionnée, les éléments suivants ne sont pas appliqués : Champ Largeur dans l’enregistrement conteneur. Classe Bootstrap standard dans l’enregistrement de ligne dans le conteneur. Les champs Taille - xs, Taille - sm, Taille - md et Taille - lg dans les enregistrements de colonne du conteneur. Sélectionnez ce champ uniquement si vous prévoyez de fournir des classes CSS personnalisées et CSS pour les enregistrements de conteneur, de ligne et de colonne.
Déplacer vers l’en-tête	Lorsque cette option est sélectionnée, le conteneur colle à l’en-tête et ne défile pas. Utilisez cette option pour créer un sous-en-tête.

Facultatif : Pour passer à une autre page, sélectionnez l’onglet Pages dans le volet gauche, puis sélectionnez la page suivante que vous souhaitez configurer.
Facultatif : Utilisez le bouton Aperçu dans l’en-tête pour afficher votre page telle que vous la concevez.
Vous pouvez également utiliser l’aperçu pour afficher votre page en mode mobile ou tablette via les commandes présentées dans l’en-tête.
Figure 2. Vue de tablette Designer

Ajouter un sous-titre à une page

Sélectionnez un enregistrement de conteneur qui servira de sous-en-tête de page. Un sous-en-tête colle à l’en-tête de la page et ne défile pas.

Avant de commencer

Rôle requis : admin

Procédure

Accédez à la Tous > Portail de services > Configuration du Portail de services.
Sélectionnez Designer.
Sélectionnez une page.
Basculez vers le portail pour lequel vous souhaitez concevoir des pages en sélectionnant le nom du portail dans l’en-tête.
Sélectionnez le conteneur que vous souhaitez utiliser comme sous-en-tête ou sélectionnez le conteneur à l’aide du fil d’Ariane.
Sélectionnez l’icône Modifier (icône ).
Sélectionnez Déplacer vers l’en-tête.

Résultats

En tant que sous-en-tête, le conteneur colle à l’en-tête et ne défile pas.

Inclure des icônes de police sur une page

Inclure des icônes de police sur une page afin que tous les widgets de la page aient accès au jeu de polices-icônes.

Avant de commencer

Rôle requis : sp_admin ou admin

Procédure

Accédez à la Tous > Portail de services > Pages et cliquez sur la page à laquelle vous souhaitez ajouter des icônes de police.
Joignez le fichier font-icon à l’enregistrement de page.

Dans le champ CSS spécifique à la page de la page, ajoutez le CSS de la définition font-icon.

Utilisez l’sys_id de la pièce jointe comme source dans le CSS. Par exemple :

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('/828b8ca8b7033010897725cbde11a9f7.iix') format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

Résultats

Vous pouvez sélectionner une icône dans l’ensemble d’icônes pour n’importe quel widget de cette page. Par exemple, dans le widget HTML, vous pouvez utiliser l’option Code source pour utiliser une icône. Par exemple :

<p style="text-align: center;"><em class="material-icons">flight_land</em></p>