Marca de modelo do Liquid para componentes do código

Observação

Desde o dia 12 de outubro de 2022, os portais do Power Apps passaram a ser Power Pages. Mais Informações: O Microsoft Power Pages já está disponível para todos (blog)
Em breve, migraremos e mesclaremos a documentação dos portais do Power Apps com a documentação do Power Pages.

O Power Apps component framework capacita desenvolvedores profissionais e fabricantes de aplicativos a criar componentes de código para aplicativos baseados em modelos e tela. Esses componentes de código podem fornecer uma experiência aprimorada para usuários que trabalham com dados em formulários, exibições e painéis. Mais informações: Usar componentes de código em portais

Importante

A marca de modelo do Liquid para componentes de código requer versão de portais 9.3.10.x ou posterior.

Com esta versão, introduzimos a capacidade de adicionar componentes de código usando uma marca de modelo do Liquid em páginas da Web e habilitamos componentes usando APIs Web que são habilitadas para componentes no nível do campo em formulários de portais.

Os componentes de código podem ser adicionados usando a marca de modelo do Liquid codecomponent. A chave para denotar o componente do código que precisa ser carregado é passada usando o atributo name. Ela pode ser o GUID (que é a ID do componente de código) ou o nome do componente de código importado para o Microsoft Dataverse.

Os valores das propriedades que o componente de código espera precisam ser passados como um par chave-valor separado por ":" (sinal de dois-pontos), no qual a chave é o nome da propriedade e o valor é o valor da cadeia de caracteres JSON.

{% codecomponent name: <ID or name> <property1:value> <property2:value> %}

Por exemplo, para adicionar um componente de código esperando um parâmetro de entrada chamado controlValue, use a seguinte marca de modelo do Liquid:

{% codecomponent name:abc_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:<API Key Value>%}

Dica

Este exemplo usa parâmetros chamados controlvalue e controlApiKey, no entanto, o componente que você usa pode exigir nomes de parâmetros diferentes.

Você pode usar o controle de mapa de exemplo e empacotar o componente de código como uma solução para uso com portais.

Observação

Os recursos criados pela comunidade não têm suporte da Microsoft. Em caso de dúvidas ou problemas com os recursos da comunidade, contate o editor do recurso. Antes de usar esses recursos, você deve garantir que eles atendam às diretrizes do Power Apps component framework e que só sejam usados para fins de referência.

Tutorial: Usar componentes de código em páginas com marca de modelo do Liquid

Neste tutorial, você vai configurar portais do Power Apps para adicionar o componente a uma página da Web. Em seguida, você visitará a página da Web dos portais e interagirá com o componente.

Antes de começar

Se você estiver usando o componente de código de exemplo usado neste tutorial, importe as soluções de exemplo para o ambiente antes de começar. Para saber mais sobre a importação de soluções, vá para Importar soluções.

Pré-requisitos

Para obter os pré-requisitos e saber mais sobre os componentes de código com e sem suporte em portais, acesse Usar componentes de código em portais.

Observação

Este tutorial usa um componente de código de exemplo criado usando o Power Apps component framework para demonstrar um controle de mapa em uma página da Web. Você também pode usar qualquer componente novo ou existente de sua preferência, e qualquer outra página da Web para este tutorial. Nesse caso, use seu componente e página da Web ao seguir as etapas deste tutorial. Para obter mais informações sobre como criar componentes de código, vá para Criar seu primeiro componente.

Etapa 1. Adicionar o componente de código a uma página da Web do Studio

1. Abra o seu portal no  Estúdio de portais do Power Apps.

2. No canto superior esquerdo, selecione Nova página.

3. Selecione Em branco.

4. No painel de propriedades do lado direito, atualize o nome do site. Por exemplo, "Visualizador de Mapas".

5. Atualize o URL parcial. Por exemplo, "mapviewer".

6. Expanda Permissões.

7. Desabilite Página disponível para todos.

8. Selecione as funções Web que devem ter acesso a esta página.

9. Selecione a área editável na página para editar o código-fonte do Liquid.

10. Abra o editor de código do Studio.

11. Adicione um controle com marca de modelo do Liquid usando a seguinte sintaxe:

    {% codecomponent name:abc\_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:<API Key Value> %}
    

    Dica

    Para recuperar os detalhes de todos os componentes importados e para pesquisar por um nome de componente, consulte a API da Web CustomControl.

    Por exemplo:

    • Para pesquisar um componente:

      https://contoso.api.crm10.dynamics.com/api/data/v9.2/customcontrols?$select=ContosoCustomControlName

    • Para recuperar parâmetros de entrada de um componente:

      https://contoso.api.crm10.dynamics.com/api/data/v9.2/customcontrols?$filter=name eq 'ContosoCustomControlName' &$select=manifest

12. Salve e feche o editor do código.

13. Selecione Procurar no site no canto superior direito.

14. A página da Web agora mostrará o controle adicionado a ela.

Próximas etapas

Visão geral: usar componentes de código em portais

Veja também

Marca de entidade do Dataverse codecomponent
Marca de modelo codecomponent
Visão geral do Power Apps component framework
Criar seu primeiro componente
Adicionar componentes de código a uma coluna ou tabela em aplicativos baseados em modelo
Implementar um componente de exemplo da API Web do portal

Observação

Você pode nos falar mais sobre suas preferências de idioma para documentação? Faça uma pesquisa rápida. (Observe que esta pesquisa está em inglês)

A pesquisa levará cerca de sete minutos. Nenhum dado pessoal é coletado (política de privacidade).