Démarrage rapide de Générateur d'IU

Ce guide de démarrage rapide vous guide tout au long du processus de création de votre première page dans Générateur d'IU. La création de votre première page est la première étape pour comprendre comment créer des pages d’interface utilisateur pour votre espace de travail ou vos expériences de portail personnalisées.

Avant de commencer

Rôle requis : ui_builder_admin

Dans ce Générateur d'IU guide de démarrage rapide, vous effectuerez les tâches suivantes pour créer votre première page dans Générateur d'IU:

• Début Générateur d'IU.
• Créez une page pour votre espace de travail ou votre expérience de portail personnalisée. Pour plus d’informations sur la création de pages, reportez-vous à la section Créer une page dans Générateur d'IU.
• Créez votre page en ajoutant des composants. Pour plus d’informations sur les composants, reportez-vous à la section Personnaliser les Générateur d'IU pages à l’aide de composants.
• Enregistrez votre page.
• Prévisualisez votre page pour voir à quoi elle ressemble dans un navigateur.

Procédure

1. Accédez à la Tous > Cadre de travail Now Experience > Générateur d'IU.

   Figure 1. Démarrer Générateur d'IU

   

2. Sélectionnez une expérience dans laquelle vous souhaitez travailler à partir de la Générateur d'IU page d’accueil.
   Si vous ne voyez aucune expérience répertoriée dans laquelle travailler, contactez votre administrateur pour accéder à une expérience ou créer une expérience. Pour plus d'informations, consultez Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU.
3. Créez une page.
   1. Sélectionnez l’icône + dans la section Pages .
      
   2. Sélectionnez Create a new page (Créer une nouvelle page).
      
   3. Sélectionnez plutôt → Créer à partir de zéro.
      

      Vous pouvez également créer des pages à l’aide de modèles de page, voir Créer une page à partir d'un modèle pour plus d’informations.

   4. Entrez Page de démarrage comme nom unique pour la page dans le champ Nom .
   5. Spécifiez un chemin d’accès pour votre page dans le champ Chemin d’accès de l’URL . Générateur d'IU Génère un chemin d’accès par défaut en fonction du nom que vous avez donné à la dernière étape.
      Un chemin d’accès par défaut est ajouté en fonction du nom de votre page. Vous pouvez également créer votre propre parcours. Le chemin d’accès est obligatoire et doit être unique. Le chemin d’accès peut inclure des chiffres (0-9), des lettres (A-Z, a-z) et quelques caractères spéciaux (« - »,« . »,« _ »,« ~ »), avec des mots séparés par une barre oblique ou un trait d’union. L’aperçu de l’URL affiche le chemin d’accès de votre page.

      

      Remarque :

      Par défaut, le périmètre de l’application est celui dans lequel se trouve actuellement l’utilisateur dans le ServiceNow AI Platform®. Pour en savoir plus sur le périmètre de l’application, reportez-vous à la section En savoir plus sur la sécurité et les rôles.
   6. Sélectionnez Continuer.
   7. Facultatif : Ajoutez des paramètres à l’URL de votre page en sélectionnant + Ajouter.
      Pour plus d'informations, consultez Gérer les Générateur d'IU pages et les variantes de page.
   8. Sélectionnez Looks good (Tout semble correct).
   9. Saisissez la page de démarrage du gestionnaire comme nom pour la variante de page.
   10. Facultatif : Ajoutez une ou plusieurs audiences pour cette page.
       Si une audience dont vous avez besoin n’est pas répertoriée, vous pouvez choisir les audiences ouvertes dans le lien de la plateforme pour en créer une.
   11. Facultatif : Ajoutez des conditions d’affichage de la page ou de l’onglet.
   12. Sélectionnez Continuer.
   13. Sur l’écran suivant, sélectionnez Build responsive.
   14. Sélectionnez Créer pour créer votre page blanche.
   Félicitations ! Vous avez créé votre première page ! La page est vide de contenu. Vous ajoutez des composants à la page pour lui apporter des fonctionnalités. Les composants sont les éléments constitutifs d’une page. Générateur d'IU est livré avec de nombreux composants prêts à être ajoutés à votre page. Les composants peuvent être aussi simples qu’un en-tête ou aussi complexes qu’une liste.
4. Sélectionnez Éditeur pour commencer à personnaliser votre page.
   
5. Ajoutez un composant de conteneur à votre page.
   Un conteneur est ce qui contient vos composants. Considérez un conteneur comme une zone de la page où vous ajoutez des informations, des images ou des fonctionnalités (vos composants). Vous pouvez avoir autant de conteneurs sur une page que vous le souhaitez, avec autant de conteneurs dans des conteneurs, avec autant de composants dans les conteneurs.
   1. Sélectionnez + Ajouter du contenu dans l’arborescence de contenu.
      
   2. Sélectionnez la mise en page Colonne unique dans la boîte à outils.
   3. Sélectionnez la mise en page de colonne 1 dans l’arborescence de contenu pour mettre en surbrillance le conteneur.
      
   4. Sélectionnez le nom du composant dans le panneau de configuration.
      
   5. Dans le champ Étiquette du composant , tapez Conteneur pour l’en-tête.
   6. Dans le champ ID du composant , saisissez container_for_heading.
   7. Sélectionnez Appliquer.

      Vérifiez que le nom de la mise en page de la colonne devient Conteneur pour l’en-tête dans l’arborescence de contenu. L’arborescence de contenu est un concept important. L’arborescence de contenu est un moyen facile de voir la mise en page structurée de votre page. L’arborescence de contenu est particulièrement importante lorsque votre page comporte plusieurs composants. Vous sélectionnez le composant dans votre arborescence de contenu pour le mettre en surbrillance sur la page, ce qui facilite la création de votre page. Vous pouvez effectuer une recherche de texte pour un composant.

      

      Pour plus d’informations sur les ID de composant, reportez-vous à la section ID de composant.

   Vous avez ajouté avec succès votre première mise en page en colonne à votre page.
