> For the complete documentation index, see [llms.txt](https://documentation.efalia.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://documentation.efalia.com/documentations/efalia-process/administration/administration-fonctionnelle/tableaux-bord-vues.md).
# Tableaux de Bord et Vues
Les **vues** d'Efalia Process sont des listes de documents présentées sous forme de tableau dans l'interface. Elles permettent aux utilisateurs de visualiser, filtrer et trier les documents selon des critères personnalisés. Les vues constituent les éléments de base des tableaux de bord du Panorama et des applications verticales.
***
## Vues Génériques (Prédéfinies)
Efalia Process propose plusieurs **vues génériques** accessibles par défaut depuis le Panorama, sans modélisation spécifique. Elles s'appliquent à tous les processus auxquels l'utilisateur a accès.
| Vue | Description |
| --------------------- | -------------------------------------------------------------- |
| **À Faire** | Documents sur lesquels l'utilisateur peut effectuer une action |
| **Suivi** | Documents que l'utilisateur suit en observateur |
| **Actions Possibles** | Documents pour lesquels au moins une opération est disponible |
| **Documents Clos** | Documents en état final |
Ces vues sont triées par **date de modification décroissante** par défaut. Chaque ligne représente un document, chaque colonne affiche une information spécifique.
***
## Créer une Vue Personnalisée
Les vues personnalisées permettent d'afficher exactement les données dont les utilisateurs ont besoin, avec les colonnes et les filtres adaptés.
{% stepper %}
{% step %}
#### Ouvrir le type de graphe Vues
Dans le panneau gauche du Designer HTML, double-cliquez sur **Vues** pour créer un nouveau graphe de vue.
📸 **CAPTURE : admin-fonct-vues-01-creation-vue.png**
> Panneau gauche du Designer avec "Vues" sélectionné et un nouveau graphe vierge
> {% endstep %}
{% step %}
#### Configurer les propriétés de la vue
| Propriété | Description |
| ----------------------- | ----------------------------------------- |
| **Libellé** | Nom affiché dans l'interface utilisateur |
| **Nom interne** | Identifiant unique (Designer name) |
| **Locale au processus** | Restreint l'affichage à un seul processus |
| **Rôles** | Limite l'accès à la vue à certains rôles |
| **Collection initiale** | Filtre les documents inclus dans la vue |
| **Mode** | Calcul en temps réel ou asynchrone |
| {% endstep %} | |
{% step %}
#### Définir la collection initiale
La **collection initiale** détermine quels documents apparaissent dans la vue. Plusieurs critères de filtrage sont disponibles :
| Type de collection | Description |
| ------------------ | -------------------------------------------------------------------- |
| **Par état** | Documents dans un ou plusieurs états spécifiques |
| **Par type** | Documents d'un ou plusieurs types de document |
| **Par accès** | Documents accessibles à l'utilisateur connecté (lecture ou écriture) |
| **Combiné** | Plusieurs critères combinés |
| {% endstep %} | |
{% step %}
#### Ajouter et configurer les colonnes
Faites glisser des composants **Colonne** depuis le panneau sur le canvas de la vue, puis configurez chaque colonne :
| Propriété | Description |
| ----------------------- | ------------------------------------------------------ |
| **Libellé** | En-tête de colonne affichée |
| **Type de données** | Texte, Entier, Décimal ou Date |
| **Codage (STalk)** | Expression STalk calculant la valeur affichée |
| **Colonne cachée** | Masquée à l'affichage mais utilisable pour le filtrage |
| **Clic pour éditer** | Ouvre le formulaire d'édition au clic sur la cellule |
| **Images comme icônes** | Affiche une image à la place du texte |
| **Tri** | Croissant, décroissant ou aucun |
| **Filtrage** | Activer/désactiver le filtre sur cette colonne |
📸 **CAPTURE : admin-fonct-vues-02-configuration-colonnes.png**
> Propriétés d'une colonne de vue avec les champs Type, Codage STalk et options d'affichage
> {% endstep %}
{% step %}
#### Déployer et tester
Déployez le processus (ou vérifiez la cohérence) pour que la vue soit disponible dans le Panorama. Vérifiez l'affichage dans l'interface utilisateur.
{% endstep %}
{% endstepper %}
***
## Mode de Calcul des Vues
{% tabs %}
{% tab title="Temps réel" %}
La vue est calculée et mise à jour **instantanément** à chaque affichage.
**Avantages :** Données toujours à jour **Inconvénients :** Peut impacter les performances si la volumétrie est importante
**Recommandé pour :** Vues sur de petits volumes de données (< 1 000 documents)
{% endtab %}
{% tab title="Asynchrone" %}
La vue est calculée en **arrière-plan** à intervalles réguliers. L'utilisateur voit les données de la dernière mise à jour.
**Avantages :** Meilleures performances, même sur de grands volumes **Inconvénients :** Données potentiellement décalées de quelques secondes/minutes
**Recommandé pour :** Tableaux de bord de suivi, statistiques, vues à forte volumétrie
{% endtab %}
{% endtabs %}
***
## Coder les Colonnes avec STalk
L'expression **STalk** d'une colonne calcule la valeur affichée pour chaque document de la vue. Elle doit retourner une valeur du type déclaré pour la colonne.
### Exemples de colonnes STalk
**Afficher un champ texte :**
```
Reference
```
**Concaténation de plusieurs champs :**
```
Prenom + " " + Nom
```
**Valeur calculée :**
```
Montant_HT * 1.20
```
**Condition — afficher un statut coloré (image) :**
```
if ( Solde > 0 ) "green_icon.png" else "red_icon.png"
```
**Formater une date :**
```
text(Date_creation, "dd/MM/yyyy")
```
**Calculer une durée depuis la création :**
```
timeFormat(now() - createTime(), "d' jours'")
```
**Afficher le nom de l'auteur (format court) :**
```
text(authorId(), "shortLdapName")
```
{% hint style="info" %}
💡 Pour les colonnes de type image/icône, activez l'option **"Images comme icônes"** et retournez le nom d'un fichier image depuis l'expression STalk.
Consultez l'article [Langages de Processus](/documentations/efalia-process/administration/administration-fonctionnelle/langages-process.md) pour la référence complète de STalk.
{% endhint %}
***
## Vues Embarquées
Les **vues embarquées** s'affichent directement à l'intérieur d'un formulaire de document, plutôt que dans le Panorama. Elles permettent d'afficher des documents liés dans le contexte d'un dossier parent.
### Cas d'usage
* Afficher les lignes de commande dans le formulaire d'une commande
* Lister les documents dérivés (factures, bons de livraison) dans un dossier principal
* Montrer les documents enfants d'un processus dans le formulaire parent
### Créer une Vue Embarquée
1. Dans le panneau gauche du Designer, double-cliquez sur **Vues Embarquées**
2. Configurez la collection et les colonnes comme pour une vue standard
3. Dans le formulaire cible, ajoutez un composant **Vue Embarquée** et référencez votre vue
4. La vue embarquée peut également permettre la **création de documents** depuis le formulaire (configurable dans les propriétés de l'opération)
📸 **CAPTURE : admin-fonct-vues-03-vue-embarquee.png**
> Formulaire avec une vue embarquée affichant les documents liés dans la section inférieure
***
## Vues Chaînées
Les **vues chaînées** affichent des informations calculées à partir d'un **document de référence** sélectionné dans une vue parente. Elles permettent de créer une navigation hiérarchique : sélectionner un document dans une vue et voir ses sous-documents dans une autre vue.
### Types de collections pour vues chaînées
| Type | Description |
| ------------------------- | ---------------------------------------------- |
| **Documents enfants** | Documents fils directs du document sélectionné |
| **Documents descendants** | Tous les descendants (arborescence complète) |
### Créer une Vue Chaînée
{% stepper %}
{% step %}
#### Créer la vue parente
Créez une vue standard (vue parente) qui affiche les documents principaux.
{% endstep %}
{% step %}
#### Créer la vue enfant
Créez une deuxième vue avec la collection **"Documents enfants"** ou **"Documents descendants"**.
{% endstep %}
{% step %}
#### Lier les vues via une colonne
Dans la vue parente, ajoutez une colonne configurée pour **déclencher l'affichage de la vue enfant** au clic.
Les deux vues sont alors liées : sélectionner un document dans la vue parente met à jour automatiquement la vue enfant.
📸 **CAPTURE : admin-fonct-vues-04-vues-chainees.png**
> Exemple d'interface avec vue parente (commandes) et vue enfant (lignes de commande) affichées côte à côte
> {% endstep %}
> {% endstepper %}
***
## Intégration dans le Front Office
Les vues créées dans le Designer sont référencées dans le fichier `settings.json` pour les afficher dans les applications verticales.
```json
{
"id": "TAB_IN_PROGRESS",
"label": "En cours",
"type": "DATA_VIEW",
"viewName": "contrats_en_cours"
}
```
`viewName` correspond au **nom interne** de la vue défini dans le Designer.
Consultez l'article [Paramétrage du Front Office](/documentations/efalia-process/administration/administration-fonctionnelle/parametrage-front-office.md) pour la configuration complète des onglets.
***
## Vues pour les Graphiques
En plus des vues tabulaires, Efalia Process permet de créer des **graphiques** (camembert, courbe) dans les onglets du Front Office.
| Type | Usage |
| ------------ | ------------------------------------------------------ |
| `PIE_CHART` | Répartition par catégorie (type de contrat, statut…) |
| `LINE_CHART` | Évolution dans le temps (nombre de dossiers par mois…) |
Ces graphiques se basent sur des **vues de données** configurées pour retourner des valeurs numériques agrégées.
***
## Bonnes Pratiques
{% hint style="success" %}
**✅ À faire :**
* Nommer les vues de manière explicite et cohérente
* Utiliser le **mode asynchrone** pour les vues à forte volumétrie
* Limiter le nombre de colonnes à l'essentiel (lisibilité)
* Activer le filtrage uniquement sur les colonnes utiles (performance)
* Tester les performances des vues avec des données représentatives avant déploiement
{% endhint %}
{% hint style="danger" %}
**❌ À éviter :**
* Expressions STalk trop complexes dans les colonnes (impactent les performances)
* Vues en temps réel sur des volumes > 1 000 documents sans pagination
* Colonnes STalk faisant appel à des connecteurs SQL (exécutés pour chaque ligne)
{% endhint %}
***
## Questions Fréquentes
Peut-on limiter une vue à un seul processus ?
Oui. Cochez l'option **"Locale au processus"** dans les propriétés de la vue. La vue ne sera disponible que dans le contexte de ce processus et n'apparaîtra pas dans les vues génériques du Panorama.
Comment restreindre l'accès à une vue à certains rôles ?
Dans les propriétés de la vue, renseignez la liste des **rôles** autorisés. Seuls les utilisateurs ayant au moins un de ces rôles dans le processus pourront voir cette vue.
Peut-on trier par défaut une vue selon une colonne spécifique ?
Oui. Dans les propriétés de la colonne à utiliser comme tri par défaut, sélectionnez **"Tri croissant"** ou **"Tri décroissant"**. La vue s'affichera triée selon cette colonne lors du premier affichage.
Comment afficher des icônes de statut colorées dans une vue ?
1. Créez une colonne de type **Texte**
2. Activez l'option **"Images comme icônes"**
3. Dans l'expression STalk, retournez le nom d'un fichier image selon la condition :
```
if ( Statut == "urgent" ) "red.png" else if ( Statut == "normal" ) "green.png" else "orange.png"
```
4. Placez les fichiers image dans l'espace de publication du serveur
Les vues embarquées peuvent-elles permettre la création de nouveaux documents ?
Oui. Dans les propriétés de l'opération du processus, vous pouvez configurer que les **créations de documents via vue embarquée** sont autorisées. Cela permet à l'utilisateur de créer des documents fils directement depuis le formulaire parent.
Quelle est la différence entre une vue "Locale au processus" et une vue "Générique" ?
* **Vue locale au processus** : visible uniquement dans le contexte de ce processus, dans la bannette dédiée. Non disponible dans les vues génériques du Panorama.
* **Vue générique** : accessible depuis le Panorama, affiche les documents de tous les processus auxquels l'utilisateur a accès. Utile pour les vues consolidées multi-processus.
***
**Vos tableaux de bord sont configurés.** Pour calculer des valeurs complexes dans vos colonnes de vues, consultez l'article sur les langages de processus.
Pour aller plus loin :
* [Langages de Processus (STalk, WKYJS)](/documentations/efalia-process/administration/administration-fonctionnelle/langages-process.md)
* [Paramétrage du Front Office](/documentations/efalia-process/administration/administration-fonctionnelle/parametrage-front-office.md)
* [Designer HTML – Fonctionnalités Avancées](/documentations/efalia-process/administration/administration-fonctionnelle/designer-html.md)
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://documentation.efalia.com/documentations/efalia-process/administration/administration-fonctionnelle/tableaux-bord-vues.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.