Les widgets

Tout ce qui se voit sur un écran est un widget. La palette Widgets, à gauche du canvas, apporte 32 widgets d'origine — de cette page vous ressortez en sachant à quoi sert chacun, avec les principaux expliqués en détail. Si l'app a des widgets programmés par vous, ils apparaissent dans la même palette, dans la section Personnalisé.

#Le catalogue, par catégorie

#Champs de formulaire

Tous se lient à un champ d'un datastore d'enregistrement (section Liaison de données) et entrent dans la validation — voir les formulaires.

Widget	À quoi il sert
Champ de texte	Texte d'une ligne. Il a un Masque, un mode Mot de passe (masquer le texte) et un placeholder.
Zone de texte	Texte long, multiligne — notes, descriptions.
Nombre	Valeurs numériques.
Oui/Non	Un interrupteur booléen.
Liste	Choix d'options : Liste fixe, Enum du modèle ou Datastore ; avec Avec recherche, Sélection multiple et mode Arborescence (hiérarchique).
Date	Date, Date et heure ou seulement Heure (le champ Type décide).
Couleur	Choix d'une couleur.
Fichier	Envoi par glisser-déposer et/ou bouton, avec aperçu, limite de taille et choix du stockage. La limite ne dépasse jamais le Fichier maximum (Mo) des paramètres de la plateforme, jusqu'à 100 Mo. Avec Dans le champ lui-même (base64), le fichier part dans la requête et la limite est d'environ 3 Mo. Chaque compte envoie jusqu'à 300 fichiers et 3 Go par heure (et chaque adresse jusqu'à 20 Go) ; au-delà, le widget indique que trop de fichiers ont été envoyés et demande de réessayer plus tard.

Tout champ ayant une valeur affiche à droite un × discret qui l'efface — dans une Liste utilisée comme filtre, c'est ainsi que l'on revient à « tous » sans rien choisir. La Liste simple ouvre ses options sous le champ ; avec Recherche, elle ouvre une zone de recherche et la liste se raccourcit en tapant ; avec Sélection multiple, chaque option s'active et se désactive avec une coche.

La Liste affiche 10 options à la fois. La propriété Options visibles, dans Comportement, change ce nombre (0 les affiche toutes). Quand il y a plus d'options que ce nombre, la liste propose une zone de recherche, même sans Avec recherche, et un pied de liste avec le total, par exemple « 10 sur 245 · saisissez pour rechercher ». La recherche porte sur toutes les options et ignore les accents et les majuscules. En Sélection multiple, les options déjà choisies apparaissent en premier dans la liste, et le champ affiche les deux premières suivies de « +N ».

Dans le pied de liste, la loupe (Tout voir) ouvre une fenêtre avec toutes les options dans un tableau, avec recherche et 50 lignes par page. Avec la Source des options sur Datastore, les Colonnes de la fenêtre de choix ajoutent des champs à côté de l'étiquette (par exemple, le numéro fiscal, pour distinguer deux clients de même nom), et la fenêtre propose une barre de filtres sur ces champs. En choix simple, cliquer sur une ligne choisit l'option. En Sélection multiple, chaque ligne a une case, Tout cocher coche les résultats de toutes les pages, et seul Appliquer enregistre le choix ; Annuler ne change rien. La fenêtre garde toujours la même taille, avec peu ou beaucoup de résultats.

Dans KeplinGo, la Liste ouvre une feuille avec la même règle : 10 options, la recherche et le pied de liste avec le total. Tout voir affiche toutes les options dans la même feuille, avec les champs des Colonnes de la fenêtre de choix sous chaque étiquette, et la Sélection multiple n'enregistre qu'avec Appliquer.

