Redisposition pour playbook les composants

  • Rversion finale: Washingtondc
  • Mis à jour 1 févr. 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 votre zoom.

    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 navigateur passe en mode compact lors d’un zoom avant à 200 % et quitte le playbook mode compact lors d’un zoom arrière.

    Si vous souhaitez que la redisposition 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 à 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 zoomez.

    Avant de commencer

    Rôle requis : admin

    Procédure

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

      La liste Règles de redisposition automatique UX est créée et affichée.

      Il existe une règle pour chacun des composants de mise en playbook page autonome et personnalisée. Lorsqu’elles sont inférieures à une certaine Générateur d'IU taille de page, ces règles utilisent le moteur de redisposition par défaut pour remplacer les propriétés du macroponent dans la liste Définitions du macroponent UX (sys_ux_macroponent.list) et certaines valeurs CSS. Les règles fournies dans les applications de Expérience de playbook stockage 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 se redimensionnent 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 Tous > 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 appliquer la règle de redistribution.
    7. Sous l’onglet Événements , ajoutez le gestionnaire d’événements Compact Mode Changed (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 Panneaux 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 Configuration , ouvrez la valeur de la propriété scriptée dans le champ du volet Affichage par défaut .
      3. Mettez à jour la valeur 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’ils ne sont pas en mode compact.
      4. Pour le 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.