Utilizzare i componenti di visualizzazione e la proprietà della dashboard per eseguire una visualizzazione semplice

Utilizzando la proprietà dashboard del componente di visualizzazione Query puoi visualizzare una visualizzazione incorporabile in grado di rispondere alle modifiche alla UI di Looker. L'utilizzo della proprietà dashboard (e non 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 alcuna modifica all'estensione di cui è stato eseguito il deployment o all'applicazione React.

Se vuoi creare una visualizzazione incorporabile che non risponde alle modifiche nell'interfaccia utente di Looker, segui le istruzioni riportate nella pagina della documentazione Utilizzo dei componenti di visualizzazione e della proprietà query.

Per eseguire il rendering di una visualizzazione incorporabile utilizzando i componenti di visualizzazione di Looker e un ID dashboard numerico, assicurati che la tua 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 della dashboard.
  3. Se necessario, modifica la visualizzazione.

Requisiti

Prima di iniziare, sono necessari alcuni elementi:

  • Devi avere accesso a un'istanza di Looker.
  • Che tu stia creando il framework di estensione o la tua applicazione autonoma React, è importante eseguire l'autenticazione con l'API di Looker e accedere all'oggetto dell'SDK Looker. Per ulteriori informazioni, consulta la sezione Autenticazione API Looker o il nostro framework delle estensioni.
  • Assicurati di aver installato il pacchetto NPM dei componenti di visualizzazione Looker e il pacchetto NPM @looker/components-data. Puoi trovare informazioni sull'installazione e sull'utilizzo del pacchetto dei componenti di visualizzazione 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 all'interno dell'interfaccia utente di Looker. Aggiungi una visualizzazione supportata a Esplora e, se vuoi, configura le impostazioni nel menu Impostazioni della visualizzazione.

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

Il componente Query caricherà sempre la visualizzazione dal primo riquadro che è stato aggiunto cronologicamente alla dashboard associata, a prescindere dalla posizione in cui viene visualizzato nel riquadro della dashboard. Per questo motivo è buona norma utilizzare come riferimento di query solo le dashboard a riquadro singolo.

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

Dopo averla creata, visualizzala.

Dopo il giorno dashboards/ viene visualizzato un ID numerico della dashboard nell'URL della dashboard. 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 nell'applicazione React passando l'ID della 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>
  )
}

Ecco come verrà visualizzata la visualizzazione all'interno dell'estensione o dell'applicazione React:

Passaggio 3: se necessario, modifica la visualizzazione

Qualsiasi utente di Looker con accesso in modifica alla dashboard è libero di apportare modifiche alla visualizzazione incorporata nella dashboard e le modifiche appariranno nell'applicazione React senza richiedere alcuna modifica al codice.

Per disporre dell'accesso in modifica, gli utenti devono disporre del livello di accesso Gestione accesso, modifica per la cartella in cui si trova la dashboard, dell'accesso del modello al modello su cui 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 di query nella dashboard
  • Aggiungi un nuovo riquadro di query alla dashboard ed elimina il riquadro originale.

Per modificare il riquadro di query, segui le istruzioni per la modifica dei riquadri nella pagina di 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, segui le istruzioni per aggiungere i riquadri di query. Successivamente, segui le istruzioni per eliminare i riquadri per eliminare la visualizzazione indesiderata. Per applicare le modifiche, assicurati che sulla dashboard sia presente un solo riquadro e poi salva le modifiche per uscire dalla modalità di modifica.

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

Passaggi successivi