Ejercicio: Agregar funcionalidad avanzada del lado del cliente

  • 15 minutos

El propósito de este laboratorio práctico es mostrar cómo agregar código JavaScript a una página para representar datos de Microsoft Dataverse en forma de gráfico utilizando una biblioteca de gráficos externa con los datos recuperados de Dataverse mediante la API web de portales.

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 Power Platform 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:

  • Configurar la configuración del sitio y los permisos de la tabla para habilitar las solicitudes de la API web de portales.

  • Agregar código insertado a una página web de contenido y transformar los datos mediante la API web de portales.

  • Utilizar una biblioteca externa de JavaScript para trazar los datos transformados.

Requisitos previos

Para este ejercicio, asegúrese de que los siguientes parámetros están configurados en su entorno:

  • Un sitio web de Power Pages aprovisionado. Si no tiene un sitio web de Power Pages disponible, siga las instrucciones que encontrará en la documentación de Crear un sitio con Power Pages a fin de crear uno.

  • Acceda a la página principal de Power Pages Maker Portal.

Pasos generales

Para finalizar el ejercicio, complete las siguientes tareas.

  1. Cree la configuración del sitio y los permisos de la tabla que permiten las solicitudes de lectura de la API web de portales en la tabla de cuentas.

  2. Cree una página de contenido y agregue código JavaScript que recupere y transforme los datos.

  3. Agregue una biblioteca de gráficos a la página y código JavaScript utilizando la biblioteca para crear un gráfico con los datos recuperados.

Pasos detallados

Siga los pasos detallados para completar este laboratorio.

Habilitar solicitudes de API web de portales

Esta sección le mostrará cómo habilitar las solicitudes de API web de portales en la tabla cuentas.

Crear configuración de sitios

Para crear la configuración de sitios, siga estos pasos.

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

  2. Seleccione el entorno que corresponda en la esquina superior derecha.

  3. Seleccione el menú de puntos suspensivos (…) y seleccione Administración del portal.

    La aplicación Administración del portal se abrirá en una nueva pestaña.

    Captura de pantalla del entorno Power Pages Maker Portal, con el menú de extensión expandido y el elemento del menú de Administración del portal seleccionado

  4. Seleccione Configuración del sitio.

  5. Seleccione + Nuevo e introduzca la información siguiente:

    • Nombre: Webapi/account/enabled.

    • Sitio web: seleccione su sitio web.

    • Valor: verdadero.

  6. Seleccione Guardar.

    Captura de pantalla de los pasos para crear la configuración del sitio de la API web

  7. Seleccione + Nuevo e introduzca la información siguiente:

    • Nombre: Webapi/account/fields.

    • Sitio web: seleccione su sitio web.

    • Valor: name,numberofemployees,revenue

  8. Seleccione Guardar y cerrar.

Crear permisos de tabla

Para crear permisos de tabla, siga estos pasos.

  1. Cambie a la página principal de Power Pages.

  2. Seleccione Editar para que el sitio web de destino abra el estudio de diseño de Power Pages.

  3. Seleccione el espacio de trabajo de configuración y seleccione Permisos de tabla.

    Captura de pantalla de los permisos de tabla en el estudio de diseño de Power Pages

  4. Seleccione + Nuevo permiso y complete la siguiente información.

    • Nombre: cuenta.

    • Tabla: cuenta (cuenta).

    • Tipo de acceso: global.

    • Permiso para: lectura

  5. Seleccione Agregar roles y agregue Usuarios anónimos y Usuarios autenticados.

  6. Seleccione Guardar.

    Captura de pantalla del permiso de tabla de lectura global en cuentas

Probar la API web

Para probar la API web, abra la siguiente URL: https://yourwebsite.powerappsportals.com/_api/accounts?$select=name,numberofemployees,revenue

La salida debe parecerse a la siguiente imagen.

Captura de pantalla de la salida de API web del portal de ejemplo

Crear una página de contenido y recuperar datos

