Redisposition des 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.

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

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

Pour plus d’informations sur Reflow, 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 que vous zoomez.

Avant de commencer

Rôle requis : admin

Procédure

1. Créez l’enregistrement de sys_ux_auto_reflow_rule.
   1. Ouvrez le menu All .
   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 s’affiche.

   Il existe une règle pour chacun des composants de playbook mise en page autonome et personnalisée. Lorsque la taille de page est inférieure à une certaine Générateur d'IU taille, ces règles utilisent le moteur de redistribution par défaut pour remplacer les propriétés de macroponent dans la liste des définitions des macroponents UX (sys_ux_macroponent.list) et certaines valeurs CSS. Les règles fournies dans les applications de l’App Expérience de playbook Store 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 garantir 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 à Tous > Générateur d'IU.
3. Ouvrez la mise en page à laquelle vous souhaitez appliquer Redisposition dans Expérience de playbook Builder.
4. Dans le coin inférieur gauche, sélectionnez l’icône Data (Données ) et ouvrez le contrôleur d’interface utilisateur Playbook Custom Layout UI.
5. Dans le champ Mode de vue 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 redisposition s’applique.
7. Sous l’onglet Événements , ajoutez le gestionnaire d’événements modifié en mode compact .
   Cela active et désactive automatiquement le mode compact en fonction de la règle de redisposition, en changeant la valeur de la propriété de sortie compactMode sur vrai ou faux. Ceci est ensuite appliqué aux autres composants de votre playbook afin que tout se redimensionne automatiquement.
8. Facultatif : Sélectionnez les volets redimensionnables.
   1. Mettez à jour la position des panneaux 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 le champ Volet affiché par défaut .
   3. Mettez à jour la valeur de if ( !api.data.playbook_custom_layout.compactMode) return pour afficher uniquement le volet « gauche »/« haut », uniquement le volet « droite »/« bas » ou « les deux » panneaux lorsqu’il n’est pas en mode compact.
   4. Pour le mode compact, mettez à jour la première valeur pour le retour (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 panneau à afficher lorsqu’une étape n’est pas sélectionnée.