Création et modification d’une page à l’aide de Designer Portail de services

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 Designer comprend plusieurs niveaux 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 Tous > 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 vers 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’ils n’apparaissent sur une page de portail. Pour plus d’informations sur la configuration des options d’instance de widget, reportez-vous à 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 l’élément 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, quel que soit le rôle répertorié.
      Brouillon	Marquez une page comme brouillon pour limiter la capacité de l’utilisateur à afficher la page pendant que vous la créez. Seuls les utilisateurs ayant le rôle administrateur peuvent afficher une page en brouillon, tous les autres utilisateurs voient une page 404.
      Rôles	Limiter 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	Permet de faire une copie d’une page qui peut être modifiée. Si vous clonez une page du 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	Script include à appliquer à la page. Par défaut, le système utilise le script include 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. 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 de modification [].
      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 qu’un conteneur s’affiche au-dessus de tous les autres conteneurs, attribuez au conteneur le numéro le plus bas dans le champ Ordre .
      Page	La page qui inclut le conteneur.
      Titre de lecteur de l'écran	Le 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. 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. Il doit être appliqué au contenu qui est unique à la page et doit être configuré 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.
      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 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 Bootstrap standard et désactive le système de grille Bootstrap dans le conteneur. Si cette option est sélectionnée, les éléments suivants ne sont pas appliqués : Le champ Largeur dans l’enregistrement du conteneur. Classe Bootstrap standard dans l’enregistrement de ligne au sein du conteneur. Les champs Taille - xs, Taille - sm, Taille - moyen et Taille - lg dans les enregistrements de colonnes au sein du conteneur. Sélectionnez ce champ uniquement si vous prévoyez de fournir des classes CSS et CSS personnalisées 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 reste collé à 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 au fur et à mesure que vous la concevez.
    Vous pouvez également utiliser l’option Aperçu pour afficher votre page en mode mobile ou tablette grâce aux contrôles présentés dans l’en-tête.

    Figure 2. Vue de tablette Designer

    

Ajouter un sous-en-tête à 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

1. Accédez à la Tous > 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 de modification ().
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

Incluez des icônes de police sur une page afin que tous les widgets de la page aient accès à l’ensemble d’icônes de police.

Avant de commencer

Rôle requis : sp_admin ou admin

Procédure

1. Accédez à la Tous > 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 page.
3. Dans le champ CSS spécifique à la page de la page, ajoutez le CSS pour la définition font-icon.
   Utilisez le sys_id de la pièce jointe en tant que src 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 le jeu 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>