Para crear una página de contenido y agregar código JavaScript que recupere y transforme los datos, siga estos pasos:

  1. En el estudio de diseño, seleccione el espacio de trabajo de páginas y seleccione + Página.

  2. Introduzca Gráfico como el Nombre de la página.

  3. Asegúrate de que la opción Agregar página a navegación principal esté seleccionada.

  4. Seleccione el diseño Comenzar desde cero.

  5. Seleccione Agregar.

  6. Seleccione Editar código.

    Captura de pantalla de la nueva página de gráfico en blanco en el estudio de diseño, con el cursor colocado sobre el botón Editar código

  7. Seleccione Abrir Visual Studio Code en el cuadro de diálogo emergente.

  8. En el editor de Visual Studio Code, seleccione el archivo Chart.en-US.customjs.js.

  9. Anexe el siguiente script:

    function makeChart(rawData) {
  // transform raw data into plotting array
  var rData = rawData.value.map(({
    name,
    revenue,
    numberofemployees
  }) => ({
    "x": numberofemployees,
    "y": revenue,
    "z": (!revenue) ? 1 : numberofemployees / revenue,
    "name": name
  }));
  console.log(rData);
}
// retrieve accounts data using portals Web API
$(document).ready(function() {
  $.get('/_api/accounts?$select=name,numberofemployees,revenue', makeChart, 'json');
});

  10. Pulse el método abreviado de teclado Ctrl + S (⌘ + S en Mac) para guardar el archivo.

    Captura de pantalla del editor de Visual Studio Code con Javascript para recuperar datos de cuentas usando la API web de portales

  11. Cierra la pestaña Visual Studio Code. Seleccione Sincronizar cuando se le solicite sincronizar los cambios.

  12. Seleccione Versión preliminar > Escritorio.

  13. Cuando se muestre la página, presione la tecla F12 para mostrar las herramientas de desarrollo del navegador.

  14. Compruebe si la salida de la consola contiene los mismos datos recuperados previamente, con la diferencia de que ahora aparecerán como transformados.

    Captura de pantalla de la salida de la consola con datos transformados

  15. La estructura de datos ya está preparada para el trazado. Asigne las etiquetas adecuadas a los puntos de datos.

    • nombre: nombre de la empresa

    • x: número de empleados

    • y: ingresos de la empresa en miles de dólares

    • z: ingresos por cada empleado (calculado)

Agregar funcionalidad de biblioteca externa

En este ejercicio se utiliza la biblioteca Highcharts.js (gratuita para uso personal o sin fines de lucro) para crear un gráfico de burbujas basado en los datos.

  1. Cambie al estudio de diseño.

  2. Seleccione el pie de página y, luego, seleccione Editar código.

  3. Seleccione Abrir Visual Studio Code en el cuadro de diálogo emergente.

    Captura de pantalla de una página abierta en el estudio de diseño de Power Pages, con el pie de página seleccionado y una ventana emergente que le pide al usuario que abra Visual Studio Code

  4. Agregue el siguiente código al final del archivo.

      <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/highcharts-more.js"></script>

  5. Pulse el método abreviado de teclado Ctrl + S (⌘ + S en Mac) para guardar el archivo.

  6. Cierre la pestaña Visual Studio Code.

  7. Seleccione Editar código en la barra de herramientas a fin de abrir Visual Studio Code para la página.

  8. Seleccione el archivo Chart.en-US.customjs.js.

  9. Modifique el archivo para cambiar la función makeChart de la siguiente manera:

    function makeChart(data) {
  console.log(data);
  var rData = data.value.map(({
    name,
    revenue,
    numberofemployees
  }) => ({
    "x": numberofemployees,
    "y": revenue,
    "z": (!revenue) ? 1 : numberofemployees / revenue,
    "name": name
  }));
  console.log(rData);

  // new code to plot the data
  Highcharts.chart($('.mychart')[0], {
    title: {
      text: "Customers efficiency"
    },
    legend: {
      enabled: false
    },
    xAxis: {
      title: {
        text: "Number of employees"
      }
    },
    yAxis: {
      title: {
        text: "Turnover ($K)"
      }
    },
    tooltip: {
      pointFormat: '<strong>{point.name}</strong><br/>Employed: {point.x}<br>Turnover ($K): ${point.y}',
      headerFormat: ''
    },
    series: [{
      type: 'bubble',
      data: rData
    }]
  });
}

// retrieve accounts data using portals Web API
$(document).ready(function() {
  $.get('/_api/accounts?$select=name,numberofemployees,revenue', makeChart, 'json');
});

  10. Pulse el método abreviado de teclado Ctrl + S (⌘ + S en Mac) para guardar el archivo.

  11. Seleccione el archivo Chart.en-US.webpage.copy.html.

  12. Inserte el siguiente código en el elemento <div> interior:

      <figure>
    <div class="mychart"></div>
  </figure>

  13. Pulse el método abreviado de teclado Ctrl + S (⌘ + S en Mac) para guardar el archivo.

    Captura de pantalla del área de contenido de la página en el editor de Visual Studio Code

  14. Cierra la pestaña Visual Studio Code y seleccione Sincronizar para sincronizar los cambios.

  15. Seleccione Versión preliminar > Escritorio.

  16. Ahora, el resultado debe incluir el gráfico de burbujas. Desplace el cursor por las burbujas para comprobar los datos.

Captura de pantalla de la salida de la página, con el gráfico de burbujas incluido