Client Craft Hub Pesquisar documentação /

Pesquisar documentação

Implementar e estender Entrega ao cliente

Explorar documentação

Pré-visualização Versão 0.1.0-alpha.16

Adicionar uma fonte de dados pública ao Visual Builder

Implemente IVisualDataProvider no site e registe-o num Composer Umbraco. Descreva campos estáveis com rótulos e devolva valores públicos tipados para o site/idioma. O Visual Builder fornece a API de ligação; o host é responsável pela origem e regras de acesso.

Projeto Umbraco compatível com Visual Builder 0.1.0-alpha.15, diretamente ou através de ClientCraft 0.1.0-alpha.16. Coloque os dois ficheiros no projeto e mantenha o Program.cs existente. Nesta base .NET 10 / Umbraco 17.7.1, fixe também System.Security.Cryptography.Xml 10.0.13 no projeto do site, substituindo a dependência transitiva vulnerável 10.0.10. Mantenha a auditoria NuGet ativa. O exemplo foi recompilado com esta correção.

Etapas de implementação

  1. Manter a extensão no projeto do cliente

    Use a interface pública, sem modificar ficheiros dos pacotes. O exemplo expõe um nome de serviço fictício, identificado como demonstração. Não consulta contactos CRM, preços, direitos comerciais ou credenciais. O Umbraco continua a gerir páginas, idiomas, media e publicação.

  2. Registar a origem e um campo identificado

    Describe fornece uma chave estável e um rótulo compreensível. ResolveAsync recebe VisualDataContext do renderer e devolve VisualDataValue.Text. Registe a implementação por injeção de dependências num Composer nativo. Não adicione expressões executáveis nem seletores de scripts por página.

    As chaves de origem e campo usam letras minúsculas, algarismos e hífen, sem pontos. A chave do exemplo é agency-public-service. O VisualDataResolver publicado valida a descrição antes de expor a origem.

  3. Compilar e selecionar a origem registada

    Compile o site, reinicie-o e abra um bloco com texto ligado a dados. Selecione a origem de exemplo e o campo Service name. Pré-visualize em inglês e português; o texto muda com o idioma. Use os controlos disponíveis de origem/campo, não JSON de ligação escrito manualmente.

  4. Preparar a recuperação de origens reais

    Ao substituir a demonstração por um catálogo público externo, respeite cancelamento e devolva Empty ou Unavailable conforme o caso. Aplique autorização antes de devolver valores; selecionar um espaço não autoriza acesso. Nunca publique registos privados numa ligação pública. Use APIs nativas para URLs de conteúdo e imagens.

Exemplo funcional

Use os ficheiros completos abaixo com as versões publicadas indicadas.

AgencyCatalogueProvider.cs csharp
using ClientCraft.VisualBuilder.Umbraco.Data;

namespace Agency.Website;

// Public demonstration data only. Never return CRM contacts, credentials or entitlements.
public sealed class AgencyCatalogueProvider : IVisualDataProvider
{
    public VisualDataSource Describe() => new(
        "agency-public-service",
        "Agency public service (example)",
        [new VisualDataField("name", "Service name", VisualDataKind.Text)],
        IsDemonstration: true);

    public Task<VisualDataResult> ResolveAsync(
        VisualDataContext context,
        CancellationToken cancellationToken)
    {
        cancellationToken.ThrowIfCancellationRequested();
        var name = context.Culture.StartsWith("pt", StringComparison.OrdinalIgnoreCase)
            ? "Manutenção de websites"
            : "Website maintenance";

        return Task.FromResult(new VisualDataResult(
            VisualDataStatus.Success,
            new Dictionary<string, VisualDataValue?>
            {
                ["name"] = new VisualDataValue.Text(name)
            }));
    }
}
AgencyCatalogueComposer.cs csharp
using ClientCraft.VisualBuilder.Umbraco.Data;
using Microsoft.Extensions.DependencyInjection;
using Umbraco.Cms.Core.Composing;
using Umbraco.Cms.Core.DependencyInjection;

namespace Agency.Website;

public sealed class AgencyCatalogueComposer : IComposer
{
    public void Compose(IUmbracoBuilder builder)
        => builder.Services.AddSingleton<IVisualDataProvider, AgencyCatalogueProvider>();
}

Continuar a integração