Avec le Chargement du datastore de la Liste sur Une page à la fois, seule la première page arrive à l'écran. La recherche interroge alors le serveur, le total du pied de liste est celui du serveur, la fenêtre de choix demande chaque page au serveur, et le champ récupère le nom d'une valeur enregistrée que la première page n'a pas apportée. Dans ce mode, la recherche porte sur l'étiquette (qui doit être un champ texte), les majuscules et les accents comptent comme la base de données les compte, et Tout cocher n'apparaît pas, car il obligerait à charger tous les enregistrements.

#Actions et navigation

Widget	À quoi il sert
Bouton	L'action classique. Afficher : Icône + Texte, Icône seule ou Texte seul ; l'Action au clic navigue, ouvre un modal ou exécute du code.
Bouton avec menu	Un bouton qui ouvre d'autres options. Apparence : Divisé (le corps agit, la flèche ouvre le menu), Menu ou Hamburger. Chaque option peut se masquer ou se désactiver selon des conditions.
Lien	Texte cliquable — Destination : Écran de l'app (avec paramètres) ou URL externe (avec Ouvrir dans un nouvel onglet).
Fil d'Ariane	Le chemin « vous êtes ici », avec des niveaux cliquables et le dernier niveau fixe ou lié à un champ.
Exporter	Un bouton qui télécharge les données d'un datastore en feuille de calcul (.xlsx) — champs choisis, Ligne d'en-tête facultative et Nom du fichier avec {date}.

Exporter lit les données au moment du clic, par blocs, jusqu'à 50 000 lignes ; au-delà, le fichier sort avec les 50 000 premières et un avertissement apparaît. L'événement onExport indique si le fichier a été coupé (truncated).

Dans KeplinGo le fichier sort en CSV ; un texte qu'Excel lirait comme une formule (commençant par = ou @, par exemple) reçoit une apostrophe devant.

#Structure

Widget	À quoi il sert
Panneau	Un conteneur avec cadre et titre — il range des widgets qui se déplacent désormais ensemble.
Onglets	Un conteneur avec des onglets ; chaque widget enfant appartient à un onglet. Style des onglets : Encadré, Pills ou Souligné.
Barre fixe	Une barre sur toute la largeur, épinglée en Haut ou en Pied de page de l'écran — pour des barres d'actions toujours visibles.
Ligne	Une ligne de séparation, Horizontale ou Verticale — la couleur et le trait viennent de l'Apparence.

#Contenu et médias

Widget	À quoi il sert
Libellé	Texte simple — titres, légendes, valeurs isolées. Il accepte les Valeurs de la phrase ({n} dans le texte).
Markdown	Texte riche écrit en Markdown — fixe ou venant d'un champ.
Image	Une image par URL fixe, Asset de l'app ou Champ (dynamique) ; Ajustement : Contenir, Couvrir ou Étirer.
Page externe	Intègre une page extérieure (une carte, une vidéo, de la BI tierce) ou du HTML écrit par vous. Elle s'exécute isolée : elle ne voit ni la session ni les données de l'app.

#Données

Widget	À quoi il sert
Table	La grille d'enregistrements — colonnes typées, tri, sélection et boutons d'action. Détail plus bas.
Liste	Des enregistrements en liste verticale, avec des champs dans des rôles (Titre, Sous-titre, Corps, Légende) et une image facultative.
Cartes	Le même template que la Liste, mais en grille de cartes avec N Colonnes.
Graphique	Des séries dessinées — barres, lignes, camemberts et plus. Détail plus bas.
KPI	Une bande d'indicateurs numériques avec tendances, cible et sparkline. Détail plus bas.
Barre de filtres	Des conditions en puces (champ, opérateur, valeur) qui filtrent une Table, une Liste, des Cartes, un Kanban ou un Graphique de l'écran. Détail ci-dessous.

#Tableaux et planification

Widget	À quoi il sert
Kanban	Des cartes déplaçables entre des colonnes d'état. Détail plus bas.
Calendrier	Des événements en vues Jour/Semaine/Mois/Année. Détail plus bas.
Gantt	Des barres de début→fin avec progression, groupes et dépendances. Détail plus bas.

