Introducción

Completado

Los portales de Microsoft Power Apps generan resultados basados en los datos de Microsoft Dataverse. La pregunta fundamental en esta arquitectura es: ¿cómo puedo tomar estos datos e insertarlos en ese resultado?

Los datos en esta pregunta se referirían a datos de Dataverse y la salida suele ser HTML o texto sin formato.

Dado que los portales de Power Apps utilizan el modelo de software como servicio (SaaS), no se proporciona acceso al código del servidor. Los creadores de portales necesitan editar sus propias plantillas, que es donde entra en juego el lenguaje de plantillas Liquid.

Liquid es un lenguaje de plantilla de código abierto que se integra de forma nativa en los portales de Power Apps. Actúa como un puente entre los datos de Dataverse y la salida HTML o de texto que se envía al navegador. Liquid se puede usar para agregar contenido dinámico a las páginas y para crear una amplia variedad de plantillas personalizadas. Además, Liquid proporciona acceso solo a los datos y las operaciones que están explícitamente permitidos por la configuración de seguridad de los portales.

Agregar código Liquid a las páginas web de portales

El código Liquid se puede usar en cualquier lugar de los portales donde se pueda introducir contenido HTML o de texto, como plantillas web, páginas web y fragmentos de contenido.

  1. Abra el estudio de portales de Power Apps y siga estos pasos:

    1. Vaya al portal del creador de Power Apps.
    2. Seleccione el entorno de destino con el selector de entorno situado en la esquina superior derecha.
    3. En la lista de Aplicaciones, seleccione el tipo de aplicación Portal.
    4. Seleccione el menú Editar.
  2. Seleccione + Nueva página > Diseños fijos > Página con título.

  3. Introduzca las siguientes propiedades de página web:

    • Nombre: Liquid
    • URL parcial: liquid
  4. Seleccione el área Texto de página en el lienzo y luego seleccione el icono del Editor de código fuente (</>) en la barra de estado para iniciar el editor de código.

  5. Agregue el siguiente texto al contenido existente:

    <p>Hello, visitor. The time is {{ 'now' | date: 'g' }}</p>
    
  6. Seleccione Guardar. Nota: El editor podría agregar automáticamente elementos <span> para separar el código Liquid.

Ahora, el contenido mostrará la hora actual.

Captura de pantalla del código Liquid en la página web del portal con indicación de la hora actual.