Composant TaskList

TaskList affiche des Spark Tasks dans une page. Son périmètre de données de base provient d'un Filter enregistré dans Task Designer. Le composant réutilise également les autorisations, les champs, les détails et les fonctions de recherche à l'exécution des tâches.

Après avoir lu ce guide, vous saurez :

• Utiliser un Task Filter pour définir le périmètre de base d'une TaskList
• Utiliser un Task Form pour afficher des critères de recherche avancés
• Ajouter des champs système et personnalisés comme colonnes du tableau
• Régler l'ordre, le titre, la largeur, le tri, la position fixe et l'ellipse des colonnes
• Configurer Task Key ou une autre colonne comme lien de tâche
• Contrôler la barre de filtres, les paramètres de colonnes et la taille des pages
• Vérifier le comportement de recherche des champs Assignee, Select, Date et DateTime

1. Quand utiliser TaskList

TaskList convient aux cas suivants :

• Afficher un type de tâche ou un ensemble de tâches dans une page métier
• Utiliser TQL pour imposer un type, un statut, une étape ou une autre condition de base
• Permettre aux utilisateurs d'affiner les résultats par titre, responsable, date et champs personnalisés
• Ouvrir les détails d'une tâche en cliquant sur son numéro ou sur un champ métier de la liste
• Afficher dans un même tableau les champs système des tâches et les champs métier personnalisés

TaskList, DataList et ProTable ont des périmètres de données différents :

Composant	Données principales	Définition de la recherche	Usage typique
TaskList	Spark Tasks	Task Filter + critères à l'exécution	Listes de tâches, listes d'approbation et files de travail métier
DataList	Business Object	DQL + filtres du modèle	Données d'objets telles que commandes, clients et équipements
ProTable	Custom URL ou source de données de modèle	Paramètres de requête HTTP ou requête de modèle	API tierces, données agrégées et protocoles de pagination personnalisés

Si la page n'affiche pas des tâches, utilisez plutôt DataList ou ProTable.

2. Prérequis et origine de l'exemple

TaskList affiche les tâches de processus de Spark Tasks. Avant de le configurer, nous vous recommandons de :

1. Lire la présentation de Process Designer pour comprendre les relations entre Task Type, les champs, les formulaires, les étapes, les workflows et les schémas d'autorisation.
2. Terminer le démarrage rapide : workflow d'approbation des achats et vérifier que vous pouvez créer et traiter une Purchase Request dans DEV.

Ce guide réutilise directement le workflow d'approbation des achats configuré dans ce démarrage rapide et ne recrée pas ses actifs de processus. Le démarrage rapide fournit la base suivante :

Actif	Configuration de l'exemple
Task Type	PURCHASE / Purchase Request
Workflow	Purchase Approval
Champs personnalisés	Champs d'achat comprenant Finance Review Result, Department Review Result et Required Date
Données d'exécution	Purchase Requests créées dans DEV et validées avec différentes branches d'approbation

À partir de ces actifs de processus, ce guide configure les actifs de liste et les propriétés de page nécessaires à TaskList :

Actif ou propriété	Configuration de ce guide
Task Filter	All Purchase Request Tasks
Filter TQL	taskType = "PURCHASE" ORDER BY createdAt DESC
Query Form	purchaseQueryForm
Champs du Query Form	Assignee, Finance Review Result, Department Review Result, Required Date
Columns	Task Key, Title, Task Type, Current Step, Created At
Page Size	20
Show Filter Bar	Activé
Show Column Settings	Activé

3. Préparer les actifs requis

3.1 Préparer les actifs de tâche

Vérifiez que les actifs suivants sont enregistrés dans l'application et la version de conception courantes :

1. Le Task Type possède un workflow, un schéma d'autorisation et les formulaires nécessaires.
2. Les champs personnalisés à afficher ou à rechercher ont été ajoutés au Task Type.
3. Au moins un Task Filter est disponible pour être référencé par TaskList.
4. Si une recherche avancée est nécessaire, un Task Form dédié a été créé.

Les choix proposés par TaskList sont chargés pour la combinaison App + Version courante. Dans DEV, vous pouvez utiliser les actifs de tâche enregistrés dans la version de développement actuelle. Pour une validation dans TEST ou PROD, vérifiez que la version correspondante a été publiée dans l'environnement cible.

