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
Abra o seu portal no Estúdio de portais do Power Apps.
No canto superior esquerdo, selecione Nova página.
Selecione Em branco.
No painel de propriedades do lado direito, atualize o nome do site. Por exemplo, "Visualizador de Mapas".
Atualize o URL parcial. Por exemplo, "mapviewer".
Expanda Permissões.
Desabilite Página disponível para todos.
Selecione as funções Web que devem ter acesso a esta página.
Selecione a área editável na página para editar o código-fonte do Liquid.
Abra o editor de código do Studio.
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=ContosoCustomControlNamePara 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
Salve e feche o editor do código.
Selecione Procurar no site no canto superior direito.
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).