Aller au contenu
SurfaceDocs
ENCommencer
DocsComposer les interfaces

Tableaux et colonnes

Configurer une vue de données avec colonnes, filtres et Query.

Définir la source avant les colonnes

Une vue tableau présente une collection de données. Déclarez d’abord sa Query et ses paramètres, puis choisissez les colonnes. La vue principale d’un Space Data est un usage naturel du tableau; le même résultat peut aussi être intégré à une fiche ou un accueil lorsque le Model prévoit cet emplacement.

Configuration Options / valeurs attendues Description
Source Binding vers une Query nommée Détermine les lignes recherchées
Colonnes Propriété native, Field ou métrique admise Sélectionne les valeurs affichées
Libellés Texte lisible Nomme les colonnes
Format Variante adaptée au type Texte, nombre, date, indicateur ou lien
Filtres Contrôles de Query déclarés Restreint le résultat
Tri Clés et direction admises Organise la collection
Ouverture Action ou destination de fiche Passe de la ligne au détail

Exemple : les soumissions d’un client

La Query reçoit Atelier Nord et retourne ses soumissions. Le tableau affiche Numéro, État, Montant et Dernière mise à jour. Le filtre État permet de sélectionner À approuver. Ouvrir une ligne affiche la fiche Soumission et conserve le client comme contexte de retour.

Édition, totaux et pagination

Une cellule éditable utilise le Field et l’opération autorisée correspondants. Les valeurs calculées et les totaux proviennent des projections canoniques. Un total ne se calcule pas sur les seules lignes chargées quand il représente toute la collection.

Dans un Space indépendant, modifiez une cellule admissible avec le formulaire et l’Action déclarés par son Model. Seules les fiches propres à ce Space et autorisées peuvent être modifiées ainsi; afficher les fiches d’un autre Space n’accorde aucun droit d’édition. Les valeurs calculées ou liées restent en lecture seule. Enregistrer valide le formulaire puis actualise la Query avec les mêmes critères. Si la fiche ou le contexte de lecture change, votre saisie reste visible sans être appliquée; fermez le formulaire et rechargez le résultat courant avant de modifier à nouveau.

Sélectionnez une plage de la page chargée pour copier ses cellules visibles; les colonnes masquées et les autres pages ne sont pas incluses. Le collage dans des cellules scalaires éditables prépare une seule revue avec le formulaire déclaré de chaque fiche, pour au plus 100 lignes et 1 000 cellules. Confirmez une fois pour enregistrer l’ensemble, ou annulez. Une destination invalide ou en lecture seule bloque tout le collage, sans en enregistrer seulement une partie. Texte vide, effacement d’une valeur facultative, zéro et faux restent des choix distincts. Après l’enregistrement, Surface actualise la même Query avec ses filtres et son tri.

Le composant de tableau conserve la sélection, les filtres et les brouillons pendant que la Query fournit les fiches autorisées. Le tri et les filtres s’appliquent à cette source, y compris aux résultats au-delà de la page courante.

Lorsqu’un tri est prévu pour une colonne, son en-tête propose les choix déclarés par le Model. Le choix porte sur toute la collection autorisée, pas seulement sur les lignes affichées, et conserve les critères secondaires du tri. « Ordre par défaut » rétablit l’ordre de la Query. Si le tri courant concerne une autre colonne, le sélecteur l’indique sans le remplacer. Une colonne sans choix admissible, notamment une métrique calculée, ne présente pas de commande de tri.

Les filtres de la barre d’outils et des en-têtes utilisent les mêmes paramètres de Query. Appliquez vos choix pour actualiser les résultats; réinitialiser rétablit leurs valeurs par défaut. Un changement de langue conserve les saisies non appliquées, le focus et la sélection. Les noms de colonnes et les choix définis par votre Model restent ceux de l’application.

Les filtres suivent les types du Model : entiers et montants exacts restent sans arrondi ni conversion approximative, tandis que les réels utilisent la précision approximative explicitement déclarée.

Afficher les fiches liées

Une colonne de fiches liées affiche les titres autorisés des éléments associés à chaque ligne, selon la Query et la limite déclarées par votre Model. Cliquez sur un titre pour ouvrir la fiche exacte; Surface prépare d’abord votre saisie en cours. Les titres restent du contenu en lecture seule, pas des Fields à modifier dans la cellule. Cette colonne ne propose pas de tri ou de regroupement local.

Le nombre d’éléments supplémentaires porte sur le résultat complet autorisé, pas sur les seuls titres affichés. « Aucun élément lié » décrit une liste complète vide; un chargement ou une indisponibilité ne signifie pas zéro. Un export doit prendre en charge cette source explicitement : Surface refuse une combinaison non admise plutôt que de supprimer la colonne du fichier.

Regrouper les fiches

