# Kanban

## 🔍 Qu'est ce qu'un Kanban ?

Le composant Kanban fonctionne à partir d’un système de cartes. Pour visualiser l'état d'avancement d'une commande ou d'un projet, elles seront réparties dans un tableau Kanban généralement divisé en trois partie : "A faire", "En cours" et "Réalisé". 

## 👇🏼 Les Kanbans dans Ksaar 

1️⃣ Chaque enregistrement créé dans une table se matérialise par une carte

2️⃣ Vous pourrez faire évoluer un enregistrement en le faisant "glisser-déposer" d'une colonne à une autre

3️⃣ L'Utilisateur a la possibilité d'ajouter une carte en cliquant sur un bouton situé sous le titre de chaque colonne (option désactivable). Ce bouton mène vers la création d'un nouvel enregistrement. 

![Aperçu d'un Kanban côté utilisateur final de l'application](https://2063331370-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQBQ-Fk5qKATOA2R2_R%2F-MR_rHLUagdxTM6zHKbi%2F-MR_trZF2KUOnRfKqBGs%2FAperc%CC%A7u%20Kanban%20.png?alt=media\&token=924bb0f5-4e2b-49d0-91d7-f7c0d8c64a20)

## ➕ Créer un Kanban 

Avant toute chose, il est nécessaire d'avoir, dans votre table source, un champ de type [**Single Select**](https://ksaar.gitbook.io/ksaar-documentation/les-elements/les-champs#le-champ-single-select-ou-qcu-question-choix-unique) ou un champ [**liaison simple**](https://ksaar.gitbook.io/ksaar-documentation/les-elements/elements-liaisons#liaison-simple) pour pouvoir paramétrer votre Kanban. En effet, les options du Single Select ou de la liaison simple serviront d'intitulés pour vos colonnes.

Ensuite, rendez-vous dans l'onglet *Données* de la barre d'ajout d'un élément, puis cliquez sur **Ajouter un affichage** et créez votre **Kanban**. 

Vous pouvez ensuite cliquer sur le Kanban placé dans votre page afin d’en modifier les paramètres.

## ⚙️ Paramétrer votre Kanban

#### 🗂️ Données : tables et champs

1️⃣ Choisissez depuis quelle table vous souhaitez récupérer les données et enregistrements.

2️⃣  Définissez depuis quel champ [**Single Select**](https://ksaar.gitbook.io/ksaar-documentation/les-elements/les-champs#le-champ-single-select-ou-qcu-question-choix-unique), ou [**Liaison simple**](https://ksaar.gitbook.io/ksaar-documentation/les-elements/elements-liaisons#liaison-simple), vous souhaitez afficher les colonnes. Vous pouvez renommer les colonnes en cliquant sur le crayon à côté de leur nom.\
Vous pouvez les réordonner par glisser-déposer en cliquant sur le bouton situé à gauche de leur nom.\
Vous pouvez choisir de ne pas afficher une colonne en cliquant sur l’icône en forme d’œil prévue à cet effet.

<figure><img src="https://2063331370-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQBQ-Fk5qKATOA2R2_R%2Fuploads%2FrW8ycsILdqbYSHa2OPXb%2FCapture%20d%E2%80%99e%CC%81cran%202025-12-15%20a%CC%80%2011.52.21.png?alt=media&#x26;token=ef9e4582-da5c-48b7-8a42-5ee5ef08a7f1" alt="" width="299"><figcaption></figcaption></figure>

#### &#x20;👆🏼 Filtres&#x20;

1️⃣ *(facultatif)* Ajoutez des filtres permettant d’afficher uniquement les enregistrements souhaités en fonction :&#x20;

* de la prise par un **champ Utilisateur** (identifiés par le (U) devant leur identifiant unique)
* de la valeur prise par **champ de la Table ou une de ses Liaisons**
* d'un Persona, d'un Utilisateur, de la date de création, de la date de modification, du statut de l'enregistrement

Par exemple : conditionnez votre source de manière à afficher uniquement les Tickets de type Bug.

2️⃣ Choisissez les enregistrements à afficher.

<details>

<summary>Options de récupération des enregistrements : </summary>

👉🏼  **De l'Utilisateur connecté** : signifie que les enregistrements qui s'afficheront dans le Calendrier seront issues des enregistrements remplis par l'Utilisateur connecté uniquement. \
Par exemple, si l'Utilisateur a rempli 1 workflow "Ajouter une activité", alors, lors d'un ajout d'activité, seulement 2 activités apparaîtront sur le calendrier.\
\
👉🏼 **Des Groupes auxquels appartient l'Utilisateur** : signifie que les enregistrements qui s'afficheront dans le Calendrier seront issues des enregistrements remplis par l'Utilisateur ET des enregistrements remplis par les Utilisateurs faisant partie du même Groupe.\
Par exemple : si Marie et Paul font partie du même Groupe et qu'ils ont renseignés 2 activités chacun, alors 4 activités s'afficheront dans le Calendrier. \
\
👉🏼 **de Tout le monde** : signifie que les enregistrements qui s'afficheront dans le Calendrier seront issues des enregistrements remplis par tous les Utilisateurs de l'Application.&#x20;

</details>

#### &#x20;✏️ Paramètres génériques

1️⃣ Choisissez la redirection au clic sur une carte. La redirection peut s'effectuer vers un **Workflow**, une **Fiche**, un **Suivi** ou un **lien externe**.

2️⃣ Indiquez ensuite quel **Titre** doit figurer sur la Carte (vous pouvez sélectionner parmi les Variables). Par exemple : sélectionnez la Variable {Nom de l'activité}.&#x20;

3️⃣ *(facultatif)* Vous pouvez choisir d'afficher des étiquettes sur vos cartes à partir d'un champ [Multi Select](https://ksaar.gitbook.io/ksaar-documentation/les-elements/les-champs#le-champ-multi-select-ou-qcm-question-choix-multiples).

4️⃣ *(facultatif)* Créez une description pour les Cartes aussi à l'aide de Variables pour afficher les données de l'enregistrement. Par exemple : {Créneau de l'activité} {Personne liée à l'activité}...&#x20;

5️⃣ Déterminez la couleur des cartes depuis :&#x20;

* Une valeur personnalisée : en sélectionnant la couleur directement depuis un sélecteur de couleur.
* La valeur d'un champ : en sélectionnant une variable de [champ couleur](https://ksaar.gitbook.io/ksaar-documentation/les-elements/les-champs#le-champ-couleur) à utiliser.

<figure><img src="https://2063331370-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQBQ-Fk5qKATOA2R2_R%2Fuploads%2Fsrmj78GNCMvAY9HPsD6e%2Fimage.png?alt=media&#x26;token=287c355b-fe69-49c6-8bfd-96e2508ed214" alt="" width="296"><figcaption><p>Option disponible dans les paramètres de la source</p></figcaption></figure>

<figure><img src="https://2063331370-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQBQ-Fk5qKATOA2R2_R%2Fuploads%2FxdXjezz0uwyum7ofTcAb%2FEnregistrement%20de%20l%E2%80%99e%CC%81cran%202024-04-03%20a%CC%80%2015.37.12.gif?alt=media&#x26;token=2f60cd6a-19d1-479e-ad63-40fbf1f012cb" alt="" width="488"><figcaption><p>Exemple de paramétrage de la couleur d'un kanban - couleur en fonction du statut</p></figcaption></figure>

6️⃣ Décidez du texte du bouton à afficher pour l'ajout d'une carte. Ce bouton mène vers la création d'un nouvel enregistrement.&#x20;

<figure><img src="https://2063331370-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQBQ-Fk5qKATOA2R2_R%2Fuploads%2Fl2aYdYsqNznLlSjznTE3%2FCapture%20d%E2%80%99e%CC%81cran%202025-12-15%20a%CC%80%2012.11.42.png?alt=media&#x26;token=002fec77-5e2d-466f-876b-812721178983" alt="" width="563"><figcaption><p>Paramétrage côté maker et résultat côté utilisateur final</p></figcaption></figure>

7️⃣ *(facultatif)* Sélectionnez le **champ de type Date** à afficher sur les cartes représentant les enregistrements.\
Vous pouvez ensuite décider que, **lorsque la date est dépassée, la carte change de couleur** pour servir de repère visuel à l’Utilisateur.\
\&#xNAN;*Par exemple : pour une date limite de traitement.*

<figure><img src="https://2063331370-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQBQ-Fk5qKATOA2R2_R%2Fuploads%2FIYVDzyE0LYIMFeEI8g5H%2FCapture%20d%E2%80%99e%CC%81cran%202025-12-15%20a%CC%80%2013.25.24.png?alt=media&#x26;token=ad8bad7e-a9b4-4e0f-9cb5-2b14cf1c9109" alt="" width="563"><figcaption><p>Paramétrage côté maker et affichage correspondant côté utilisateur final</p></figcaption></figure>

#### 🔽 Paramètres spécifiques à l'emplacement

1️⃣ *(facultatif)* Paramétrez un **titre** pour le Kanban qui s’affichera au-dessus de la configuration pour l’Utilisateur.

2️⃣ *(facultatif)* Appliquez des **filtres** pour conditionner l’affichage des cartes.

**3️⃣** *(facultatif)* **Triez** les cartes. Par défaut, le tri appliqué est par ordre décroissant de la date de création.

## 🖱Manipuler un Kanban (USER)

L'utilisateur final peut déplacer les cartes d'un kanban ainsi qu'en ajouter des supplémentaires.

![Point de vue de l'utilisateur final sur un kanban](https://2063331370-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQBQ-Fk5qKATOA2R2_R%2F-MT0zOCW7DhErp44rUV_%2F-MT4qWlY9OAdmYoqId1L%2FG_Manipuler%20un%20kanban.gif?alt=media\&token=ac83e053-9cc6-4517-96e2-857bfcf14847)

Le droit à la création de carte par un utilisateur final est un paramètre activé par défaut mais pouvant être désactivé par le maker si nécessaire.

<figure><img src="https://2063331370-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQBQ-Fk5qKATOA2R2_R%2Fuploads%2F1BlZHKd3TBGtUBHlMVEo%2Fimage.png?alt=media&#x26;token=5821a55b-4ac2-4e72-8d9e-ff814a5ec5cd" alt="" width="297"><figcaption><p>Toggle pour activer ou désactiver l'ajout de carte</p></figcaption></figure>

Si l'ajout de carte est activé, il est possible de lier l'enregistrement en cours du workflow, fiche ou suivi dans lequel le kanban se situe à l'enregistrement créé par clic & drag.

En effet, si la table paramètrée dans le kanban possède un champ liaison vers la table du workflow, fiche ou suivi, alors le paramètre "Lier automatiquement l'enregistrement créé à l'enregistrement en cours" est disponible.

<figure><img src="https://2063331370-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQBQ-Fk5qKATOA2R2_R%2Fuploads%2FfJ63Ig1EBEV15S0McLWZ%2Fimage.png?alt=media&#x26;token=cc716e60-cd96-44e5-bff3-725cb96ac38b" alt="" width="271"><figcaption><p>Cochez la liaison à remplir par l'enregistrement en cours</p></figcaption></figure>

<br>