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.

#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}.

#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.

#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.

#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.
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.

#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.

#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.

#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.