Lorsque le Model prévoit des options de regroupement, utilisez Regrouper par pour choisir une colonne, par exemple l’état des soumissions. Le nombre de fiches de chaque groupe porte sur la Query autorisée complète, avec ses filtres et son contexte, et non sur les seules lignes affichées. Les groupes de fiches sont distincts des groupes d’en-têtes qui réunissent plusieurs colonnes.

Ouvrez un groupe pour consulter ses fiches; un seul groupe est ouvert à la fois. Autres groupes poursuit la liste des groupes, tandis que Autres éléments du groupe poursuit les fiches du groupe sélectionné. Sans regroupement rétablit la présentation ordinaire de la Query. Ces choix ne modifient ni les données ni vos préférences personnelles de colonnes. La référence du layout regroupé décrit les options déclarées.

Votre présentation personnelle

Choisissez les colonnes visibles, leur ordre et leur largeur, la densité et les colonnes épinglées au début du tableau. Conservez au moins une colonne visible; un groupe de colonnes déclaré reste ensemble. Vos choix appartiennent à votre compte et à cet emplacement du tableau dans le Workspace ou le Space indépendant. Ils ne modifient ni la présentation d’un collègue ni les valeurs partagées du Model.

Un Reader de l’application peut personnaliser sa présentation tout en conservant un accès en lecture seule aux fiches. Enregistrer cette présentation n’accorde aucun accès supplémentaire et ne modifie ni la Query ni les données. Rétablir la présentation par défaut retire uniquement vos choix enregistrés pour ce tableau.

Une mise à jour compatible du Model conserve vos choix tout en utilisant les libellés et formats courants des colonnes. Si une colonne est ajoutée, retirée ou change de source, ou si un groupe devient incompatible, Surface vous demande de revoir la présentation plutôt que d’appliquer silencieusement un choix périmé.

Voir la référence du layout pour les propriétés et variantes exactes.

Exporter une collection

Lorsque le Model prévoit un profil d’export pour le tableau, choisissez la Query complète, la page affichée ou les lignes sélectionnées de cette page, puis le profil et un format qu’il propose. L’export conserve les filtres, le tri, le contexte et les colonnes affichées dans leur ordre. La portée complète n’est jamais limitée aux lignes déjà chargées. Le PDF pour impression télécharge un véritable PDF, à ouvrir et imprimer dans votre application habituelle. Dans une fiche, chaque tableau conserve sa propre origine et ses paramètres, même si plusieurs sections utilisent le même binding. Si la fiche ou la Query change avant l’ouverture de l’export, rouvrez-le depuis le tableau voulu.

Les valeurs des Fields liés et les colonnes calculées proviennent des mêmes projections autorisées sur toutes les pages. L’export conserve les décimales exactes et leurs unités déclarées.

Ce parcours s’applique aussi aux tableaux déclarés de l’accueil, d’un Space indépendant ou d’un Work. Le Work conserve le Model qui définit son travail. Les compteurs restent complets; une cellule de relations conserve sa limite d’affichage et indique combien d’autres fiches existent, sans exporter silencieusement leurs titres.

Contrôles du tableau V2 local

Dans le Builder, Data table behavior règle l’édition directe des cellules, l’ajout dans le tableau et l’ouverture d’une fiche en pleine page ou dans un panneau droit. Double-cliquer sur une cellule éditable; utiliser le lien de son titre pour ouvrir la fiche complète. Les Fields Label affichent les valeurs et couleurs définies par le Model.

Le menu Columns propose des poignées de déplacement, également utilisables avec les touches Haut/Bas. Les filtres appliqués restent sur fond gris et la colonne triée indique la direction. Sélectionner des lignes permet de les dupliquer ou de les supprimer. Ces opérations vérifient les versions et enregistrent tout le lot atomiquement. Les copies conservent les Fields et le contenu riche, sans dupliquer les Tags ni les relations.

Le menu de collection propose l’import JSON et l’export JSON/CSV. L’export distingue les lignes visibles, sélectionnées, correspondant à la Query ou toute la collection, ainsi que les colonnes visibles ou tous les Fields. L’import crée de nouveaux enregistrements à partir des clés du Model, avec au plus 100 lignes par requête. L’export complet refuse les collections dépassant 1 000 lignes au lieu de fournir un fichier incomplet.

Les Fields et le contenu riche d’une fiche se sauvegardent automatiquement après une courte pause. La disposition compacte des champs demeure la même pendant l’édition. Les titres des sections et les libellés des relations appartiennent au Model et se règlent dans le Builder; la fiche ne propose pas de configuration des liens.

L’ajout direct utilise la dernière ligne du tableau : cliquez dans une cellule pour saisir sa valeur. Validez une cellule pour créer la fiche dès que tous les champs requis sont valides. Les champs manquants sont signalés et la saisie est conservée sans créer de fiche incomplète. Les valeurs par défaut typées se règlent dans Builder → Data et préremplissent les nouvelles lignes. La ligne ne porte aucun bouton Add et aucun formulaire séparé ne s’ouvre.