#Documents et processus

Widget	À quoi il sert
Rapport	Affiche un rapport de l'app (PDF) à l'intérieur de l'écran, avec des paramètres liés à ce qui est à l'écran et une Barre d'actions pour actualiser et télécharger.
État du processus	L'historique et l'étape actuelle des workflows d'un enregistrement, avec des boutons de décision quand la tâche ouverte est celle de la personne qui regarde.
Mes tâches	La boîte de réception des tâches de workflow de l'utilisateur connecté — elle ouvre l'écran de la tâche et décide de là.

#La Table

La Table est le widget le plus utilisé de la plateforme : elle se lie à un datastore de liste et affiche les enregistrements en grille, avec pagination, tri et sélection.

Le pied avec le total et les flèches de page n'apparaît que lorsque les enregistrements ne tiennent pas sur une page. Il en va de même pour les widgets Liste et Cartes.

Les dates venues de l'API s'affichent dans la langue de l'app, et une colonne ne contenant que le jour n'affiche que le jour.

#Colonnes

Quand vous liez le datastore, les colonnes naissent une par champ. Ensuite vous affinez : dans Colonnes, utilisez + colonne pour en ajouter, et cliquez sur une colonne dans le canvas pour la modifier — l'inspecteur bascule sur elle.

Chaque colonne a un En-tête, une Largeur, Triable par l'en-tête, Masquée — et un Type :

Type	Ce qu'il fait
Texte	La valeur telle quelle, avec un Masque facultatif (# = caractère).
Nombre	Formate la valeur : Nombre (régional) (avec Décimales, Séparateur de milliers, Compact — 1,2 M au lieu de 1 234 567 —, Préfixe et Suffixe) ou Masque (# = chiffre).
Lien	La cellule devient cliquable. Destination : Écran de l'app (avec des paramètres venant de Champ de la ligne, Paramètre de l'URL ou Valeur fixe) ou Script — votre code exécuté au clic. C'est la bonne colonne pour ouvrir la fiche d'un enregistrement depuis la liste : la colonne qui identifie la ligne (nom, description, date) mène à l'écran de la fiche avec l'id de la ligne ; un écran en mode modal ou panneau latéral s'ouvre par-dessus et, à sa fermeture, la liste se recharge.
Image	Affiche l'image dont l'adresse/le contenu est dans le champ.
Fichier	Un lien de téléchargement vers le fichier référencé dans le champ.
Graphique spark	Un petit graphique par ligne, en Lignes ou Barres, sans axes ni étiquettes. La série vient d'un Champ avec une liste (une liste de nombres en JSON ou de l'API, ou un texte comme 3,5,4) ou de Plusieurs champs de la ligne, un point par champ. Vous pouvez choisir la Couleur, Afficher la dernière valeur à côté, et une Échelle fixe (minimum et maximum) pour comparer les lignes entre elles. Cette colonne ne se trie pas depuis l'en-tête.

Une colonne d'un champ de relation (client.nom) ne se trie pas par son en-tête : le tri s'exécute sur le serveur, qui ne connaît que les champs de la table elle-même.

#Actions de la table

Dans la catégorie Comportement, la section des actions crée les boutons CRUD : Actualiser, Ajouter un enregistrement, Modifier l'enregistrement, Supprimer l'enregistrement et Supprimer plusieurs enregistrements. Chaque action activée crée un bouton libre sur le canvas, lié à la table — vous positionnez et stylisez ce bouton comme n'importe quel autre.

• Ajouter un enregistrement et Modifier l'enregistrement ouvrent un écran ou un modal de votre choix (typiquement le formulaire de l'enregistrement), avec les paramètres remplis à partir de la ligne.
• Modifier l'enregistrement et Supprimer l'enregistrement ne sont actifs qu'avec une ligne sélectionnée ; Supprimer plusieurs enregistrements travaille sur la Sélection multiple (l'interrupteur qui ajoute la colonne de cases à cocher).
• Les actions qui écrivent exigent que le datastore ait une clé primaire — l'inspecteur avertit : Le datastore a besoin d'une clé primaire.