3.2 Créer un Task Filter

Accédez à Task Designer → Data & Permission → Filters, créez un Filter et enregistrez son TQL. Ce guide utilise :

taskType = "PURCHASE" ORDER BY createdAt DESC

Après avoir saisi taskType =, sélectionnez Purchase Request dans la liste des suggestions de la version courante. TQL utilise la clé stable du Task Type, PURCHASE ; ne remplacez pas la clé par son nom d'affichage.

Le Task Filter définit le périmètre de base de TaskList. Les utilisateurs ne peuvent pas supprimer ce TQL à l'exécution, et un Filter n'élargit jamais les autorisations d'accès aux tâches. Pour la syntaxe et les limites d'autorisation, consultez Filters et TQL.

3.3 Créer un Query Form

Le Query Form est facultatif et n'est pas requis pour afficher la zone de recherche. Lorsque Show Filter Bar est activé, TaskList fournit des critères par défaut même si aucun Query Form n'est sélectionné :

• Critères rapides de la première ligne : Title, Status, Task Type et Created At.
• Critères avancés après un clic sur More : Current Step, SLA Status, Assignee et Updated At.

Search reste le bouton principal à droite de la zone de recherche. More et Reset sont des boutons icône placés immédiatement après, puis les paramètres de colonnes terminent le groupe d'actions. Lorsqu'un Query Form est configuré, TaskList conserve les critères par défaut et ajoute les champs personnalisés du Query Form dans la zone More ; le Query Form ne remplace pas les critères par défaut. Si Show Filter Bar est désactivé, ni les critères par défaut ni le Query Form ne sont affichés.

Pour ajouter des champs de recherche métier personnalisés, créez un Task Form dédié contenant uniquement les champs réellement nécessaires aux utilisateurs. Évitez de copier directement un formulaire métier qui comporte de nombreux champs de détail en lecture seule ou des pièces jointes.

Ce guide utilise purchaseQueryForm :

Champ	Type de champ	Contrôle de recherche à l'exécution
Assignee	User	Sélecteur d'utilisateur
Finance Review Result	Select	Liste Approved / Rejected
Department Review Result	Select	Liste Approved / Rejected
Required Date	Date	Sélecteur de plage de dates

Un Query Form n'a pas besoin d'être associé à un Task Type précis pour être utilisé dans une recherche. Les définitions de champs proviennent toujours de l'application et de la version courantes ; assurez-vous donc que les champs référencés par le formulaire n'ont pas été supprimés.

4. Ajouter et configurer TaskList

1. Ouvrez la page cible dans Page Designer.
2. Développez le groupe Task dans la palette des composants.
3. Faites glisser TaskList dans un conteneur compatible.
4. Sélectionnez TaskList et effectuez sa configuration de base dans le panneau des propriétés.

Les principales propriétés de TaskList sont les suivantes :

Propriété	Obligatoire	Description
Task Filter	Oui	Sélectionne un Filter enregistré dans Task Designer ; à l'exécution, son TQL est chargé par Filter Key
Query Form	Non	Ajoute les champs du Task Form à la zone More en complément des critères par défaut
Columns	Non	Configure dans l'ordre les champs système et personnalisés ; les colonnes par défaut de la liste de tâches sont utilisées si la propriété est vide
Show Filter Bar	Non	Contrôle l'affichage de toute la zone de recherche
Show Column Settings	Non	Contrôle l'accès aux paramètres de colonnes en haut à droite ; il apparaît uniquement lorsque la barre de filtres est affichée
Page Size	Non	Nombre de lignes par page ; la valeur par défaut est 20 et la plage autorisée va de 1 à 200

Ce guide utilise :

Task Filter: All Purchase Request Tasks
Query Form: purchaseQueryForm
Show Filter Bar: On
Show Column Settings: On
Page Size: 20

Lorsque Show Filter Bar est désactivé, les critères rapides, More, Search, Reset et l'accès aux paramètres de colonnes sont tous masqués. Seuls le tableau des tâches et la pagination restent visibles. Cette option convient aux pages dont le périmètre de recherche est fixe et ne doit pas être modifié par les utilisateurs.

