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

L'utilizzo della proprietà dashboard del componente di visualizzazione Query ti consente di eseguire il rendering di una visualizzazione incorporabile che può rispondere alle modifiche all'interfaccia utente di Looker. L'utilizzo della proprietà dashboard (anziché della proprietà query) offre i seguenti vantaggi:

  • La visualizzazione può essere aggiornata da qualsiasi utente di 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 embeddabile che non risponda alle modifiche all'interno dell'interfaccia utente di Looker, segui le istruzioni riportate 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 numerico della dashboard, assicurati che la configurazione soddisfi i requisiti, poi 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. Se necessario, modifica la visualizzazione.

Requisiti

Prima di iniziare, sono necessari alcuni elementi:

  • Devi avere accesso a un'istanza di Looker.
  • Indipendentemente dal fatto che tu stia creando il framework di estensioni o la tua applicazione React autonoma, è importante autenticarsi con l'API di Looker e avere accesso all'oggetto SDK di Looker. Per saperne di più, consulta l'articolo sull'autenticazione dell'API Looker o sul nostro framework di estensione.
  • Assicurati di aver installato il pacchetto NPM dei componenti di visualizzazione di 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, configura le relative 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 aggiunto in ordine cronologico alla dashboard associata, indipendentemente da dove appare nel layout della dashboard. Per questo motivo è buona norma utilizzare dashboard a singolo riquadro come riferimento per le query.

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

Una volta creata, visualizza la dashboard.

Un ID dashboard numerico viene visualizzato nell'URL della dashboard dopo 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

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

Per l'accesso in modifica, gli utenti devono disporre del livello di accesso Manage Access, Edit (Gestione accesso, modifica) per la cartella in cui si trova la dashboard, dell'accesso al modello sul quale si basa la query e delle autorizzazioni di 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 al pannello ed elimina il riquadro originale.

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

Per aggiungere una nuova scheda ed eliminare quella originale, segui le istruzioni per aggiungere riquadri di query. Poi, segui le istruzioni per eliminare i riquadri per eliminare la visualizzazione indesiderata. Affinché le modifiche vengano applicate, assicurati che nella dashboard sia presente un solo riquadro, quindi salva le modifiche per uscire dalla modalità di modifica della dashboard.

Dopo aver modificato e salvato la dashboard, le modifiche alla visualizzazione verranno applicate nell'estensione o nell'applicazione React senza richiedere modifiche al codice.

Passaggi successivi