#Formulaires (inputs + enregistrement + validation)

Il n'y a pas de widget « formulaire » : un formulaire est la somme de trois pièces, et c'est cette liberté qui vous laisse dessiner la fiche comme vous voulez.

1. Créez un datastore d'enregistrement dans l'écran (voir Datastores et données) — par exemple, conta, chargé par la clé venant du paramètre id de la route.
2. Faites glisser les champs de formulaire (Champ de texte, Liste, Date…) et, dans chacun, reliez la Liaison de données au bon champ du datastore.
3. Posez un Bouton « Enregistrer » dont l'événement enregistre le datastore — l'action prédéfinie Enregistrer le datastore de l'éditeur d'événements écrit le code à votre place (voir Événements et le SDK).

La validation vit dans chaque champ, dans la catégorie Validation :

• Obligatoire — le champ doit être rempli.
• Les règles standard : Min. caractères, Max. caractères, Est un e-mail, Est un téléphone, Est un nombre, Valeur min., Valeur max., Motif (regex) et Égal au champ (confirmation de mot de passe, par exemple).
• Validation avec script — pour votre logique à vous : le code reçoit value (la valeur actuelle du champ) et renvoie true si elle est valide, ou le message d'erreur. Un numéro fiscal, un IBAN, une règle métier.

À l'enregistrement, toute la validation s'exécute : les obligatoires d'abord, puis les règles, puis le script. L'enregistrement ne passe que si tout est bon.

Un champ en erreur prend une bordure rouge, et le message apparaît en dessous, dans l'espace entre les widgets. Le champ et son libellé ne bougent pas. Pour que le message s'affiche en entier, laissez au moins 16 pixels entre un champ et le widget du dessous, et entre un champ et le bas du panneau ou de l'onglet qui le contient.

#Le Graphique

Le Graphique se lie à un datastore et dessine des séries. Dans Type de graphique, vous choisissez : Barres, Ligne, Aire, Camembert / Donut, Dispersion, Radar, Jauge, Entonnoir ou Carte de chaleur.

L'essentiel est la correspondance, dans la catégorie Données :

• Champ de catégorie (axe X / parts) — ce qui sépare les barres/parts.
• Champs de valeur — un ou plusieurs champs numériques ; chacun est une série.
• Champ de série (regroupement) — en alternative aux valeurs multiples : il pivote sur le premier champ de valeur et crée une série par valeur distincte (sans valeurs, il compte les enregistrements).

Et ensuite la finition :

Option	Ce qu'elle fait
Empilé, Horizontal, Lignes lissées, Valeurs sur les points	Des variations du dessin, selon le type.
Légende, Position de la légende, Tooltip	Le chrome du graphique. La légende se fait aussi glisser directement sur le graphique pour la positionner.
Format des valeurs	Le même format que les colonnes Nombre de la table, appliqué aux axes, aux libellés et au tooltip.
Échelle des valeurs	Linéaire ou Logarithmique — la logarithmique sert quand les séries ont des ordres de grandeur différents.
Utiliser un second axe	Un axe à droite avec sa propre échelle — pour réunir un total en euros et un comptage sur le même graphique.
Séries	Le type par série (combinaisons de barres et de lignes) et quelles séries passent sur le 2e axe.
Options avancées	Un éditeur de code avec toutes les propriétés du moteur de graphiques, avec autocomplétion — appliquées par-dessus la configuration, pour les cas que les champs ne couvrent pas.

#Le KPI

Le KPI est une bande d'indicateurs — quatre nombres côte à côte se font avec un widget à quatre indicateurs, pas avec quatre widgets : l'alignement et l'espacement sont garantis.

Chaque indicateur (dans Indicateurs ▸ Ajouter un indicateur) a :

