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

• Commencer Générateur d'IU.
• Créez une page pour votre espace de travail ou votre expérience de portail personnalisé. Pour plus d’informations sur la création de pages, reportez-vous à 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 à Personnaliser les pages à l’aide de Générateur d'IU 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 page d’accueil Générateur d'IU .
   Si aucune expérience dans laquelle travailler n’est répertoriée, contactez votre administrateur pour accéder à une expérience ou créez 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 Créer une page à partir d’un modèle pour plus d’informations.

   4. Saisissez 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 basé sur le 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 (« - »,« . »,« _ »,« ~ »), les mots étant séparés par une barre oblique ou un trait d’union. L’aperçu de l’URL indique le chemin d’accès de votre page.

      

      Remarque :

      Le périmètre de l’application est défini par défaut sur le périmètre dans lequel l’utilisateur se trouve actuellement dans le Now Platform®. Pour en savoir plus 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. Saisissez 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 en saisissant une chaîne de requête codée.
   12. 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 créer 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 dans laquelle 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 les conteneurs, avec autant de composants dans les conteneurs.
   1. Sélectionnez + Ajouter un composant dans l’arborescence de contenu.
      
   2. Sélectionnez la mise en page Colonne unique dans la boîte à outils.
   3. Sélectionnez 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 Component label (Étiquette du composant ), saisissez Container for heading (Conteneur pour en-tête).
   6. Dans le champ ID de composant , tapez container_for_heading.
   7. Sélectionnez Appliquer.

      Vérifiez que le nom de la mise en page de colonne devient Conteneur pour 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 évidence le composant sur la page, ce qui facilite la création de votre page. Vous pouvez effectuer une recherche de texte pour un composant.

      

      Pour en savoir plus sur les ID de composants, reportez-vous à ID de composant.

   Vous avez ajouté avec succès votre première mise en page de 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, consultez Ajouter et configurer des composants.
   1. Sélectionnez + Ajouter un composant dans l’arborescence de contenu sous la mise en page de colonne créée à l’étape 5.
      
   2. Saisissez l’en-tête dans la recherche, puis 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 , saisissez En-tête personnalisé comme étiquette unique pour le composant d’en-tête.
   7. Dans le champ ID du 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 d’en-tête.
      Par exemple, si vous sélectionnez En-tête secondaire, le texte est plus petit. Des en-têtes de tailles différentes 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 en savoir plus sur la configuration des composants, reportez-vous à Configurer les composants dans Générateur d'IU.
   5. Laissez le niveausur 1.
   6. Sélectionnez Enregistrer.
   Vous avez ajouté et personnalisé un composant d’en-tête pour votre page.
8. Ajoutez une mise en page de deuxième colonne à votre page.
   1. Comme précédemment, sélectionnez + Ajouter un composant dans l’arborescence de contenu.
      
   2. Sélectionnez la mise en page Colonne unique dans la boîte à outils.
   3. Sélectionnez 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 le contenu.
   6. Dans le champ ID de composant , tapez 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 de stock fournie avec Générateur d'IU. Mais vous pouvez ajouter n’importe quelle image qui est à votre disposition.
   1. Sélectionnez + Ajouter un composant dans l’arborescence de contenu sous le conteneur créé à l’étape 8.
   2. Saisissez image dans la recherche, puis sélectionnez le composant Image .
      Une image par défaut est chargée dans le composant d’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 Component label (Étiquette du composant ), saisissez My image (Mon image).
   7. Dans le champ ID de composant , tapez 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 dans l’expérience du portail.

    

Résultats

1. Vous avez créé votre première page dans Générateur d'IU.
2. Votre premier composant de conteneur a été ajouté à la page. Vous avez modifié l’étiquette du conteneur.
3. Ajout d’un composant En-tête en tant que titre du conteneur. Vous avez modifié le texte de l’en-tête. Vous avez également modifié l’étiquette.
4. Un deuxième composant de conteneur a été ajouté à votre page. Vous avez modifié 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. Prévisualisez votre page dans le navigateur.

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