Aller au contenu principal

Mise en page et mode édition

Le Cockpit utilise un système de grille responsive à 12 colonnes. Les widgets s'alignent sur les positions de la grille, ce qui rend facile la construction de tableaux de bord propres et alignés sans ajustements au pixel près.

Entrer et sortir du mode édition​

Cliquez sur le bouton Modifier dans la barre d'outils pour entrer en mode édition. La grille devient visible et chaque widget affiche les poignées de glissement et de redimensionnement.

Mode édition avec poignées de grille visibles Mode édition activé. Les poignées de glissement apparaissent en haut de chaque widget et les poignées de redimensionnement dans le coin inférieur droit.

Cliquez de nouveau sur Modifier pour quitter le mode édition et verrouiller les positions des widgets. Quitter le mode édition n'enregistre pas le tableau de bord : tant que vous n'avez pas cliqué sur Mettre à jour ou Sauvegarder sous..., un badge Modifications non enregistrées reste affiché à côté du nom du tableau de bord, et OpSee vous le demande avant que vous quittiez la page. Voir Modifications non enregistrées.

Glisser-déposer pour repositionner​

Saisissez un widget par sa poignée de glissement (zone supérieure) et déplacez-le vers une nouvelle position sur la grille. Les autres widgets se décalent automatiquement pour faire de la place. Relâchez le widget pour le déposer en place.

Widget en cours de déplacement vers une nouvelle position Glissement d'un widget vers une nouvelle position de grille. Un emplacement réservé montre où le widget atterrira lors du relâchement.

Redimensionner les widgets​

Faites glisser la poignée de coin inférieur droit d'un widget pour modifier sa taille. Les widgets s'alignent sur les largeurs de colonnes et hauteurs de lignes valides selon les contraintes de leur type.

Poignée de redimensionnement sur le coin du widget La poignée de redimensionnement dans le coin inférieur droit d'un widget. Faites-la glisser pour ajuster la largeur et la hauteur dans les contraintes autorisées.

Contraintes de taille​

Chaque type de widget a des largeurs autorisées prédéfinies sur la grille à 12 colonnes. Les hauteurs peuvent être ajustées dans des bornes minimales et maximales.

Type de widgetLargeurs autorisées (colonnes)Taille par défautHauteur min
Cartes KPI3, 4 ou 63 x 22 lignes
Graphiques doughnut3, 4, 6 ou 124 x 33 lignes
Graphiques en barres3, 4, 6 ou 126 x 43 lignes
Graphiques en ligne4, 6 ou 126 x 43 lignes
Tables DataGrid6 ou 1212 x 64 lignes
Chronologie6 ou 1212 x 43 lignes

Les cartes KPI à 3 colonnes tiennent à quatre par ligne, idéales pour une rangée récapitulative en haut d'un tableau de bord. Les graphiques à 6 colonnes tiennent à deux côte à côte. Les tables DataGrid sont par défaut en pleine largeur pour une lisibilité maximale.

Compactage vertical​

La grille utilise un compactage vertical. Quand vous déplacez ou supprimez un widget, tous les widgets en dessous remontent pour combler les espaces. Cela maintient le tableau de bord compact, sans lignes vides entre les widgets.

astuce

Ajoutez d'abord tous vos widgets, puis entrez en mode édition pour les réorganiser en une seule session. C'est plus rapide que de repositionner après chaque ajout.

Ajouter plusieurs widgets en une fois​

Lorsque vous ouvrez la boîte de dialogue Ajouter un widget, vous pouvez ajouter les widgets un par un ou par lots. Après l'ajout d'un widget, la boîte de dialogue reste ouverte pour que vous puissiez en parcourir et en ajouter d'autres. Chaque nouveau widget est placé à la prochaine position disponible sur la grille automatiquement.

astuce

Utilisez ceci pour peupler rapidement un nouveau tableau de bord. Ouvrez la boîte de dialogue Ajouter un widget, ajoutez toutes les cartes KPI dont vous avez besoin, puis ajoutez vos graphiques et tables. Fermez la boîte de dialogue et entrez en mode édition pour tout arranger en une seule fois.

Points de rupture de la grille​

Le Cockpit s'adapte aux différentes tailles d'écran. Sur les grands écrans, la grille complète à 12 colonnes est disponible. Sur les écrans plus petits, le nombre de colonnes diminue automatiquement :

Taille d'écranColonnes
Grande (bureau)12
Moyenne (tablette paysage)12
Petite (tablette portrait)6
Très petite (téléphone paysage)4
Minimale (téléphone portrait)2

Les widgets se redistribuent pour s'adapter aux colonnes disponibles. Un graphique à 6 colonnes sur un écran à 6 colonnes prend automatiquement toute la largeur.

Étapes suivantes​

Prérequis​

En lien​