6. Ajoutez un composant En-tête à la disposition de votre colonne.
   Vous pouvez ajouter des composants à la page de différentes manières. Pour en savoir plus sur la manière dont vous pouvez ajouter des composants à votre page, reportez-vous à la section Ajouter et configurer des composants.
   1. Sélectionnez + Ajouter du contenu dans l’arborescence de contenu sous la mise en page de colonne créée à l’étape 5.
      
   2. Tapez l’en-tête dans la recherche et sélectionnez le composant En-tête .
   3. Sélectionnez votre nouveau composant En-tête dans l’arborescence de contenu pour le mettre en surbrillance.
   4. Sélectionnez Aucun dans le panneau de configuration.
   5. Sélectionnez le nom du composant dans le panneau de configuration.
   6. Dans le champ Étiquette du composant , entrez En-tête personnalisé comme étiquette unique pour le composant d’en-tête.
   7. Dans le champ ID de composant , saisissez custom_heading comme ID unique pour le composant d’en-tête.
   8. Cliquez sur Appliquer.
      
7. Personnalisez le composant d’en-tête.
   1. Sélectionnez le composant d’en-tête dans l’arborescence de contenu.
   2. Sélectionnez l’onglet Configurer dans le panneau de configuration.
   3. Dans le champ Étiquette , saisissez le texte de votre en-tête, par exemple Mon nouvel en-tête.
   4. Le style modifie la taille du texte de l’en-tête.
      Par exemple, si vous sélectionnez En-tête-secondaire, le texte est plus petit. Différentes tailles de titres sont utiles si vous avez deux titres et que vous souhaitez que le deuxième titre soit plus petit que le titre principal. Pour plus d’informations sur la configuration des composants, reportez-vous à la section Configurer des composants dans Générateur d'IU.
   5. Laissez le niveauà 1.
   6. Sélectionnez Enregistrer.
   Vous avez ajouté et personnalisé un composant d’en-tête à votre page.
8. Ajoutez une deuxième mise en page en colonne à votre page.
   1. Comme précédemment, sélectionnez + Ajouter du contenu dans l’arborescence de contenu.
      
   2. Sélectionnez la mise en page Colonne unique dans la boîte à outils.
   3. Sélectionnez la mise en page de colonne 1 dans l’arborescence de contenu pour mettre en surbrillance le conteneur.
      
   4. Sélectionnez le nom du composant dans le panneau de configuration.
   5. Dans le champ Étiquette du composant , tapez Conteneur pour le contenu.
   6. Dans le champ ID du composant , saisissez container_for_content.
   7. Sélectionnez Appliquer.
      
   8. Sélectionnez Enregistrer.
   Vous avez ajouté avec succès votre deuxième composant de conteneur à votre page.
9. Ajoutez un composant d’image à votre page.
   Une image est un bon moyen d’ajouter un visuel à votre page. Dans ce guide de démarrage rapide, vous ajoutez une photo d’archive fournie avec Générateur d'IU. Mais vous pouvez ajouter n’importe quelle image disponible.
   1. Sélectionnez + Ajouter du contenu dans l’arborescence de contenu sous le conteneur créé à l’étape 8.
   2. Tapez image dans la recherche et sélectionnez le composant Image .
      Une image par défaut est chargée dans le composant image. Vous pouvez ajouter votre propre image en ajoutant une URL à l’image. Vous pouvez utiliser des images hébergées sur Internet ou des images dans le ServiceNow AI Platform®fichier . Si vous utilisez une image hébergée sur un site externe, vous devez utiliser le protocole https pour des raisons de sécurité.
   3. Sélectionnez le composant Image 1 dans l’arborescence de contenu pour mettre l’image en surbrillance.
      
   4. Sélectionnez Aucun dans le panneau de configuration.
   5. Sélectionnez le nom du composant dans le panneau de configuration.
   6. Dans le champ Étiquette du composant , saisissez Mon image.
   7. Dans le champ ID de composant , saisissez my_image.
   8. Sélectionnez Appliquer.
      
   9. Sélectionnez Enregistrer.
   Vous avez ajouté un composant d’image à votre page.

   

10. Sélectionnez Aperçu dans l’en-tête Générateur d'IU pour prévisualiser votre page.
    Félicitations ! Vous avez terminé le Générateur d'IU démarrage rapide. Votre page génère un aperçu de son apparence dans votre espace de travail ou l’expérience du portail.

    

Résultats

1. Création de votre première page en Générateur d'IU.
2. Votre premier composant de conteneur a été ajouté à la page. Vous avez changé l’étiquette du conteneur.
3. Ajout d’un composant En-tête comme titre au conteneur. Vous avez modifié le texte de l’en-tête. Vous avez également changé l’étiquette.
4. Un deuxième composant de conteneur a été ajouté à votre page. Vous avez changé l’étiquette du conteneur.
5. Ajout d’un composant d’image . Vous avez modifié l’étiquette du composant d’image.
6. Votre nouvelle page a été enregistrée.
7. A prévisualisé votre page dans le navigateur.

Vous avez terminé le Générateur d'IU démarrage rapide avec succès !