Redisposition pour playbook les composants

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

    • Appliquez la redisposition aux composants de mise en page Expérience de playbook autonomes et personnalisés prêts à l’emploi afin que l’interface utilisateur s’ajuste lorsque vous redimensionnez votre fenêtre ou zoomez.

    La redistribution est une espace de travail configurable fonctionnalité qui permet de zoomer les pages et le contenu jusqu’à 400 % via les paramètres du navigateur. Dans un playbook cas où la redisposition est activée, le mode compact passe en mode compact lors d’un zoom avant à 200 % du navigateur et quitte le playbook mode compact lors d’un zoom arrière.

    Si vous souhaitez que la redistribution fonctionne pour vos composants, reportez-vous à la Expérience de playbook section Appliquer la redisposition aux playbook composants.

    Pour en savoir plus sur la redistribution, reportez-vous à la section Reflow for Configurable Workspace.

    Appliquer la redisposition aux playbook composants

    Appliquez la redisposition aux composants de mise en page Expérience de playbook autonomes et personnalisés prêts à l’emploi afin que l’interface utilisateur s’ajuste lorsque vous redimensionnez votre fenêtre ou effectuez un zoom.

    Avant de commencer

    Rôle requis : administrateur

    Procédure

    1. Créez l’enregistrement sys_ux_auto_reflow_rule.
      1. Ouvrez le menu Tout .
      2. Dans la barre de filtre, saisissez et saisissez sys_ux_auto_reflow_rule.list.

      La liste Règles de redisposition automatique UX est créée et s’affiche.

      Il existe une règle pour chacun des composants de playbook mise en page autonome et personnalisé. Lorsqu’elles sont inférieures à une certaine Générateur d'IU taille de page, ces règles utilisent le moteur de redistribution par défaut pour remplacer les propriétés du macroponent dans la liste des définitions de macroponent UX (sys_ux_macroponent.list) et certaines valeurs CSS. Les règles fournies dans les applications de stockage Expérience de playbook utilisent une largeur de page de 640 px pour activer/désactiver la propriété compactMode des composants, ainsi qu’une hauteur de 100 vh pour s’assurer que les composants sont redimensionnés pour s’adapter à l’espace.

      Si vous utilisez le composant autonome, vous avez terminé. Si vous utilisez des composants de mise en page personnalisés, passez à l’étape suivante.

    2. Accédez à la Tout > Générateur d'IU.
    3. Ouvrez la mise en page à laquelle vous souhaitez appliquer la redisposition dans Expérience de playbook le générateur.
    4. Dans le coin inférieur gauche, sélectionnez l’icône Données et ouvrez le contrôleur d’interface utilisateur de disposition personnalisée Playbook .
    5. Dans le champ Mode d’affichage de l’activité , mettez à jour la valeur de la propriété de sortie stagePickerVisible sur vrai.
    6. Sélectionnez le composant auquel vous souhaitez que la règle de redistribution s’applique.
    7. Sous l’onglet Événements, ajoutez le gestionnaire d’événements Mode compact modifié
      Cela active et désactive automatiquement le mode compact conformément à la règle de redistribution, en modifiant la valeur de la propriété de sortie compactMode sur true ou false. Celui-ci est ensuite appliqué aux autres composants de votre playbook afin que tout se redimensionne automatiquement.
    8. Facultatif : Sélectionnez Volets redimensionnables.
      1. Mettez à jour la position des volets pour qu’elle s’affiche dans l’orientation gauche et droite , ou sous forme de panneaux supérieur et inférieur .
      2. Sous l’onglet Config., ouvrez la valeur de propriété scriptée dans le champ de volet affiché par défaut .
      3. Mettez à jour la valeur du retour de if( !api.data.playbook_custom_layout.compactMode) pour afficher uniquement le volet « gauche »/« haut », uniquement le volet « droit »/« bas » ou « les deux » volets lorsqu’il n’est pas en mode compact.
      4. Pour Compact Mode (Mode compact), mettez à jour la première valeur pour return (api.data.playbook_custom_layout. selectedItem || ()).stageContextId ? Pour afficher le volet d’activité « Gauche »/« Haut » ou « Droite »/« Bas » lorsqu’une étape est sélectionnée.
        La deuxième valeur indique le volet à afficher lorsqu’une étape n’est pas sélectionnée.