• Un Libellé et une icône, avec la Position de la légende (Au-dessus de la valeur / Sous la valeur).
• Valeur (champ) + Agrégation (Somme, Moyenne, Comptage, Maximum, Minimum, Premier, Dernier) sur le jeu de données — ou une Valeur manuelle quand il n'y a pas de données liées.
• Des Tendances (Ajouter une tendance) — des comparaisons sous le nombre, avec Champ de référence, format Pourcentage ou Valeur absolue, et Moins c'est mieux (inverse les couleurs) : sur une dette qui augmente, la flèche doit être rouge.
• Une Cible — Aucune cible, Valeur manuelle ou Champ du datasource, avec Barre de progression facultative.
• Afficher la sparkline — la mini-ligne de l'historique, avec Champ de la série.
• Période (du champ) — de quelle clôture parle le nombre (une date ISO s'affiche comme MM/AAAA).

Le jeu de données est partagé par le widget, mais chaque indicateur peut avoir un Jeu de données dédié.

#Le Kanban

Le Kanban affiche les enregistrements sous forme de cartes en colonnes — le pipeline d'opportunités de Gestion des Clients est un kanban par état.

1. Reliez le datastore et choisissez le Champ d'état (colonne) — le champ qui dit dans quelle colonne se trouve chaque carte.
2. Définissez la Source des colonnes : Statique (vous ajoutez chaque colonne avec Libellé, Valeur et couleur) ou Enum (les colonnes viennent des valeurs d'un enum du modèle).
3. Composez le Template de la carte — les champs et les rôles, comme dans la Liste.

Avec Autoriser le glisser-déposer des cartes activé, déplacer une carte enregistre aussitôt le nouvel état dans l'enregistrement. Le Champ d'ordre (un champ numérique) rend le tri persistant à l'intérieur de la colonne. La Colonne pour les non catégorisés attrape les enregistrements dont l'état ne correspond à aucune colonne ; le Nombre de cartes affiche le total dans l'en-tête.

Les actions : Clic sur une carte (modifier) et Créer une carte (bouton dans la colonne) — chacune peut naviguer vers un écran, ouvrir un modal (avec les paramètres de la ligne et de la colonne) ou émettre un événement pour votre code.

#Le Calendrier

Le Calendrier affiche les enregistrements avec une date comme des événements, dans les vues Jour, Semaine, Mois et Année.

• Champs : Champ de date (début), Champ de fin (facultatif) (événements sur plusieurs jours), Champ de titre.
• Couleur des événements : Unique ou Par champ — avec une carte valeur → couleur (un enum de type, par exemple).
• Vue : Vue initiale, Vues disponibles, 1er jour de la semaine (Lundi/Dimanche), Max. événements par jour dans la vue mois, heures de Début/Fin dans les vues jour/semaine, Barre de navigation et Boutons de changement de vue.
• Actions : Clic sur un événement (modifier) et Sélection de jour/intervalle (créer) — le début/la fin partent vers l'écran de destination comme paramètres, prêts à préremplir le formulaire de création.

Le calendrier ne charge que les enregistrements de l'intervalle visible — changer de mois va chercher le nouveau mois, pas la table entière.

#Le Gantt

Le Gantt dessine des barres de début→fin sur une ligne de temps — planification de projets, campagnes, onboarding de clients.

• Champs : Champ de début, Champ de fin, Champ du libellé, Champ de progression (0–100) et Champ de groupe (regroupe les lignes).
• Champ de dépendances — les ID (clé primaire) des prédécesseurs, en liste JSON ou séparés par des virgules ; le Gantt dessine les flèches.
• Zoom initial (Jour, Semaine, Mois), Ligne d'aujourd'hui et Ombrer les week-ends.
• Actions : Clic sur une barre (modifier) et Clic sur une zone vide (créer) — la date cliquée part comme paramètre.

Le Gantt est en lecture : les barres ne se glissent pas — les dates se changent dans le formulaire de l'enregistrement.

#La Barre de filtres

La Barre de filtres permet à ceux qui utilisent l'app de filtrer une liste par n'importe quel champ, sans que vous dessiniez un champ de filtre par colonne. Elle se place au-dessus d'une Table, d'une Liste, de Cartes, d'un Kanban ou d'un Graphique et écrit les conditions en puces.

1. Glissez la Barre de filtres sur l'écran et, dans Données, choisissez le Widget cible — le widget de liste dont le datastore reçoit les conditions.
2. Dans Champs filtrables, choisissez les champs à proposer. Sans choix, la barre propose tous les champs simples du datastore de la cible ; les en-têtes des colonnes de la table servent d'étiquettes. Les champs de relation (client.nom) ne sont pas proposés : le filtre s'exécute sur le serveur, qui ne connaît que les champs de la table elle-même.
3. Facultatif : dans Valeurs visibles, choisissez combien de valeurs suggérées la liste affiche à la fois (10 par défaut ; 0 les affiche toutes). La recherche porte toujours sur toutes les valeurs, et un pied de liste indique leur nombre. À l'étape de la valeur, la loupe du pied de liste ouvre la fenêtre de choix avec toutes les valeurs du champ.

Dans l'app, chaque condition s'écrit en trois étapes, toujours visibles : le champ, l'opérateur et la valeur. Les options de l'étape suivante apparaissent d'elles-mêmes ; taper les filtre. Les valeurs suggérées viennent des données chargées, mais ce que l'on tape compte toujours, même absent de la liste.

Les opérateurs dépendent du type du champ : texte (contient, égal à, commence par…), nombre et date (comparaisons), et listes (égal à, différent de). Parmi et aucun de acceptent plusieurs valeurs dans la même puce : chaque choix s'ajoute, et Entrée ou Appliquer ferme la condition. Le × d'une puce retire cette condition ; le × de la barre efface tout.

Quand une condition se ferme, la liste ne se rouvre pas d'elle-même : la barre reste prête pour la saisie. Pour un autre filtre, tapez, cliquez sur la barre ou appuyez sur ↓.

Les conditions s'ajoutent à celles du datastore de la cible (Filtres (where)) et la requête part au serveur avec pagination — filtrer ne rapporte jamais la table entière. Les filtres par widget (une Liste liée à une condition du datastore) existent toujours et peuvent cohabiter sur le même écran : la liste déroulante rapide pour le filtre le plus utilisé, la barre pour tout le reste.

Dans les champs de date, la valeur s'écrit comme elle se lit : « 26/09/2026 », « 26-09-2026 », « 26.09.2026 » ou « 2026-09-26 », avec ou sans heure. Quand le jour et le mois peuvent se confondre, le jour vient en premier. Une date sans heure vaut pour la journée entière : inférieur ou égal à 26/09/2026 inclut les enregistrements de ce jour, et supérieur à 26/09/2026 commence le lendemain. Différent de et aucun de incluent les enregistrements dont le champ est vide.

#Pourquoi ne… ?

• Pourquoi la section Validation n'apparaît-elle pas dans mon widget ? Seuls les champs de formulaire valident — un Bouton ou un Libellé n'ont pas de valeur à valider.
• Pourquoi le widget apparaît-il dans la palette mais en gris dans le canvas ? Il est désactivé (interrupteur Actif dans la catégorie Layout) ou une règle/un événement l'a désactivé.
• Pourquoi je ne vois pas de données dans le canvas ? Le canvas affiche des échantillons — les vraies données apparaissent dans la prévisualisation et dans l'app publiée. Vérifiez la liaison au chapitre Datastores et données.
• Pourquoi la Barre de filtres affiche « Aucun widget cible » ? Le Widget cible manque dans Données — seuls les widgets avec un datastore de liste (Table, Liste, Cartes, Kanban, Graphique) peuvent être cibles.