Vistas de Entidade

Visão Geral

As vistas de entidade permitem adicionar abas personalizadas à página de detalhe da entidade, juntamente com o formulário predefinido. Use-as para:

• Pré-visualizações ao vivo (pré-visualização de website, conteúdo renderizado)
• Vistas de dados relacionados (itens de pedido, entidades filhas)
• Análises ou gráficos
• Editores personalizados (texto formatado, editores de mapa)

Adicionar Vistas de Entidade

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

Construir uma Vista de Entidade

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	Tipo	Descrição
entity	Entity	A entidade guardada (null para novas entidades)
modifiedValues	EntityValues	Valores atuais do formulário não guardados (atualizados à medida que o utilizador digita)
formContext	FormContext	Contexto completo do formulário
collection	EntityCollection	Definição da coleção

Controlar Posição

As vistas aparecem como abas. Pode configurar a sua posição:

entityViews: [
    {
        key: "preview",
        name: "Preview",
        Builder: ArticlePreview,
        position: "start"  // Aparece antes da aba do formulário predefinido
    }
]

Próximos Passos

• Campos Personalizados — Criar campos de formulário personalizados
• Ações de Entidade — Botões de ação personalizados

---