Vues d'entité

Aperçu

Les vues d’entité vous permettent d’ajouter des onglets personnalisés à la page de détails de l’entité, en plus du formulaire par défaut. Utilisez-les pour :

• Des aperçus en direct (aperçu de site web, contenu rendu)
• Des vues de données connexes (articles de commande, entités enfants)
• Des analyses ou des graphiques
• Des éditeurs personnalisés (texte enrichi, éditeurs de cartes)

Ajout de vues d’entité

const articlesCollection: EntityCollection = {
    slug: "articles",
    name: "Articles",
    entityViews: [
        {
            key: "preview",
            name: "Preview",
            Builder: ArticlePreview
        },
        {
            key: "related",
            name: "Related Articles",
            Builder: RelatedArticlesView
        }
    ],
    properties: { /* ... */ }
};

Création d’une vue d’entité

import { EntityCustomViewParams } from "@rebasepro/types";

function ArticlePreview({
    entity,
    modifiedValues,
    formContext
}: EntityCustomViewParams) {
    // modifiedValues has the unsaved, live form values
    const title = modifiedValues?.title ?? entity?.values?.title;
    const content = modifiedValues?.content ?? entity?.values?.content;

    return (
        <div className="p-8 max-w-2xl mx-auto">
            <h1 className="text-3xl font-bold">{title}</h1>
            <div dangerouslySetInnerHTML={{ __html: content }} />
        </div>
    );
}

EntityCustomViewParams

Prop	Type	Description
entity	Entity	L’entité sauvegardée (null pour les nouvelles entités)
modifiedValues	EntityValues	Valeurs actuelles non sauvegardées du formulaire (mises à jour en direct pendant que l’utilisateur tape)
formContext	FormContext	Contexte complet du formulaire
collection	EntityCollection	Définition de la collection

Contrôle de la position

Les vues apparaissent sous forme d’onglets. Vous pouvez configurer leur position :

entityViews: [
    {
        key: "preview",
        name: "Preview",
        Builder: ArticlePreview,
        position: "start"  // Apparaît avant l'onglet du formulaire par défaut
    }
]

Prochaines étapes

• Champs personnalisés — Créez des champs de formulaire personnalisés
• Actions d’entité — Boutons d’action personnalisés

---