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 effectuez les tâches suivantes pour créer votre première page dans Générateur d'IU:

• Démarrer 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 Tout > 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 aucune expérience n’est 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 et variantes .
      
   2. Sélectionnez 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, consultez la rubrique 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 Now Platform®. Pour plus d’informations sur le périmètre de l’application, reportez-vous à 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 Ça a l’air bien.
   9. Entrez 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 Version réactive.
   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 y créer des fonctionnalités. Les composants sont les blocs de construction 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 à ajouter la personnalisation de 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 à l’intérieur 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 , saisissez 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 mettre en surbrillance le composant sur la page, ce qui facilite la création de votre page. Vous pouvez effectuer une recherche textuelle pour un composant.

      

      Pour plus d’informations sur les ID de composants, 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 mise en page de vos colonnes.
   Vous pouvez ajouter des composants à la page de différentes manières. Pour plus d’informations sur les façons d’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 de composant , entrez En-tête personnalisé comme étiquette unique pour le composant d’en-tête.
   7. Dans le champ ID du composant , entrez custom_heading comme ID unique du composant d’en-tête.
   8. Cliquez sur Appliquer.
      
7. Personnalisez le composant 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 d’en-têtes sont utiles si vous avez deux en-têtes et que vous souhaitez que le deuxième en-tête soit plus petit que l’en-tête 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 niveau1.
   6. Sélectionnez Enregistrer.
   Vous avez ajouté et personnalisé un composant d’en-tête à votre page.
8. Ajoutez une mise en page en deuxième 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 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 Now 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 du 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 votre expérience du portail.

    

Résultats

1. Votre première page a été créée dans 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. Ajoutez un deuxième composant de conteneur à votre page. Vous avez changé l’étiquette du conteneur.
5. Ajout d’un composant Image . Vous avez modifié l’étiquette du composant d’image.
6. Votre nouvelle page enregistrée.
7. Prévisualisez votre page dans le navigateur.

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