Vistas de Entidad

Visión General

Las vistas de entidad le permiten añadir pestañas personalizadas a la página de detalles de la entidad junto con el formulario predeterminado. Úselas para:

• Previsualizaciones en vivo (previsualización de sitio web, contenido renderizado)
• Vistas de datos relacionados (elementos de pedido, entidades hijas)
• Análisis o gráficos
• Editores personalizados (texto enriquecido, editores de mapas)

Añadir Vistas de Entidad

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

Construyendo una Vista de Entidad

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	Descripción
entity	Entity	La entidad guardada (null para nuevas entidades)
modifiedValues	EntityValues	Valores actuales del formulario sin guardar (en vivo a medida que el usuario escribe)
formContext	FormContext	Contexto completo del formulario
collection	EntityCollection	Definición de colección

Controlando la Posición

Las vistas aparecen como pestañas. Puede configurar su posición:

entityViews: [
    {
        key: "preview",
        name: "Preview",
        Builder: ArticlePreview,
        position: "start"  // Appears before the default form tab
    }
]

Próximos Pasos

• Campos Personalizados — Construir campos de formulario personalizados
• Acciones de Entidad — Botones de acción personalizados

---