5. Configurer Columns

5.1 Ajouter et réordonner des colonnes

Développez Columns sous TaskList et cliquez sur Add. Chaque ajout crée un Task Column distinct dans l'arborescence de gauche, au lieu de stocker toutes les colonnes dans un contrôle multisélection.

Pour chaque colonne :

1. Sélectionnez un champ système ou personnalisé dans Task Field.
2. Vérifiez le Column Title renseigné automatiquement et adaptez-le au contexte de la page si nécessaire.
3. Ouvrez Advanced et configurez la largeur, le lien de tâche, le tri, la position fixe et l'ellipse selon vos besoins.
4. Faites glisser le Task Column dans l'arborescence de gauche pour modifier son ordre à l'exécution.

L'en-tête du tableau dans le canevas de conception doit suivre les modifications de Task Field, de Column Title et de l'ordre des colonnes. Column Title fournit déjà le nom affiché de la colonne ; il n'est donc pas nécessaire de maintenir un Display Name supplémentaire.

5.2 Champs disponibles

Les choix de Task Field sont répartis en deux groupes :

• System Fields : Task Key, Title, Task Type, Status, Current Step, Assignee, Creator, Created At, Updated At, SLA, etc.
• Custom Fields : champs de tâche définis dans l'application et la version courantes, par exemple Amount, Category, Required Date et Department Review Result.

L'auteur de la page peut ajouter explicitement un champ personnalisé à TaskList, même s'il ne fait pas partie des colonnes visibles par défaut dans le Worklist autonome.

5.3 Propriétés avancées des colonnes

Propriété	Description
Width	Largeur de la colonne en pixels
Task Link	Ouvre la tâche lorsque l'utilisateur clique sur la valeur de la colonne
Enable Sorting	Permet de trier selon la colonne ; s'applique uniquement aux champs pris en charge par le tri backend
Fixed Column	Fixe la colonne à gauche ou à droite du tableau
Show Ellipsis	Affiche une ellipse lorsque le contenu dépasse la largeur de la colonne

Lorsqu'elle est affichée, la colonne d'état SLA reste toujours la première. Nous recommandons de placer Task Key et Title juste après et d'activer Task Link pour les deux. D'autres champs métier peuvent également servir de liens de tâche. Si Task Link est explicitement désactivé pour une colonne, celle-ci est affichée comme du texte ordinaire.

Les paramètres de colonnes à l'exécution peuvent masquer temporairement des colonnes configurées ou modifier leur ordre. Ils ne modifient pas la structure ni l'ordre des colonnes dans Page Designer.

6. Zone de recherche à l'exécution

6.1 Critères de recherche rapide

Lorsque Show Filter Bar est activé, TaskList affiche par défaut les critères rapides suivants en haut :

• Title
• Status
• Task Type
• Created At

Ces contrôles indiquent leur rôle par un placeholder et ne répètent pas de label visible. Search, More, Reset et les paramètres de colonnes sont disposés dans cet ordre à droite. More et Reset utilisent des boutons icône avec une infobulle. Les critères et le groupe d'actions sont centrés verticalement sur une même ligne.

Un clic sur More affiche :

• Current Step
• SLA Status
• Assignee
• Updated At
• Les champs configurés dans le Query Form

Les critères avancés intégrés utilisent eux aussi des placeholders sans labels répétés. Les champs du Query Form conservent leurs titres et leur mise en page afin que les critères métier personnalisés restent identifiables.

6.2 Search et Reset

• Search : lit les critères rapides et les valeurs du Query Form, puis relance la recherche depuis la première page.
• Icône More : développe ou réduit les critères avancés et le Query Form.
• Icône Reset : efface les critères à l'exécution et les valeurs du Query Form, puis relance la recherche.
• Enter : appuyer sur Entrée dans le champ Title lance directement la recherche.

Les valeurs vides ne participent pas à la recherche. Le Task Filter, les critères rapides et les critères du Query Form sont combinés avec AND. Le tenant, l'application, l'environnement et les autorisations de consultation des tâches sont toujours imposés par le backend.

