Comment présenter des données en colonnes

Introduction

Pour organiser vos données efficacement, vous pouvez les présenter en colonnes en utilisant un tableau qui catégorise les informations selon un champ précis. Par exemple, en travaillant avec un agrégat tel que Compte et en utilisant le champ Industrie (ce champ doit se trouver sous le parent “entité ou agrégat”) pour regrouper les données, vous pouvez obtenir un résultat clair et structuré. Le résultat final est un tableau dynamique où chaque colonne représente une industrie, avec la possibilité d’explorer les comptes associés directement via une page d’application dédiée.

Étapes à suivre

1. Crée une page de type « custom » pour contenir un tableau

2. Crée un "Repeater" à partir d’un agrégat

Dans notre exemple, on utilise l’agrégat Comptes.

a. Depuis l’onglet Attribut, change l’orientation du « Repeater » à « Horizontal ».

b. Supprime les champs du « Repeater »

c. Ajoute un behavior « Group Component Data » pour regrouper les données

Ceci permet d’indiquer le champ qui sert à regrouper, qui sera industrie dans notre exemple. On inscrit donc :

compte => compte.industrie

N. B. Ce « behavior » change complètement la « forme » des données reçues. Maintenant le « repeater » va avoir autant d’enregistrements qu’il y a d’industries (et non de Comptes).

3. Ajoute un champ « text » dans le « box » sous le « repeater »

Sous l’onglet « Attribut », dans la section « value » choisit « field » et écrit : id. Les colonnes se formeront.

***Remarque : Ce qu’y s’affiche sont les valeurs du champ « id », qui est le résultat du « group by » de l’étape #2-C.

4. Insert un second "Repeater" pour afficher les données détaillées

Insert un nouveau « Repeater » dans le premier « Repeater », à l’aide du « toolbox ».

***Nous recommandons de le glisser sur la page, dans la « box » industrie.

Il faut ensuite le lier au « data » (notre liste de compte), qui contient les données regroupées. Pour ce faire, ajoute un « behavior » de type « set component data » de type JavaScript et écrit :

data.data

Les ID des comptes s’affichent instantanément.

5. Ajoute des champs spécifiques pour les comptes

À partir du panneau « Project Explorer », glisse les champs à afficher dans une « carte » compte, sous le texte de l’ID. Dans notre exemple, on glisse « nom » et « gestionnaire de compte. Supprime ensuite le champ contenant l’ID.

6. Applique des conditions de visibilité aux champs "id" et "Aucun"

1. Lorsqu’un compte n’a pas d’industrie, la valeur est vide. Créer un entête de colonne conditionnelle, qui s’affichera uniquement dans cette situation. Pour ce faire, glisse un texte du « toolbox », directement sur la page, dans la « box » sous les industries. Puis, dans l’onglet « Attribut », écrit la valeur : Aucun

2. Pour rendre cette composante texte visible uniquement sous condition que la valeur « id » soit vide, ajoute le « behavior » « Show Component based on a condition », et écrit :

   !data.id

    

3. Ensuite, applique la condition inverse pour le champ « id » :

!!data.id

Voici le résultat de l’étape 6:

Bonus: Styliser le tableau pour améliorer l'apparence visuelle

Ensuite, ajoute un peu de style pour obtenir un visuel intéressant :

- Padding, Marges, Polices

- Colonnes à largeur fixe

- Scroll horizontal s’il y a trop de colonnes

Conclusion:

Présenter des données en colonnes nécessite de structurer les données en groupes clairs, d’ajuster la présentation à l’aide de comportements spécifiques, et d’appliquer des styles pour un rendu optimal. Ces étapes garantissent une visualisation intuitive et organisée des données.