Version de développement

Cette documentation décrit la version « next » (develop), non encore publiée. Pour la version stable, basculez sur « v5 » dans l'en-tête.

Composants UI

Insérer un composant personnalisé dans un formulaire FormLayout

Placer un composant Vue personnalisé (« part ») entre deux sections ou dans une colonne d'un formulaire FormLayout, avant ou après un champ.

Insérer un composant personnalisé dans un formulaire FormLayout

Un « part » est un composant Vue de votre application, placé dans le schéma d'un formulaire FormLayout. Il se déclare dans les données du schéma, pas dans le modèle (template) Vue.

Emplacement	Clé du schéma	Affichage
Entre deux sections	`section.part`	Le part remplace les colonnes de la section et prend toute la largeur.
Dans une colonne	`column.parts[]`	Le part occupe une cellule de la colonne, comme un champ.

Déclarer un part

Un part est un objet :

Clé	Obligatoire	Rôle
`name`	Oui	Identifiant unique du part. Un autre part peut s'ancrer sur ce nom.
`component`	Oui	Composant Vue à afficher.
`props`	Non	Propriétés passées au composant.
`label`	Non	Libellé affiché au-dessus du composant. Sans libellé, le composant s'affiche sans habillage.
`before` / `after`	Non (colonne seulement)	Nom du champ ou du part avant ou après lequel placer le part.

Exemple

Exemple fictif : un formulaire affiche le solde d'un client entre deux sections, et une jauge après le champ grand_total.

<script setup>
import { ref } from "vue";
import { FormLayout } from "@framework/ui/FormLayout";
import SoldeClient from "./SoldeClient.vue";
import JaugePaiement from "./JaugePaiement.vue";

const doc = ref({ customer: "Maison Verte", grand_total: 1200, outstanding_amount: 400 });

const layout = [
    {
        name: "details",
        sections: [
            {
                name: "client",
                label: "Client",
                columns: [{ fields: [{ fieldname: "customer", fieldtype: "Link", options: "Customer", label: "Client" }] }],
            },
            {
                name: "solde",
                columns: [],
                part: { name: "solde_client", label: "Solde client", component: SoldeClient, props: { customer: "Maison Verte" } },
            },
            {
                name: "montants",
                label: "Montants",
                columns: [
                    {
                        fields: [
                            { fieldname: "grand_total", fieldtype: "Currency", label: "Total TTC" },
                            { fieldname: "outstanding_amount", fieldtype: "Currency", label: "Montant restant dû" },
                        ],
                        parts: [{ name: "jauge", component: JaugePaiement, after: "grand_total" }],
                    },
                ],
            },
        ],
    },
];
</script>

<template>
    <FormLayout :layout="layout" v-model:doc="doc" />
</template>

Règles de placement

Un part avec before se place juste avant son ancre. Avec after, il se place juste après.
Un part peut s'ancrer sur un autre part de la même colonne.
Un part sans ancre, ou dont l'ancre n'existe pas dans la colonne, se place à la fin de la colonne.
Un part garde sa place si le champ voisin est masqué : les champs masqués sont retirés après le placement.
Une section qui ne contient qu'un part reste affichée. Une section sans champ visible et sans part est masquée.