Etiqueta de plantilla Liquid para componentes de código

Nota

A partir del 12 de octubre de 2022, los portales de Power Apps son Power Pages. Más información: Microsoft Power Pages ya está disponible para el público en general (blog)
Pronto migraremos y fusionaremos la documentación de los portales de Power Apps con la documentación de Power Pages.

Power Apps component framework permite a los desarrolladores profesionales y creadores de aplicaciones crear componentes de código para aplicaciones basadas en modelos y de lienzo. Estos componentes de código pueden proporcionar una experiencia mejorada para los usuarios que trabajan con datos en formularios, vistas y paneles. Más información: usar componentes de código en portales

Importante

La etiqueta de plantilla Liquid para componentes de código requiere la versión de portales 9.3.10.x o posterior.

Con esta versión, hemos introducido la capacidad de agregar componentes de código creados con Etiqueta de plantilla Liquid en páginas web y componentes habilitados, mediante las API web que están habilitadas para componentes en el nivel de campo en formularios de portales.

Los componentes de código se pueden agregar usando la etiqueta de plantilla Liquid codecomponent. La clave para indicar el componente de código que debe cargarse se pasa usando el atributo name. La clave puede ser el GUID (que es el id. del componente de código) o el nombre del componente de código importado en Microsoft Dataverse.

Los valores de las propiedades que espera el componente de código deben pasarse como un par clave/valor separados por ":" (signo de dos puntos), donde la clave es el nombre de la propiedad y el valor es el valor de la cadena JSON.

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

Por ejemplo, para agregar un componente de código que espera un parámetro de entrada llamado controlValue, utilice la etiqueta de plantilla Liquid siguiente:

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

Sugerencia

Este ejemplo usa parámetros llamados controlvalue y controlApiKey, pero el componente que utiliza puede requerir diferentes nombres de parámetros.

Puede usar el control de mapa de muestra y empaquetar el componente de código como solución para su uso con portales.

Nota

Los recursos creados por la comunidad no se admiten en Microsoft. Si tiene preguntas o problemas con los recursos de la comunidad, póngase en contacto con el editor del recurso. Antes de utilizar estos recursos, debe asegurarse de que cumplan con las directrices de Power Apps component framework y solo deben utilizarse como referencia.

Tutorial: usar componentes de código en páginas con etiqueta de plantilla Liquid

En este tutorial, configurará portales de Power Apps para agregar el componente a una página web. Luego, visitará la página web de los portales e interactuará con el componente.

Antes de empezar

Si está utilizando el componente de código de muestra que se usa en este tutorial, asegúrese de importar primero las soluciones de muestra al entorno antes de comenzar. Para obtener información sobre la importación de soluciones, vaya a Importar soluciones.

Requisitos previos

Para conocer los requisitos previos y aprender los componentes de código admitidos/no admitidos en los portales, vaya a Usar componentes de código en portales.

Nota

Este tutorial utiliza un componente de código de muestra creado con Power Apps component framework para demostrar un control de mapa en una página web. También puede usar cualquier componente nuevo o existente, y cualquier otra página web para este tutorial. En este caso, asegúrese de utilizar su componente y página web cuando siga los pasos de este tutorial. Para obtener más información sobre cómo crear componentes de código, vaya a Crear el primer componente.

Paso 1. Agregar el componente de código a una página web de Studio

1. Abra el portal en  Power Apps portals Studio.

2. En la esquina superior izquierda, seleccione Nueva página.

3. Seleccione En blanco.

4. En el panel de propiedades del lado derecho, actualice el nombre de la página web. Por ejemplo, "Visor de mapas".

5. Actualice la dirección URL parcial. Por ejemplo, "mapviewer".

6. Expanda Permisos.

7. Deshabilite Página disponible para todos.

8. Seleccione los roles web a los que se les debe permitir el acceso a esta página.

9. Seleccione el área editable en la página para editar el código de origen Liquid.

10. Abrir editor de código de Studio.

11. Agregue control con la etiqueta de plantilla Liquid usando la siguiente sintaxis:

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

    Sugerencia

    Para recuperar los detalles de todos los componentes importados y buscar un nombre de componente, consulte CustomControl API web.

    Por ejemplo:

    • Para buscar un componente:

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

    • Para recuperar los parámetros de entrada de un componente:

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

12. Guarde y cierre el editor de código.

13. En la esquina superior derecha, seleccione Examinar sitio web.

14. La página web ahora mostrará el control agregado.

Pasos siguientes

Información general: Usar componentes de código en portales

Consulte también

Etiqueta de entidad de Codecomponent Dataverse
Etiqueta de plantilla de Codecomponent
Información general sobre Power Apps component framework
Crear el primer componente
Agregue componentes de código a una columna o tabla en aplicaciones basadas en modelos
Implementar un componente de API web de portal de muestra

Nota

¿Puede indicarnos sus preferencias de idioma de documentación? Realice una breve encuesta. (tenga en cuenta que esta encuesta está en inglés)

La encuesta durará unos siete minutos. No se recopilan datos personales (declaración de privacidad).