Réglez Default sort et Sort direction dans le Builder pour choisir le tri appliqué à l’ouverture du tableau.

La sauvegarde automatique laisse la saisie disponible, regroupe les modifications faites pendant une écriture jusqu’à la pause suivante et termine les sauvegardes avant fermeture. Un état discret remplace le spinner de sauvegarde.

Les champs Choice et Label des fiches Data utilisent un combobox commun avec recherche. Utilisez les flèches et Entrée pour choisir, Échap pour fermer, ou cliquez à l’extérieur du menu. Les couleurs des Labels et les valeurs enregistrées sont conservées.

Hors édition, un champ Date vide affiche un tiret et une date renseignée suit la langue du navigateur. Au focus, le sélecteur natif reste disponible; la valeur conserve son format ISO sans conversion de fuseau horaire.

Dans Columns, la colonne déplacée reste sélectionnée. Glissez sa poignée jusqu’au repère d’insertion, ou utilisez Haut/Bas sur la poignée; le focus suit la même colonne après chaque déplacement.

En pleine page ou dans un panneau latéral, les nouvelles fiches restent des brouillons jusqu’à Add. Le pied de création présente Add et Cancel; le X du panneau annule aussi sans créer de fiche. Les fiches existantes continuent de se sauvegarder automatiquement.

Après Add, les champs manquants ou invalides sont entourés en rouge et un message apparaît en haut du panneau de création. Corriger un champ retire immédiatement son contour rouge. Add et Cancel restent dans le pied du panneau pendant le défilement du contenu.

La dernière ligne affiche seulement + Add record avant le clic; ses autres cellules restent vides. Cliquer + Add record active le brouillon et affiche les valeurs par défaut du Model. Après création, la ligne suivante redevient vide.

Filters, Sort et Group by utilisent le même combobox pour tous leurs choix : mode, champ, condition, valeur de liste/booléenne, ordre de tri et regroupement. Choisissez vos valeurs, puis Apply pour exécuter la requête.

La recherche du combobox apparaît seulement lorsque les choix dépassent une page visible du menu. Les listes courtes, y compris le sélecteur de vue Table, affichent directement leurs choix.

Le chargement d’une Surface affiche un indicateur centré en superposition sur le contenu, sans déplacer les barres ni les panneaux. La sauvegarde en arrière-plan garde le layout stable. L’indicateur d’une opération reste dans le bouton initiateur sans le redimensionner.

Exemples appliqués : Colonnes et formats d’une collection

Déclarez la source de chaque colonne avant son format, son ordre et ses filtres.

Configuration

Fragment à placer dans presentation.tableViews[]. Propriétés et valeurs admises.

{
  "viewKey": "quotes-table",
  "columns": [
    {
      "key": "number",
      "label": "Numéro",
      "source": {
        "kind": "native",
        "property": "title"
      }
    },
    {
      "key": "status",
      "label": "État",
      "source": {
        "kind": "field",
        "fieldPath": "fields/status"
      }
    },
    {
      "key": "amount",
      "label": "Montant",
      "source": {
        "kind": "field",
        "fieldPath": "fields/amount"
      }
    }
  ],
  "openLabel": "Ouvrir la soumission"
}

Variante et raccordement

Fragment à placer dans presentation.tableViews[].layout. Propriétés et valeurs admises.

{
  "contract": "WorkspaceTableLayout@1",
  "grouping": null,
  "columns": [
    {
      "columnKey": "number",
      "visible": true,
      "width": null,
      "frozen": true,
      "format": {
        "kind": "text"
      },
      "headerFilterParameterKey": null
    },
    {
      "columnKey": "status",
      "visible": true,
      "width": null,
      "frozen": false,
      "format": {
        "kind": "badge"
      },
      "headerFilterParameterKey": null
    },
    {
      "columnKey": "amount",
      "visible": true,
      "width": null,
      "frozen": false,
      "format": {
        "kind": "number",
        "maximumFractionDigits": 2
      },
      "headerFilterParameterKey": null
    }
  ],
  "columnGroups": []
}

Exemple de disposition UI

La disposition illustrative ci-dessous situe cette configuration dans l’app Clients/Soumissions. Chaque fragment s’insère à l’emplacement indiqué; ses références aux Fields, Queries et Actions correspondent aux déclarations du Model.

  1. Numéro
  2. État
  3. Montant
  4. Dernière mise à jour
DISPOSITION ILLUSTRATIVEApp Clients / Soumissions
SurfaceClients / Atelier NordExemple
Tableaux et colonnesColonnes et formats d’une collection
Clients
Client : Atelier NordÉtat : Tous ⌄Rechercher…
NuméroÉtatMontantOuvrir
S-1042Brouillon12 500↗
S-1041Approuvée8 200↗
S-1040Envoyée4 750↗
Résultats de la Query du clientPage suivante →
Recherchez un concept, un champ ou une action.Esc