Skip to main content
View as Markdown

Présentation des pages

Les pages sont rendues côté serveur (SSR) à l'aide d'un arbre de composants déclaratif. Chaque page déclare un name, un path, des métadonnées SEO meta optionnelles et un tableau components de composants imbriqués. Les pages affichent les enregistrements de vos tables, hébergent des formulaires qui y écrivent, intègrent des îlots interactifs et exposent du contenu public — le tout à partir de la configuration, sans React personnalisé requis.

Une page nécessite au minimum un name et un path. Tout le reste — métadonnées, contrôle d'accès, scripts, routes de collection dynamiques, contenu markdown, transitions de vue et toasts par page — est optionnel et superposé.

pages:
  - name: Home
    path: /
    meta:
      title: Welcome
      description: The fastest way to ship internal tools.
    components:
      - type: hero
        content: Build apps from config
      - type: container
        children:
          - { type: text, content: 'Get started in minutes.' }

Propriétés de page

Chaque entrée du tableau pages accepte les propriétés suivantes.

Propriété Description
id Identifiant unique optionnel de la page. Généré automatiquement s'il est omis.
name Nom de page lisible (utilisé dans la navigation et les listes d'administration).
path Route URL. Statique (/about), racine (/), ou dynamique avec un segment :param (/blog/:slug). Voir Routage.
meta Métadonnées SEO et d'en-tête de document : titre, description, Open Graph, cartes Twitter, favicons, données structurées. Voir SEO et métadonnées.
components Tableau de définitions de composants formant l'arbre de rendu de la page. Voir le modèle de composants.
access Contrôle d'accès : 'all' (public), 'authenticated', un tableau de rôles ['admin'], ou { require, redirectTo }. Par défaut 'all'.
collection Configuration de modèle qui génère une route par enregistrement de table (pages dynamiques). Voir Pages de collection.
markdown Rend tout le corps de la page à partir d'un fichier markdown ou d'une chaîne inline, avec options de mise en page et de table des matières. Voir Pages markdown.
source Source de contenu basée sur fichier (source.file) pour un composant content — charge le markdown depuis le disque avec frontmatter. Mutuellement exclusif avec content.
layout Sections de mise en page nommées (p. ex. une sidebar liée à des données) entourant le corps de la page. Voir Mises en page et barres latérales.
scripts Scripts côté client, indicateurs de fonctionnalités, dépendances externes et données de config injectés dans la page. Voir Interactivité et scripts.
vars Variables à portée de page (paires key/value) référençables via $vars.* dans les modèles de composants.
toasts Configuration des notifications toast au niveau de la page (position, durée par défaut).
viewTransition Animation de navigation de page : fade, slide (avec direction), ou none, plus duration.
sitemap Entrée de sitemap par page (priorité, fréquence de modification) ou false pour exclure la page du sitemap.
rss Active un flux RSS pour une page de collection — true pour les valeurs par défaut, ou { limit } pour limiter le nombre d'éléments. 
pages:
  - name: About
    path: /about
    access: all
    meta: { title: 'About Us' }
    viewTransition: { type: fade, duration: 200 }
    components:
      - { type: text, tag: h1, content: 'About' }

Routage

La propriété path déclare l'URL où une page est servie.

Forme de chemin Exemple Description
Racine / La page d'accueil.
Statique /about Une route fixe.
Statique imbriquée /checkout Un nombre quelconque de segments statiques.
Dynamique /blog/:slug Un segment :param capture une valeur disponible pour la page en tant que paramètre de route.
Id d'enregistrement /tasks/$id Les routes de détail dynamiques résolvent l'enregistrement correspondant dans $record.*.

Les routes dynamiques sont le plus souvent associées à un bloc collection afin qu'une seule définition de page génère une route par enregistrement. Voir Pages de collection.

Le modèle de composants

Le tableau components d'une page est un arbre. Chaque composant a un type (parmi ~80 types de composants intégrés) et un ensemble de propriétés. Les composants se composent à travers un système de modules partagé, de sorte que les mêmes propriétés transversales sont disponibles presque partout :

Propriété partagée Disponible sur Description
props Presque tous les composants Ensemble clé-valeur d'attributs de style/config rendus comme attributs HTML (p. ex. className, variant).
content Composants de contenu/mise en page Texte ou markdown inline ; prend en charge la substitution $record.*, $vars.* et key (traduction).
children Composants de type conteneur Définitions de composants enfants imbriqués.
dataSource Composants liés à des données Lie le composant à une table (filtre, tri, pagination, mode unique/recherche). Voir Liaison de données.
visibility La plupart des composants Affichage conditionnel basé sur l'état d'authentification — rendu côté serveur, masqué côté client lorsque les conditions ne sont pas remplies.
responsive La plupart des composants Surcharges par point de rupture pour un comportement responsive.
interactions Composants interactifs Actions de clic, effets de survol et animations d'entrée. Voir Interactivité et scripts.
action Composants formulaire/bouton Comportement à exécuter lors d'une interaction — crud, auth, navigate, automation, avec gestionnaires onSuccess/onError.
i18n Composants de contenu Variantes de contenu localisées par langue.

Les composants sont regroupés en catégories, chacune documentée sur sa propre page :

Catégorie Exemples
Mise en page hero, container, flex, grid, responsiveGrid, card, sidebar, modal, tab-panel
Contenu text, code, toc, accordion, blockquote, alert, custom-html
Données data-table, list, gallery, kanban, calendar, chart, kpi, timeline
Contrôles de formulaire input, textarea, select, checkbox, radio, switch, slider, date-picker, file-upload, number-input
Superpositions dialog, drawer, popover, tooltip, hover-card, alert-dialog, toast, progress, skeleton
Navigation navigation-menu, dropdown-menu, breadcrumb, tabs, pagination, toggle, button-group, menubar
Média image, icon, video, audio, iframe, carousel, aspect-ratio
Affichage static-table, command, empty-state, resizable, scroll-area, speech-bubble, status-indicator
Retour d'information progress, spinner, skeleton
Interactif button, link, alert, badge, button-group
Spécialité wizard, reorderable-list, language-switcher, comments, ai-chat
Social comments, commentCount, ai-chat, sharing
SEO et métadonnées title, description, Open Graph, cartes Twitter, JSON-LD, favicons
Interactivité et scripts scripts, interactions, auto-save, custom-html

Liaison de données

Liez n'importe quel composant de données (ou conteneur) à une table avec dataSource. Les enregistrements liés exposent leurs champs aux descendants via des références $record.<field>.

Propriété dataSource Description
table Nom de la table à lier (validé contre app.tables).
fields Champs spécifiques à récupérer (omettre pour tout récupérer).
filter Tableau de conditions { field, operator, value } combinées par AND. Opérateurs : eq, neq, contains, gt, lt, gte, lte.
sort Tableau de règles { field, direction } appliquées dans l'ordre (primaire, secondaire).
pagination { pageSize, style } — style: numbered rend une navigation par pages ; style: loadMore rend un bouton Charger plus.
mode single résout un seul enregistrement par un param de route ; search filtre sur searchFields avec debounce et maxResults.
id Identifiant pour les références de source de données entre composants. 
- type: data-table
  dataSource:
    table: tasks
    filter:
      - { field: status, operator: neq, value: archived }
    sort:
      - { field: created_at, direction: desc }
    pagination: { pageSize: 25, style: numbered }

Pages de collection

Un bloc collection transforme une seule définition de page en une route par enregistrement de table. Le path de la page doit inclure un segment dynamique :param correspondant à slugField.

Propriété collection Description
table Nom de la table à partir de laquelle générer les pages de collection (doit exister dans app.tables).
slugField Champ dont la valeur devient le paramètre URL (p. ex. slug, id).
filter Conditions { field, operator, value } optionnelles limitant quels enregistrements génèrent des pages. 
pages:
  - name: Blog Post
    path: /blog/:slug
    collection:
      table: posts
      slugField: slug
      filter:
        - { field: published, operator: eq, value: true }
    rss: { limit: 20 }
    components:
      - { type: text, tag: h1, content: '$record.title' }
      - { type: text, content: '$record.body', props: { format: markdown } }

Une requête vers /blog/123 qui ne correspond à aucun enregistrement renvoie un 404.

Pages markdown

Rendez une page entière à partir de markdown — soit inline, soit à partir d'un fichier — avec frontmatter, mise en page et table des matières générée automatiquement.

Propriété markdown Description
content Chaîne markdown inline.
file Chemin vers un fichier markdown (p. ex. content/docs.md), résolu depuis la racine du projet. Mutuellement exclusif avec content.
layout Style d'encadrement : prose (défaut), docs, full, ou none.
toc Config de table des matières — true pour les valeurs par défaut, ou { maxDepth, position } (inline ou sidebar).

Le frontmatter YAML (entre les délimiteurs ---) est analysé et exposé comme $frontmatter.* dans meta et les propriétés frères. Le HTML markdown est assaini pour prévenir les attaques XSS (cohérent avec les composants de contenu text/alert).

pages:
  - name: Docs Home
    path: /docs
    markdown:
      file: content/docs/home.md
      layout: docs
      toc: { maxDepth: 3, position: sidebar }

Pour la collection contentDir (une page par fichier markdown dans un répertoire, avec une barre latérale dérivée), utilisez un composant content avec une source contentDir :

Propriété contentDir Description
directory Répertoire contenant les fichiers de contenu markdown.
slugFrom Dérive le slug URL depuis filename ou filepath.
include Motif glob pour filtrer les fichiers (p. ex. *.md).
sort { field, order } — trie par un champ de frontmatter (p. ex. date, desc).
filter Conditions de filtre sur les champs de frontmatter.
nav Config de barre latérale dérivée de la collection : { enabled, groupBy, labelFrom }.

Mises en page et barres latérales

La propriété layout encadre le corps de la page dans des sections nommées. La plus courante est une sidebar liée à des données rendue à l'intérieur du <aside> de la page.

Propriété de section de barre latérale Description
dataSource Lie les entrées à une table avec { table, filter, sort }.
label Expression de libellé par enregistrement (prend en charge $record.<field>).
href Href d'ancre par enregistrement (prend en charge $record.<field>).
archivedField Champ dont la valeur vraie masque une entrée de la barre latérale.
activeIndicator Met en évidence l'entrée correspondant au cadre actif (p. ex. cookie de sélecteur de tenant).

Une barre latérale cadrée liée à $currentUser.assignments.<table> rend une entrée par enregistrement affecté ; un administrateur global (isUnrestricted=true) voit tous les enregistrements.

Contrôle d'accès

La propriété access protège une page :

Forme Signification
'all' Tout le monde, y compris les visiteurs non authentifiés (défaut).
'authenticated' Tout utilisateur connecté.
['admin', 'editor'] Noms de rôles spécifiques.
{ require: 'authenticated', redirectTo: '/login' } Redirige les utilisateurs non autorisés au lieu de renvoyer une erreur.

Pages connexes