Placer un tableau de bord sur un écran dessiné
Objectif
Construire la page qu’était autrefois un tableau de bord — des chiffres, des graphiques, une grille d’enregistrements et un formulaire pour en ajouter un — sous la forme d’un écran que vous avez dessiné.
Pourquoi cela existe
Un tableau de bord, ce sont des tuiles, des chiffres, des graphiques et quelques surfaces d’enregistrement intégrées. Un écran dessiné avait les deux premiers et aucune des deux dernières ; il a donc désormais les deux : un contrôle Graphique et un contrôle Vue ou formulaire de table.
Ce que vous gagnez par rapport à l’artefact tableau de bord, c’est que la mise en page vous appartient. Les tuiles sont des boîtes ordinaires : elles peuvent avoir n’importe quelle taille, n’importe quelle couleur et porter n’importe quel état dessiné ; et la page peut naviguer, ouvrir des superpositions et exécuter des gestionnaires, parce que c’est un écran.
Ce à quoi vous renoncez, c’est le générateur de requêtes par widget du concepteur de tuiles. Un
chiffre, ici, c’est un loadRecords, la même ligne que celle qu’écrit n’importe quel autre écran
Studio.
Un chiffre est une requête de comptage
loadRecords("par_ticket", "probe", {
top: 1,
where: { par_status: 100000002 },
countInto: "statusActive"
});
countInto reçoit le nombre de lignes correspondantes — et non le nombre de lignes renvoyées.
top: 1 est ce qui garde le tout honnête : le comptage porte sur l’ensemble, et la page que
personne ne lit est aussi petite qu’une page peut l’être. probe est un champ d’état que vous
déclarez une fois et que vous ne regardez jamais.
Dessinez ensuite un grand texte et liez son Texte à text(state.statusActive).
Compter ce qui manque. where ne compare que l’égalité : « ceux dont un champ est vide » est
donc une option à part entière, empty — une liste de champs qui ne doivent avoir aucune valeur.
loadRecords("pbo_position", "probe", {
top: 1,
where: { state: 0 },
empty: ["pbo_currentoccupant"],
countInto: "vacant"
});
Cela compte les postes ouverts que personne n’occupe. C’est la même condition que le filtre est vide d’une vue : une tuile et la liste à côté concordent donc.
Un graphique
Déposez Composants → Graphique. Dans l’onglet Application :
-
Graphique — barres, barres empilées, courbe, aires, secteurs ou anneau.
-
Valeur — une liste de
{ label, value }:[{ label: "New", value: state.statusNew },{ label: "Active", value: state.statusActive },{ label: "Resolved", value: state.statusResolved }]
Le graphique est celui de la plateforme, pas un dessin. Cela compte plus qu’il n’y paraît : la difficulté d’un graphique réside dans le choix des graduations, le chevauchement des libellés et les données que personne n’a prévues — un résultat sans ligne, une valeur aberrante quatre cents fois plus grande que les autres, une catégorie de quatre-vingt-dix caractères. Tout cela est décidé à chaque affichage. Un graphique que vous auriez dessiné verrait ces questions tranchées une fois pour toutes, par vous, d’après les données d’exemple sous vos yeux : juste dans le concepteur et faux en production.
Placez les mots à l’intérieur du contrôle. Tout texte que vous dessinez à l’intérieur d’un graphique devient son nom accessible — sans lui, un lecteur d’écran annonce « graphique » et rien d’autre. Il n’est pas dessiné par-dessus le graphique ; un titre visible se place dans le panneau au-dessus.
Il n’y a pas de double axe, et il n’y en aura pas. Deux mesures sur deux échelles dans un même cadre invitent à une comparaison que la géométrie ne permet pas. Deux mesures d’ordres de grandeur différents, ce sont deux graphiques.
Une grille, ou un formulaire, à partir d’une table
Déposez Composants → Vue ou formulaire de table. Dans l’onglet Application :
| Champ | Contenu |
|---|---|
| Affiche | Les lignes d’une vue, Un formulaire pour un nouvel enregistrement ou Un formulaire pour un enregistrement |
| Table | choisie parmi les tables de l’environnement — tapez pour filtrer par nom ou nom logique |
| Vue / Formulaire | choisi parmi les vues ou formulaires de cette table, ou Celui par défaut de la table |
Ce qui apparaît est la vraie chose : la grille pilotée par modèle avec son propre tri, sa propre pagination, son propre sélecteur de colonnes et ses propres autorisations par enregistrement ; ou le formulaire de création rapide de la table, avec ses règles d’obligation et ses étapes de plug-in. Rien n’est redessiné, c’est pourquoi un champ obligatoire sur la table l’est aussi ici.
Un formulaire pour un enregistrement tire l’enregistrement de sa liaison Valeur — un identifiant, généralement issu d’un choix fait par quelqu’un sur le même écran.
Étapes
- Dessinez la page : un titre, une rangée de tuiles, des panneaux pour les graphiques et des panneaux pour les surfaces.
- Déclarez l’état — un champ par chiffre, plus
probe. - Placez chaque requête de comptage dans le gestionnaire Chargé de l’écran, et les mêmes lignes derrière un bouton Actualiser.
- Déposez les graphiques et les surfaces, et renseignez leurs champs.
- Donnez à chaque objet des contraintes pour que la page remplisse la fenêtre — les tuiles s’étirent, les graphiques et les surfaces restent accrochés à leurs bords.
Importez d’abord l’exemple
Studio — Dashboard est cette page, déjà construite. Importez-la, appuyez sur Add 24 tickets, et examinez chaque contrôle dans le concepteur à côté de son résultat dans le Shell.
Dépannage
- La surface indique qu’elle ne sait pas quelle table utiliser. — le champ Table est vide. L’enregistrement le signale par un avertissement plutôt que de refuser, pour que vous puissiez terminer plus tard.
- La surface indique que cette table n’existe pas. — la table a été supprimée depuis qu’elle a été choisie, ou l’application a été importée dans un environnement qui ne l’a pas. Le champ Table affiche encore l’ancien nom ; choisissez-en une que l’environnement possède.
- La surface indique que cet hôte ne peut pas afficher de surface pilotée par modèle. — vous regardez l’Aperçu du concepteur, qui n’a aucun environnement derrière lui. Ouvrez l’application dans le Shell.
- Le graphique est vide. — sa Valeur n’est pas une liste de
{ label, value }. Une ligne qui n’a pas cette forme est écartée plutôt que représentée comme un zéro : une forme erronée se traduit donc par une barre manquante. - Les chiffres ne bougent pas après l’ajout d’un enregistrement. — rien n’a relancé les requêtes. Placez-les derrière un bouton Actualiser, ou relancez-les dans le gestionnaire qui a écrit l’enregistrement.
- Les chiffres ont bougé mais pas la grille intégrée. — une surface intégrée est la grille ou le
formulaire de la plateforme, et elle possède sa propre requête : relancer vos requêtes ne la
touche donc pas. Terminez le gestionnaire par
reloadSurfaces(), qui réaffiche chaque table et chaque formulaire intégrés à l’écran. Faites-le dans le gestionnaire qui a créé les enregistrements comme dans Actualiser — vingt-quatre nouvelles lignes à côté d’une table vide, c’est la chose la plus déroutante que puisse faire un tableau de bord.