Par exemple, le Filter de base de ce guide limite déjà les tâches à taskType = "PURCHASE". Après avoir sélectionné un Assignee et une Required Date, les résultats doivent satisfaire toutes les conditions suivantes :

Périmètre de base des Purchase Requests
AND Assignee courant
AND plage Required Date
AND autorisations de consultation des tâches de l'utilisateur courant

7. Règles de recherche des champs du Query Form

Le contrôle de recherche dépend du type réel du champ et n'est pas déduit de son nom.

Type de champ	Comportement de recherche
Text, Textarea, Rich Text, Markdown	Correspondance par inclusion
Select, Radio, Switch	Correspondance exacte
Champs multisélection	Correspondance de collection avec IN
Number	Correspondance exacte
User, Assignee	Le sélecteur envoie l'ID utilisateur tout en continuant d'afficher le nom de l'utilisateur
Department	Sélecteur d'arborescence des départements
Date, DateTime	Recherche par plage, avec les limites de début et de fin incluses
Attachment	Non affiché en mode recherche

Les champs masqués sont exclus du Query Form. Le paramètre Required d'un champ du formulaire métier n'est pas imposé en mode recherche ; les critères sans valeur sont ignorés.

7.1 Assignee

Assignee recherche dans l'annuaire des utilisateurs disponible pour l'application courante. Après la sélection d'un utilisateur, la requête utilise son ID stable, tandis que le contrôle continue d'afficher son nom ou son compte. Il ne doit pas se transformer en ID numérique après un clic sur Search.

7.2 Select

Un Select doit afficher les Options configurées pour le champ. Dans ce guide, Department Review Result et Finance Review Result affichent tous deux :

Approved
Rejected

Le mot Department dans le nom d'un champ ne transforme pas un Select en sélecteur de département. Seul un champ dont le type réel est Department affiche l'arborescence des départements.

7.3 Date et DateTime

Les champs Date et DateTime d'un Query Form utilisent des sélecteurs de plage :

• Valeur de début uniquement : requête field >= start
• Valeur de fin uniquement : requête field <= end
• Deux valeurs : requête field >= start AND field <= end

Les deux limites sont inclusives. Les champs Date utilisent la valeur de date ; les champs DateTime permettent de sélectionner une heure précise.

8. Ouvrir les tâches et interactions de page

Lorsque Task Link est activé pour une colonne, un clic sur sa valeur ouvre la tâche.

• Aucun onTaskClick configuré : ouvre la page de détail standard de la tâche Spark dans un nouvel onglet et conserve la page métier courante ouverte.
• onTaskClick configuré : exécute l'interaction définie dans Page Designer sur la page courante et fournit les contextes task et record ; la page de détail standard ne s'ouvre pas automatiquement.
• Clic avec une touche de modification du navigateur, par exemple Ctrl ou Command : conserve le comportement de lien par défaut du navigateur.

Pour actualiser TaskList depuis un autre bouton de la page, appelez cette Component API sur le composant :

reloadTable

9. Liste de validation de l'exemple

Vérifiez les points suivants dans la page d'exécution DEV utilisée par ce guide :

1. La liste renvoie uniquement les Purchase Requests comprises dans le périmètre du Filter.
2. Les en-têtes apparaissent dans l'ordre Task Key, Title, Task Type, Current Step et Created At.
3. Task Key et Title sont tous deux des liens qui ouvrent la tâche correspondante dans un nouvel onglet.
4. Le développement de More affiche les quatre champs de purchaseQueryForm.
5. Après avoir sélectionné un Assignee et cliqué sur Search, le contrôle affiche toujours le nom de l'utilisateur.
6. Department Review Result affiche Approved / Rejected et non une arborescence de départements.
7. Une plage Required Date qui exclut la date d'une tâche retire cette tâche des résultats.
8. Reset restaure les résultats de base définis par le Task Filter.
9. Les paramètres de colonnes permettent de masquer temporairement des colonnes et d'activer ou désactiver les champs triables.
10. La zone de pagination et son séparateur suivent directement la dernière ligne du tableau, sans grand espace vide.

Étapes suivantes

• Filters et TQL
• Task Forms
• Autorisations des tâches