Introduction aux mises en page personnalisées

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 6 minutes de lecture

    • Configurez une Générateur d'IU page et commencez à configurer vos composants de mises en page personnalisées Playbook modulaires pour les mises en page personnalisées dans Expérience de playbook.

    Avant de commencer

    Rôle requis : ui_builder_admin, admin

    Pourquoi et quand exécuter cette tâche

    Après avoir créé une Générateur d'IU page, vous pouvez personnaliser Expérience de playbook les pages en fonction de vos besoins. Les modèles de page incluent des contrôleurs qui peuvent être utilisés avec des paramètres prédéfinis de composant, y compris les playbook modèles. Consultez Bind data to UI Builder pages using controllers (advanced feature) pour plus d'informations.

    Procédure

    1. Accédez à la Tout > Cadre de travail Now Experience > Générateur d'IU.
    2. Ouvrez l’expérience du générateur d’IU dans laquelle vous souhaitez travailler ou créez une nouvelle expérience.
      L’expérience du générateur d’expérience de playbook a été conçue pour que vous puissiez la personnaliser Expérience de playbook. Pour en savoir plus sur la création d’une expérience, reportez-vous à la section Configure how users interact with your applications in UI Builder.
    3. Dans votre expérience de générateur d’IU , vous pouvez :
      L’utilisation d’un Expérience de playbook modèle accélère le processus de développement, car le contrôleur et les composants de l’interface utilisateur de disposition personnalisée Playbook sont déjà ajoutés à chaque page, y compris les générateurs d’enregistrements à partir de la version 25.2. Le contrôleur remplit automatiquement tous les composants fournis avec des données.
      Remarque :
      Vous pouvez toujours créer et ajouter des composants personnalisés lorsque vous utilisez un modèle.

      Sélectionnez un playbook modèle.
    4. Si vous utilisez un Expérience de playbook modèle, créez votre page.
      1. Configurez les détails de la page.
        Nom Nom de votre page.
        Adresse URL Le chemin de l’URL vers lequel les utilisateurs naviguent pour accéder à la page.
      2. Vérifiez les paramètres de test pour votre page.
        table Nom de la table parente du playbook.
        sysID Sys_id de l’enregistrement. Pour un enregistrement qui n’existe pas, la valeur est -1.
        expérience L’expérience que vous souhaitez charger.
        selectedPlaybook Playbook dans lequel l’agent ou le prestataire se trouve.
        selectedStage Étape dans laquelle se trouve l’agent ou le prestataire.
        selectedActivity Activité de l’agent ou du prestataire.
      3. Configurez votre page par défaut variant.
        Nom Le nom de votre variante de page.
        Audiences Les utilisateurs qui peuvent voir votre variante de page. Elles peuvent être définies par :
        • Rôle
        • Groupe
        • Utilisateur
        • Société
        • Département
        • Emplacement
        • Script
        Conditions Conditions qui déterminent quand la variante de page est affichée.
      4. Ouvrez la variante de page par défaut que vous venez de créer.
      La nouvelle Expérience de playbook mise en page inclut déjà des contrôleurs et des composants remplis de données, mais il y a quelques configurations supplémentaires à effectuer. Pour effectuer les configurations restantes, passez à l’étape 6.
    5. Si vous avez utilisé le modèle d’enregistrement standard ou créé votre page à partir de zéro, ajoutez le contrôleur d’interface utilisateur de disposition personnalisée Playbook à la page.
      1. Dans le coin inférieur de votre nouvelle page, sélectionnez l’icône de données (icône Données).
      2. Sélectionnez + Ajouter.
      3. Recherchez « Playbook ».
      4. Sous Ressources de données, sélectionnez Contrôleur de l’interface utilisateur Playbook Custom Layout et cliquez sur Ajouter.
      5. Quittez le panneau Ressources de données .
    6. Configurez le contrôleur d’interface utilisateur de disposition personnalisée Playbook que vous venez d’ajouter.
      1. Pour permettre aux utilisateurs de créer un nouvel enregistrement dans ce formulaire personnalisé Expérience de playbook plutôt que dans le formulaire de nouvel enregistrement standard, sélectionnez une pastille de valeur de test en haut à gauche.
        Le popover des valeurs de test s’ouvre.
      2. Assurez-vous que la valeur de test sysID est définie sur -1, puis sélectionnez Appliquer.
        Valeurs de test pour votre expérience de playbook, avec la table et le sysID.
        Un formulaire de générateur d’enregistrement est disponible lorsque vous ouvrez l’aperçu. Vous devez être en mesure de tester le formulaire du générateur d’enregistrements et de confirmer que de nouveaux enregistrements sont créés.
      3. Vous pouvez également mettre à jour le nom de la table ou l’un des paramètres facultatifs :
      4. Facultatif : Si vous souhaitez plutôt coder en dur les valeurs de test, revenez à Données > Panneau des ressources de données > Instances des ressources de données locales, puis sélectionnez Page d’enregistrement du contrôleur d’interface utilisateur.
      5. Sous l’onglet Config (Configuration ) du contrôleur, ajoutez le SysID parent ou la table parente. Dans le popover des valeurs de test, il s’agit des champs sysID et Table .
        Vous pouvez saisir context.props.table dans le champ Table parente et context.props.sysId dans le champ SysID parent .
        Remarque :
        Assurez-vous que la table ou l’enregistrement que vous entrez a un playbook.
      6. Ajoutez l’expérience de playbook que vous souhaitez utiliser.
      7. Facultatif : Entrez des valeurs pour les autres champs, si nécessaire.
        Mode Vue de l'activité Mode d'affichage utilisé pour présenter les activités du Playbook en mode empilé ou concentré
        Requête du générateur d'enregistrement Chaîne de requête codée pour remplacer éventuellement la requête fournie pour un générateur d'enregistrement
        ID de contexte du playbook sélectionné ID de contexte facultatif du playbook sélectionné pour le lien profond
        ID de contexte de l'étape sélectionnée ID de contexte facultatif de l'étape sélectionnée pour le lien profond
        ID de contexte de l'activité sélectionnée ID de contexte facultatif de l'activité sélectionnée pour le lien profond
      8. Facultatif : Dans la colonne Sorties, vous pouvez sélectionner les valeurs que vous souhaitez coder en dur.
      Le contrôleur est configuré et vous êtes prêt à ajouter playbook des composants.
    7. Ajoutez des playbook composants.
      1. Dans l’arborescence des composants, sélectionnez l’onglet principal.
        Le panneau de l’onglet principal s’ouvre sur la droite.
      2. Dans le panneau de l’onglet principal , sélectionnez + Ajouter.
        Une fenêtre modale demandant « Comment voulez-vous créer cet onglet ? » s’affiche.
      3. Sélectionnez Commencer à partir d’un conteneur vide et cliquez sur Suivant.
        Une fenêtre modale Paramètres d’onglet s’affiche.
      4. Donnez un nom et une icône à votre onglet, puis cliquez sur Créer.
        L’onglet est ajouté à l’arborescence des composants et un canevas vide s’affiche.
      5. Dans l’arborescence des composants, sous votre nouvel onglet, sélectionnez + Ajouter un composant et recherchez « redimensionnable ».
      6. Sélectionnez le composant Volets redimensionnables , donnez-lui un nom, puis cliquez sur Créer.
      7. Dans l’arborescence des composants, ouvrez le nouveau composant Volets redimensionnables que vous venez de créer.
        Le panneau de vos nouveaux volets Redimensionnables s’ouvre sur la droite.
      8. Configurez selon vos besoins, puis cliquez sur Enregistrer dans le coin supérieur droit.
      9. Pour ajouter le sélecteur d’étape, recherchez votre nouveau composant Volets redimensionnablesdans l’arborescence des composants, puis sélectionnez + Ajouter un composant sous la gauche.
      10. Dans l’arborescence de vos composants, sélectionnez le nouveau sélecteur d’étape.
        Le panneau de votre nouveau sélecteur d’étape s’ouvre sur la droite.
      11. Sélectionnez le paramètre prédéfini pour ce composant dans le contrôleur de l’interface utilisateur de disposition personnalisée du Playbook, puis cliquez sur Enregistrer dans le coin supérieur droit.
        Choisissez un paramètre prédéfini pour le composant.
        Un message de confirmation s’affiche et les entrées et événements du composant sous l’onglet Événements du panneau du sélecteur d’étape sont renseignés automatiquement.
        Configuration du composant.
      12. Pour ajouter la visionneuse d’activité Playbook, recherchez votre composant Volets redimensionnablesdans l’arborescence des composants, puis sélectionnez + Ajouter un composant sous la droite.
      13. Répétez les étapes 7j et 7k.
      14. Pour ajouter les modaux Playbook, recherchez l’onglet que vous avez créé sous l’onglet principal de l’arborescence des composants, puis sélectionnez + Ajouter un composant.
      15. Répétez les étapes 7j et 7k pour les modaux Playbook.
      16. Revenez au sélecteur d’étape Playbook et déterminez l’orientation de votre sélecteur d’étape.
      17. Dans le coin supérieur droit, cliquez sur Ouvrir pour prévisualiser la playbook mise en page.
      18. Revenir à Générateur d'IU.
      19. Revenez à votre sélecteur d’étape dans l’arborescence des composants et déterminez l’orientation de votre sélecteur d’étape dans le panneau qui s’ouvre sur la droite.