Etiqueta de modelo Liquid para os componentes de código

Nota

A partir de 12 de outubro de 2022, os portais do Power Apps passam a ser Power Pages. Mais informações: O Microsoft Power Pages está agora em disponibilidade geral (blogue)
Em breve, vamos migrar e unir a documentação dos portais do Power Apps com a documentação do Power Pages.

O Power Apps component framework capacita os programadores profissionais e os criadores de aplicações a criar componentes de código para aplicações condicionadas por modelo e tela. Estes componentes de código podem fornecer uma experiência melhorada para os utilizadores que trabalham com dados sobre formulários, vistas e dashboards. Mais informações: Utilizar componentes de código nos portais

Importante

A etiqueta de modelo Liquid para componentes de código requer portais versão 9.3.10.x ou posteriores.

Com esta versão, introduzimos a capacidade de adicionar componentes de código utilizando uma Etiqueta de modelo Liquid em páginas Web e ativamos os componentes com a API Web que estão ativados para componentes de nível de campo em formulários em portais.

Os componentes de código podem ser adicionados usando a etiqueta do modelo Liquid codecomponent. A chave para denotar o componente de código que precisa de ser carregado é transmitida utilizando o atributo name. A chave pode ser o GUID (que é o 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 de ser passados como um par chave/valor separado por ":" (sinal de dois pontos), onde a chave é o nome da propriedade e o valor é o valor da cadeia JSON.

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

Por exemplo, para adicionar um componente de esperando um parâmetro de entrada chamado controlValue, utilize a seguinte etiqueta de modelo Liquid:

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

Dica

Este exemplo utiliza parâmetros chamados controlvalue e controlApiKey, no entanto, o componente que utiliza pode requerer diferentes nomes de parâmetros.

Pode utilizar o controlo de mapas de amostra e colocar o componente de código em pacote como uma solução para utilização com portais.

Nota

Os recursos criados pela comunidade não são suportados pela Microsoft. Se tiver perguntas ou problemas com os recursos da comunidade, contacte o fabricante do recurso. Antes de utilizar estes recursos, tem de garantir que cumprem as orientações-quadro relativas ao Power Apps component framework e só devem ser utilizados para fins de referência.

Tutorial: Use componentes de código em páginas com etiqueta de modelo Liquid

Neste tutorial, irá configurar os portais do Power Apps para adicionar o componente a uma página Web. Depois, visitará a página dos portais e interagirá com o componente.

Antes de começar

Se estiver a utilizar o componente de código de amostra utilizado neste tutorial, certifique-se de que importa primeiro as soluções de amostra para o ambiente antes de começar. Para conhecer a importação de soluções, vá para Importar soluções.

Pré-requisitos

Para pré-requisitos e para conhecer componentes de código suportados/não suportados nos portais, vá para Utilizar componentes de código em portais.

Nota

Este tutorial utiliza um componente de código de amostra criado utilizando o Power Apps component framework para demonstrar um controlo de mapas numa página web. Também pode utilizar qualquer componente existente ou novo, e qualquer outra página Web para este tutorial. Neste caso, certifique-se de que utiliza o seu componente e página Web ao seguir os passos deste tutorial. Para obter mais informações sobre como criar componentes de código, vá para Criar o seu primeiro componente.

Passo 1. Adicione o componente de código a uma página Web do Studio

1. Abra o seu portal em  Studio 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 da página Web. Por exemplo, "Visualizador de Mapas".

5. Atualizar URL parcial. Por exemplo, "mapviewer".

6. Expandir Permissões.

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

8. Selecione as funções web que devem ser autorizadas a aceder a esta página.

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

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

11. Adicione o controlo com a etiqueta de modelo Liquid utilizando a seguinte sintaxe:

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

    Dica

    Para obter os detalhes de todos os componentes importados e procurar um nome de componente, consulte a API Web CustomControl.

    Por exemplo:

    • Pesquisar um componente:

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

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

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

12. Guardar e fechar o editor de código.

13. No canto superior direito, selecione Procurar site.

14. A página web irá agora mostrar o controlo adicionado.

Passos seguintes

Descrição geral: Utilizar componentes de código nos portais

Consulte também

Etiqueta de entidade do Dataverse Codecomponent
Etiqueta de modelo Codecomponent
Descrição geral do Power Apps component framework
Criar o seu primeiro componente
Adicionar componentes de código a uma coluna ou tabela em aplicações condicionadas por modelo
Implementar um componente de API Web do portal de exemplo

Nota

Pode indicar-nos as suas preferências no que se refere ao idioma da documentação? Responda a um breve inquérito. (tenha em atenção que o inquérito está em inglês)

O inquérito irá demorar cerca de sete minutos. Não são recolhidos dados pessoais (declaração de privacidade).