Ejercicio: Crear una plantilla web extensible

Completado

El propósito de este laboratorio práctico es introducir el concepto de crear y extender plantillas de Liquid.

Los ejercicios funcionan mejor cuando tiene datos de ejemplo con los que trabajar. En función del entorno con el que trabaje, puede que quiera instalar algunos datos de ejemplo para ayudar con los ejercicios. Microsoft Dataverse le ofrece la capacidad de agregar datos de ejemplo según sea necesario. Si el entorno en el que trabaja no tiene datos de ejemplo instalados, siga los pasos de Agregar o quitar datos de ejemplo para instalar los datos de ejemplo en su entorno.

Objetivos de aprendizaje

El objetivo de estos ejercicios es ayudarle a saber cómo hacer lo siguiente:

  • Ampliar las plantillas de Liquid con las etiquetas extend y block.
  • Reutilizar las plantillas de Liquid mediante la etiqueta include.
  • Aplicar permisos de tabla a los resultados de la nueva plantilla.

Requisitos previos

Para este ejercicio, deberá tener los siguientes parámetros configurados en su entorno:

  • Un sitio web de Power Pages aprovisionado. Si no tiene un sitio web de Power Pages disponible, siga las instrucciones de Crear un sitio con Power Pages para crear uno.
  • Acceso a la aplicación Administración de Power Pages.

Pasos generales

Para finalizar el ejercicio, debe completar las siguientes tareas generales:

  • Crear una plantilla parcial accediendo a los datos de Dataverse para utilizarlos como bloque de diseño.

  • Crear una nueva plantilla que amplíe una plantilla web de diseño de dos columnas.

  • Sobrescribir el panel lateral para incluir la plantilla parcial.

  • Cambiar la plantilla de una página web existente.

  • Configurar permisos de tabla para mostrar datos a usuarios anónimos.

Pasos detallados

Para completar el ejercicio, creará una nueva plantilla de página que incluya un panel lateral que enumere todas las cuentas de Dataverse.

Crear una plantilla parcial

Su primera tarea es crear una plantilla parcial que no se utilizará para representar una página, sino que se insertará en otra plantilla.

  1. Inicie sesión en la página principal de Power Pages.

  2. Seleccione el entorno de destino en la esquina superior derecha.

  3. Busque su sitio web, expanda el menú de extensiones (puntos suspensivos) y seleccione Administración del portal para abrir la aplicación Administración de Power Pages.

  4. Seleccione Plantillas web.

  5. Seleccione Nueva.

  6. Introduzca los siguientes valores:

    • Nombre: directorio

    • Sitio web: seleccione su sitio web actual

    • Origen: introduzca el siguiente contenido:

    {% fetchxml accounts %}
    <fetch>
      <entity name="account">
        <attribute name="name" />
      </entity>
    </fetch>
    {% endfetchxml %}
    
    {% if accounts.global_permission_granted %}
      <ul>
        {% for account in accounts.results.entities %} 
        <li>{{ account.name }}</li>
        {%- endfor -%}
      </ul>
    {% else %}
      <div class="alert alert-warning">You do not have permissions to access the directory.</div>
    {% endif %}
    
  7. Seleccione Guardar y cerrar.

Ampliar una plantilla existente

A continuación, creará una nueva plantilla que extienda una plantilla de Liquid existente y luego insertará la plantilla que creó anteriormente.

  1. Seleccione Plantillas web.

  2. Seleccione Nueva.

  3. Introduzca los siguientes valores:

    • Nombre: plantilla de directorio

    • Sitio web: seleccione su sitio web actual

    • Origen: introduzca el siguiente contenido:

    {% extends "Layout 2 Column Wide Left" %}
    
    {% block aside %}
      <h2>Directory</h2>
      {% include 'Directory' %}
    {% endblock %}
    
  4. Seleccione Guardar y cerrar.

Crear una plantilla de página y asociarla a esa página

En esta tarea, creará una plantilla de página que utiliza su nueva plantilla web e incluirá la salida de directorio.

  1. Seleccione Plantillas de página.

  2. Seleccione Nueva.

  3. Introduzca los siguientes valores:

    • Nombre: plantilla de página de directorio

    • Sitio web: seleccione el sitio web actual

    • Tipo: seleccione Plantilla web

    • Plantilla web: seleccione Plantilla de directorio.

    • Nombre de la tabla: seleccione Página web.

  4. Opcional: agregue un elemento de texto al contenido de la página e introduzca el texto que desee.

  5. Seleccione Guardar y cerrar.

Probar la plantilla inicial

El siguiente paso es probar que su nueva plantilla funciona:

  1. Vuelva a la pestaña Inicio de Power Pages o abra una nueva.

  2. Busque el sitio web y seleccione Editar para abrir el estudio de diseño de Power Pages.

  3. Seleccione Sincronizar para sincronizar los cambios.

  4. Seleccione el espacio de trabajo Páginas.

  5. Seleccione + Página. En el cuadro de diálogo Agregar una página, complete los siguientes pasos:

    1. Introduzca Directorio como el nombre de la página.

    2. Seleccione Diseños personalizados y, a continuación, Plantilla de página de directorio.

    3. Seleccione Agregar.

La página vacía aparecerá con el mensaje "No tiene permisos para acceder al directorio" en el panel derecho.

Agregar permisos de tabla

Advertencia

La concesión de permiso de lectura global a usuarios anónimos tiene solo fines ilustrativos. Debe extremar la precaución para evitar la exposición involuntaria de información confidencial al otorgar demasiados permisos y no incluir los filtros adecuados en sus vistas o expresiones FetchXML.

Para agregar permisos de tabla, siga estos pasos.

  1. Seleccione el espacio de trabajo de configuración y, a continuación, Permisos de tabla.

  2. Seleccione + Nuevo.

  3. Introduzca los siguientes valores:

    • Nombre: directorio de cuenta

    • Tabla: seleccione la tabla Cuenta (cuenta)

    • Tipo de acceso: seleccione Acceso global

    • Permiso para: seleccione Lectura

  4. Seleccione Agregar roles.

  5. Seleccione Usuarios anónimos y Usuarios autenticados.

  6. Seleccione Guardar.

Probar la plantilla

La tarea final es probar la nueva plantilla:

  1. Seleccione el espacio de trabajo Páginas y la página Directorio.

  2. Seleccione Versión preliminar > Escritorio.

    Nota

    Una simple actualización de la página del navegador no será suficiente para actualizar los datos. Si, en lugar de eso, usa este comando, reconstruirá la memoria caché del sitio.

Ahora debería aparecer la página e incluir la lista de cuentas en el panel derecho.

Captura de pantalla de la página con una lista de cuentas incluida