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

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

1. Accédez à la Tout > Portail de services > Configuration du Portail de services.
2. Sélectionnez Designer.
3. Basculez vers le portail pour lequel vous souhaitez concevoir des pages en sélectionnant le nom du portail dans l’en-tête.
   
4. Dans le Portail de services Concepteur, sélectionnez une page à personnaliser ou sélectionnez Ajouter une nouvelle page.
5. Sous Mises en page, sélectionnez Conteneur et faites-le glisser sur la page.
6. 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 toujours 12.
7. Utilisez le filtre pour rechercher un widget, puis faites glisser le widget jusqu’à la mise en page.

   Figure 1. Faire glisser des conteneurs, des mises en page, puis des 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 du portail. Pour plus d’informations sur la configuration des options d’instance de widget, reportez-vous à la section Configurer les instances de widget.

8. Facultatif : Modifiez les propriétés de la page.
   1. Sélectionnez Modifier les propriétés de la page.
      L’enregistrement de page de la table Pages [sp_page] s’ouvre.
   2. Modifiez le formulaire.

      Tableau 1. Champs de page

      Champ	Description
      Titre	Nom interne de la page. Utilisez le titre pour rechercher une page dans Service Portal Designer.
      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 d’une authentification. 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 en train de la créer. Seuls les utilisateurs disposant du rôle administrateur peuvent afficher une page en mode brouillon, tous les autres utilisateurs voient une page 404.
      Rôles	Limitez l’accès des utilisateurs à 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 n’ait 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 clonez 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 du 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 pour les pages publiques et 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 des pages.

9. Facultatif : Modifiez les propriétés du conteneur.
   1. Sélectionnez dans le conteneur que vous souhaitez modifier ou sélectionnez Conteneur dans les fils d’Ariane.
   2. Sélectionnez l’icône Modifier [icône ].
      L’enregistrement de conteneur de la table Conteneurs [sp_container] s’ouvre.
   3. Modifiez le formulaire.

      Tableau 2. Champs conteneurs

      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	La page qui inclut le conteneur.
      Titre de lecteur de l'écran	Le titre utilisé par un lecteur d’écran.
      Balise sémantique	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. Principal : 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 à un 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.
      Demande	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 du conteneur. Écrase 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 du 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écurrent
      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 : Le champ Largeur de l’enregistrement du conteneur. Classe Bootstrap standard dans l’enregistrement de ligne au sein du 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 du CSS pour les enregistrements de conteneur, de ligne et de colonne.
      Déplacer vers l'en-tête	Si 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.

10. 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.
11. 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-titre colle à l’en-tête de la page et ne défile pas.

Avant de commencer

Rôle requis : admin

Procédure

1. Accédez à la Tout > Portail de services > Configuration du Portail de services.
2. Sélectionnez Designer.
3. Sélectionnez une page.
4. Basculez vers le portail pour lequel vous souhaitez concevoir des pages en sélectionnant le nom du portail dans l’en-tête.
   
5. Sélectionnez le conteneur que vous souhaitez utiliser comme sous-en-tête ou sélectionnez le conteneur à l’aide du fil d’Ariane.
6. Sélectionnez l'icône Modifier ( ).
7. 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 d’icônes de police.

Avant de commencer

Rôle requis : sp_admin ou admin

Procédure

1. Accédez à la Tout > Portail de services > Pages et cliquez sur la page à laquelle vous souhaitez ajouter des icônes de police.
2. Joignez le fichier font-icon à l’enregistrement de la page.
3. Dans le champ CSS spécifique à la page de la page, ajoutez le CSS de la définition font-icon.
   Utilisez la 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>