Esercizio - Aggiunta di funzionalità lato client avanzate

  • 15 minuti

Lo scopo di questa esercitazione pratica è quello di dimostrare come aggiungere codice JavaScript a una pagina per eseguire il rendering dei dati di Microsoft Dataverse sotto forma di grafico usando una libreria di grafici esterna con i dati recuperati da Dataverse tramite l'API Web dei portali.

Gli esercizi funzionano in modo ottimale quando si dispone di dati di esempio con cui lavorare. In base all'ambiente in cui si sta lavorando, è possibile installare alcuni dati di esempio per gli esercizi. Microsoft Power Platform fornisce la possibilità di aggiungere i dati di esempio necessari. Se nell'ambiente in cui si sta lavorando non sono presenti dati di esempio, seguire i passaggi nella documentazione Aggiungere o rimuovere dati di esempio per installarli.

Obiettivi di apprendimento

L'obiettivo di questi esercizi è mostrare come:

  • Configurare le impostazioni del sito e le autorizzazioni di tabella per abilitare le richieste dell'API Web dei portali.

  • Aggiungere codice inline a una pagina Web di contenuto per recuperare e trasformare i dati usando l'API Web dei portali.

  • Usare una libreria JavaScript esterna per tracciare i dati trasformati.

Prerequisiti

Per questo esercizio, assicurarsi che i parametri seguenti siano impostati nell'ambiente in uso:

  • Un sito Web Power Pages con provisioning effettuato. Se non si dispone di un sito Web Power Pages, seguire le istruzioni nella documentazione Creare un sito con Power Pages per crearne uno.

  • Accesso alla home page dell'ambiente di creazione di Power Pages.

Procedura generale

Per portare a termine l'esercizio, completare le seguenti attività:

  1. Creare le impostazioni del sito e le autorizzazioni di tabella che consentono all'API Web dei portali di leggere le richieste nella tabella degli account.

  2. Creare una pagina di contenuto e aggiungere codice JavaScript che recupera e trasforma i dati.

  3. Aggiungere una libreria di grafici alla pagina e al codice JavaScript usando la libreria per creare un grafico con i dati recuperati.

Procedura dettagliata

Per completare questo lab, effettuare i seguenti passaggi:

Abilitare le richieste dell'API Web dei portali

Questa sezione descrive come abilitare le richieste API Web dei portali alla tabella accounts.

Creazione delle impostazioni del sito

Per creare le impostazioni del sito, effettuare i seguenti passaggi.

  1. Accedere alla schermata home di Power Pages.

  2. Selezionare l'ambiente corretto nell'angolo in alto a destra.

  3. Selezionare il menu con i puntini di sospensione (...), quindi scegliere Power Pages Management.

    L'app Power Pages Management viene visualizzata in una nuova scheda.

    Screenshot dell'ambiente di creazione di Power Pages con il menu delle estensioni espanso e la voce di menu Power Pages Management selezionata.

  4. Selezionare Impostazioni sito.

  5. Selezionare + Nuovo, quindi immettere le informazioni seguenti:

    • Name - Webapi/account/enabled

    • Sito Web: selezionare il proprio sito Web

    • Valore: true

  6. Selezionare Salva.

    Screenshot dei passaggi necessari per creare le impostazioni del sito API Web.

  7. Selezionare + Nuovo, quindi immettere le informazioni seguenti:

    • Name - Webapi/account/fields

    • Sito Web: selezionare il proprio sito Web

    • Value - name,numberofemployees,revenue

  8. Selezionare Salva e chiudi.

Creazione delle autorizzazioni di tabella

Per creare le autorizzazioni di tabella, effettuare i seguenti passaggi.

  1. Passare alla pagina home di Power Pages.

  2. Selezionare Modifica per il sito Web di destinazione per aprire la finestra di progettazione di Power Pages.

  3. Selezionare l'area di lavoro *Sicurezza, quindi Autorizzazioni di tabella.

    Screenshot delle autorizzazioni di tabella nella finestra di progettazione di Power Pages.

  4. Selezionare + Nuova autorizzazione, quindi compilare le informazioni seguenti:

    • Nome: Account

    • Tabella: Account (account)

    • Tipo di accesso: Globale

    • Autorizzazione per: Lettura

  5. Selezionare Aggiungi ruoli e aggiungere Utenti anonimi e Utenti autenticati.

  6. Selezionare Salva.

    Screenshot dell'autorizzazione di tabella di lettura su accounts.

