Utilizzo dei componenti della visualizzazione e della proprietà dashboard per eseguire una semplice visualizzazione

L'utilizzo della proprietà dashboard del componente di visualizzazione Query ti consente di mostrare una visualizzazione incorporabile in grado di rispondere alle modifiche apportate alla UI di Looker. L'utilizzo della proprietà dashboard (anziché della proprietà query) offre i seguenti vantaggi:

  • La visualizzazione può essere aggiornata da qualsiasi utente Looker con accesso in modifica alla dashboard.
  • Gli aggiornamenti alla visualizzazione incorporata non richiedono modifiche all'estensione o all'applicazione React di cui è stato eseguito il deployment.

Se vuoi creare una visualizzazione incorporabile che non risponda alle modifiche all'interno della UI di Looker, segui le istruzioni nella pagina della documentazione Utilizzare i componenti di visualizzazione e la proprietà query per eseguire il rendering di una visualizzazione semplice.

Per eseguire il rendering di una visualizzazione incorporabile utilizzando i componenti di visualizzazione di Looker e un ID dashboard numerico, assicurati che la configurazione soddisfi i requisiti, quindi segui questi passaggi:

  1. Crea una query e aggiungila a una dashboard.
  2. Incorpora la query in un'applicazione React utilizzando l'ID dashboard.
  3. Modifica la visualizzazione, se necessario.

Requisiti

Prima di iniziare, sono necessari alcuni elementi:

  • Devi avere accesso a un'istanza di Looker.
  • Che tu stia creando nel framework di estensione o nella tua applicazione React autonoma, è importante eseguire l'autenticazione con l'API Looker e avere accesso all'oggetto SDK Looker. Per saperne di più, consulta l'articolo sull'autenticazione dell'API Looker o sul nostro framework di estensioni.
  • Assicurati di aver installato il pacchetto NPM dei componenti di visualizzazione Looker e il pacchetto NPM @looker/components-data. Le informazioni sull'installazione e sull'utilizzo del pacchetto dei componenti di visualizzazione sono disponibili nel documento README, disponibile in GitHub e NPM.

Passaggio 1: crea una query e aggiungila a una dashboard

Utilizza un'esplorazione per creare una query nella UI di Looker. Aggiungi una visualizzazione supportata all'esplorazione e, facoltativamente, configurane le impostazioni nel menu Impostazioni della visualizzazione.

Crea una nuova dashboard utilizzando questa query. In alternativa, puoi aggiungere la query a una dashboard vuota già creata.

Il componente Query caricherà sempre la visualizzazione dal primo riquadro che è stato aggiunto in ordine cronologico alla dashboard associata, indipendentemente da dove appare il riquadro nel layout della dashboard. Per questo motivo è buona norma utilizzare solo dashboard a riquadro singolo come riferimento alla query.

Il componente Query mostrerà solo la visualizzazione riquadro. Non mostrerà il titolo del riquadro, il titolo della dashboard o altri elementi della dashboard. Eventuali filtri della dashboard applicati al riquadro non avranno effetto sulla visualizzazione incorporata.

Dopo aver creato la dashboard, visualizzala.

Un ID dashboard numerico viene visualizzato nell'URL della dashboard dopo il giorno dashboards/. Copia questo ID per utilizzarlo nel passaggio successivo.

La proprietà dashboard del componente Query accetta solo ID numerici. Non accetta gli ID stringa delle dashboard LookML.

Passaggio 2: incorpora la query in un'applicazione React utilizzando l'ID dashboard

Ora puoi incorporare la query nella tua applicazione React passando l'ID dashboard nella proprietà dashboard del componente Query:

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

export const MyReactApp = ({ sdk: core40SDK }: Props) => {
  return (
    <DataProvider sdk={core40SDK}>
      <Query dashboard={61}>
        <Visualization />
      </Query>
    </DataProvider>
  )
}

Passaggio 3: modifica la visualizzazione, se necessario

D'ora in poi, tutti gli utenti di Looker con accesso in modifica alla dashboard sono liberi di apportare modifiche alla visualizzazione incorporata nella dashboard. Le modifiche verranno visualizzate all'interno dell'applicazione React senza richiedere alcuna modifica al codice.

Per l'accesso in modifica, gli utenti devono disporre del livello di accesso Gestisci accesso, Modifica per la cartella in cui si trova la dashboard, l'accesso al modello al modello su cui si basa la query e le autorizzazioni Looker appropriate per modificare le dashboard.

Esistono due modi per modificare la visualizzazione incorporata:

  • Modifica il riquadro della query nella dashboard oppure
  • Aggiungi un nuovo riquadro di query alla dashboard ed elimina il riquadro originale.

Per modificare il riquadro della query, segui le istruzioni per modificare i riquadri nella pagina della documentazione Modificare le dashboard definite dall'utente e salva le modifiche per uscire dalla modalità di modifica nella dashboard.

Per aggiungere un nuovo riquadro ed eliminare quello originale, segui le istruzioni per aggiungere riquadri delle query per aggiungere il nuovo riquadro. Poi, segui le istruzioni per l'eliminazione dei riquadri per eliminare la visualizzazione indesiderata. Per applicare le modifiche, assicurati che sia presente un solo riquadro nella dashboard, poi salva le modifiche per uscire dalla modalità di modifica nella dashboard.

Una volta modificata e salvata la dashboard, le modifiche alla visualizzazione verranno visualizzate nell'estensione o nell'applicazione React senza richiedere alcuna modifica al codice.

Passaggi successivi