Etiqueta de modelo Liquid de compoñentes de código

Nota

A partir do 12 de outubro de 2022, Portais de Power Apps é Power Pages. Máis información: Microsoft Power Pages xa está dispoñible de forma xeral (blog)
Proximamente migraremos e uniremos a documentación de Portais de Power Apps coa documentación de Power Pages.

Power Apps component framework permite aos programadores profesionais e aos creadores de aplicacións crear compoñentes de código para aplicacións baseadas en modelos e lenzos. Estes compoñentes de código poden proporcionar unha experiencia mellorada aos usuarios que traballan con datos en formularios, vistas e paneis. Máis información: Usar compoñentes de código nos portais

Importante

A etiqueta de modelo Liquid para compoñentes de código require a versión de portais 9.3.10.x ou posterior.

Con esta versión, introducimos a capacidade de engadir compoñentes de código usando unha Etiqueta de modelo Liquid en páxinas web e compoñentes habilitados mediante API web que están habilitados para compoñentes de nivel de campo en formularios en portais.

Os compoñentes do código pódense engadir usando a etiqueta de modelo Liquid codecomponent. A clave para indicar o compoñente de código que se debe cargar pásase usando o atributo name. A clave pode ser o GUID (que é o ID do compoñente de código) ou o nome do compoñente de código importado en Microsoft Dataverse.

Os valores das propiedades que espera o compoñente de código deben pasarse como un par clave/valor separados por ":" (signo de dous puntos), onde a clave é o nome da propiedade e o valor é o valor da cadea JSON.

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

Por exemplo, para engadir un compoñente de código que espere un parámetro de entrada denominado controlValue, use a seguinte etiqueta de modelo Liquid:

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

Suxestión

Este exemplo usa parámetros chamados controlvalue e controlApiKey, pero o compoñente que utilice pode requirir nomes de parámetros diferentes.

Pode usar o control de mapa de mostra e empaquetar o compoñente do código como unha solución para usar con portais.

Nota

Os recursos creados pola comunidade non son compatibles con Microsoft. Se ten dúbidas ou problemas cos recursos da comunidade, póñase en contacto co editor do recurso. Antes de utilizar estes recursos, debe asegurarse de que estes cumpren as directrices de Power Apps component framework e só se deben usar como referencia.

Titorial: Usar compoñentes de código en páxinas coa etiqueta de modelo Liquid

Neste titorial, configurará portais de Power Apps para engadir o compoñente a unha páxina web. E despois, visitará a páxina web dos portais e interactuará co compoñente.

Antes de comezar

Se está a usar o compoñente de código de mostra usado neste titorial, asegúrese de importar primeiro as solucións de mostra ao ambiente antes de comezar. Para obter información sobre a importación de solucións, vaia a Importar solucións.

Requisitos previos

Para coñecer os requisitos previos e obter información sobre os compoñentes de código admitidos/non compatibles nos portais, vaia a Usar compoñentes de código en portais.

Nota

Este titorial usa un compoñente de código de mostra creado usando Power Apps component framework para demostrar un control de mapa nunha páxina web. Tamén pode usar calquera compoñente existente ou novo no seu lugar, e calquera outra páxina web para este titorial. Neste caso, asegúrese de usar o seu compoñente e a súa páxina web ao seguir os pasos deste titorial. Para obter máis información sobre como crear compoñentes de código, consulte Crear o seu primeiro compoñente.

Paso 1. Engadir o compoñente de código a unha páxina web de Studio

1. Abre o teu portal en Power Apps portals Studio.

2. Na esquina superior esquerda, selecciona Nova páxina.

3. Seleccione En branco.

4. No panel de propiedades do lado dereito, actualice o nome da páxina web. Por exemplo, "Visor de mapas".

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

6. Expandir permisos.

7. Desactive Páxina dispoñible para todo o mundo.

8. Seleccione os roles web aos que se lles debería permitir acceder a esta páxina.

9. Seleccione a área editable da páxina para editar o código fonte de Liquid.

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

11. Engada o control coa etiqueta de modelo Liquid usando a seguinte sintaxe:

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

    Suxestión

    Para recuperar os detalles de todos os compoñentes importados e buscar un nome de compoñente, consulte a API web CustomControl.

    Por exemplo:

    • Para buscar un compoñente:

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

    • Para recuperar os parámetros de entrada dun compoñente:

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

12. Garde e peche o editor de código.

13. Na esquina superior dereita, selecciona Examinar sitio web.

14. A páxina web agora mostrará o control engadido a ela.

Pasos seguintes

Visión xeral: usar os compoñentes de código nos portais

Consulte tamén

Etiqueta de entidade de compoñente de código Dataverse
Etiqueta do modelo de Codecomponent
Visión xeral de Power Apps component framework
Crear o seu primeiro compoñente
Engadir compoñentes de código a unha columna ou táboa das aplicacións baseadas en modelos
Implementar un compoñente de API web dun portal de exemplo

Nota

Pode indicarnos as súas preferencias para o idioma da documentación? Realice unha enquisa breve. (teña en conta que esa enquisa está en inglés)

Esta enquisa durará sete minutos aproximadamente. Non se recompilarán datos persoais (declaración de privacidade).