Test dell'API Web

Per testare l'API Web, aprire l'URL seguente: https://yourwebsite.powerappsportals.com/_api/accounts?$select=name,numberofemployees,revenue

L'output dovrebbe avere l'aspetto mostrato nell'immagine seguente.

Screenshot dell'output dell'API Web del portale di esempio.

Creazione di una pagina di contenuto e recupero dei dati

Per creare una pagina di contenuto e aggiungere codice JavaScript che recupera e trasforma i dati, effettuare i seguenti passaggi:

  1. Nella finestra di progettazione selezionare l'area di lavoro Pagine, quindi selezionare+ Pagina.

  2. Immettere Grafico come Nome pagina.

  3. Verificare che sia selezionata l'opzione Aggiungi pagina allo spostamento principale.

  4. Selezionare il layout Inizia da modello vuoto.

  5. Selezionare Aggiungi.

  6. Selezionare Modifica codice.

    Screenshot della nuova pagina del grafico vuota nella finestra di progettazione con un riquadro rosso sul pulsante Modifica codice.

  7. Nella finestra popup selezionare Apri Visual Studio Code.

  8. Nell'editor Visual Studio Code selezionare il file Chart.en-US.customjs.js.

  9. Aggiungere il seguente 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. Premere il tasto di scelta rapida Ctrl + S (⌘ + S su Mac) per salvare il file.

    Screenshot dell'editor Visual Studio Code con il codice JavaScript per recuperare i dati degli account usando l'API Web dei portali.

  11. Chiudere la scheda Visual Studio Code. Quando richiesto, selezionare Sincronizza per sincronizzare le modifiche.

  12. Selezionare Anteprima > Desktop.

  13. Quando viene visualizzata la pagina, premere il tasto F12 per visualizzare gli strumenti di sviluppo del browser.

  14. Verificare che l'output della console contenga gli stessi dati recuperati in precedenza, ma non trasformati.

    Screenshot dell'output della console con i dati trasformati.

  15. La struttura dei dati è ora pronta per la tracciatura. Assegnare le etichette appropriate ai punti dati:

    • nome: nome della società

    • x: numero di dipendenti

    • y: ricavi della società in migliaia

    • z: ricavi per dipendente (calcolati)

Aggiunta funzionalità di libreria esterna

Questo esercizio usa la libreria Highcharts.js (gratuita per uso personale o senza scopo di lucro) per creare un grafico a bolle basato sui dati.

  1. Passare allo studio di progettazione.

  2. Selezionare il piè di pagina, quindi selezionare Modifica codice.

  3. Nella finestra popup selezionare Apri Visual Studio Code.

    Screenshot di una pagina aperta nello studio di progettazione di Power Pages con il piè di pagina selezionato e una finestra popup che chiede all'utente di aprire Visual Studio Code.

  4. Aggiungere il codice seguente alla fine del file.

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

  5. Premere il tasto di scelta rapida Ctrl + S (⌘ + S su Mac) per salvare il file.

  6. Chiudere la scheda di Visual Studio Code.

  7. Selezionare Modifica codice sulla barra degli strumenti per aprire Visual Studio Code per la pagina.

  8. Selezionare il file Chart.en-US.customjs.js.

  9. Modificare il file per cambiare la funzione makeChart come segue:

    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. Premere il tasto di scelta rapida Ctrl + S (⌘ + S su Mac) per salvare il file.

  11. Selezionare il file Chart.en-US.webpage.copy.html.

  12. Inserire il codice seguente nell'elemento <div> interno:

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

  13. Premere il tasto di scelta rapida Ctrl + S (⌘ + S su Mac) per salvare il file.

    Screenshot dell'area del contenuto della pagina nell'editor di Visual Studio Code.

  14. Chiudere la scheda Visual Studio Code, quindi selezionare Sincronizza per sincronizzare le modifiche.

  15. Selezionare Anteprima > Desktop.

  16. Ora l'output dovrebbe includere il grafico a bolle. Passare il mouse sulle bolle per verificare i dati.

Screenshot dell'output della pagina con il grafico a bolle incluso.