Creare estensioni dei riquadri degli edifici

A partire da Looker 24.0, le estensioni possono essere sviluppate per essere eseguite in un riquadro delle dashboard. Le estensioni che supportano l'esecuzione come riquadro o visualizzazione possono essere aggiunte mentre la dashboard è in modalità di modifica o salvate in una dashboard come visualizzazione da un'esplorazione. Le estensioni possono anche essere configurate come riquadri nelle dashboard LookML.

Sono disponibili esempi di estensioni che possono essere utilizzate come riquadri delle dashboard:

• L'estensione di visualizzazione dei riquadri mostra come creare una visualizzazione personalizzata utilizzando il framework delle estensioni.
• L'estensione SDK per i riquadri mostra i metodi API disponibili specifici per le estensioni dei riquadri.

Utilizzare l'SDK per le estensioni di Looker con le estensioni dei riquadri

Per caricare le estensioni come riquadri in una dashboard, è necessario definire il mount_points parametro nel file manifest del progetto LookML. Esistono due tipi di mount_points correlati alle estensioni dei riquadri:

  mount_points: {
    dashboard_vis: yes
    dashboard_tile: yes
    standalone: yes
  }

• dashboard_vis — quando è abilitata, l'estensione viene visualizzata nelle opzioni di visualizzazione di un'esplorazione, dove può essere selezionata come visualizzazione e salvata come riquadro della dashboard. Quando viene eseguita la dashboard, questa esegue la query associata al riquadro e rende i dati disponibili per l'estensione. Questo è simile al funzionamento delle visualizzazioni personalizzate. La differenza principale tra una visualizzazione personalizzata e un'estensione in esecuzione in un riquadro della dashboard con dashboard_vis abilitata è che l'estensione può effettuare chiamate a API Looker.
• dashboard_tile — quando è abilitata, l'estensione viene visualizzata nel riquadro Estensioni visualizzato quando un utente modifica una dashboard e seleziona l'opzione Estensioni dopo aver fatto clic sul pulsante Aggiungi. Questo tipo di estensione è responsabile del recupero dei propri dati, anziché della query del riquadro che fornisce automaticamente i dati all'estensione.

Un punto di montaggio aggiuntivo, standalone, fa sì che l'estensione venga visualizzata nella sezione Applicazioni del menu principale di Looker. È possibile definire più punti di montaggio per un'estensione. In fase di runtime, l'estensione riceve una notifica relativa alla modalità di montaggio e può modificare il proprio comportamento di conseguenza. Ad esempio, le estensioni standalone potrebbero dover impostare la propria altezza, mentre le estensioni dei riquadri no.

API aggiuntive per le estensioni dei riquadri

In fase di runtime, le estensioni dei riquadri ricevono API e dati aggiuntivi. Questi vengono ottenuti dal contesto dell'estensione:

const {
  tileSDK,
  tileHostData,
  visualizationData,
  visualizationSDK,
} = useContext(ExtensionContext40)

• tileSDK: fornisce funzioni specifiche per i riquadri per consentire all'estensione di interagire con l'host della dashboard Looker. Ad esempio, per consentire all'estensione di visualizzare e cancellare i messaggi di errore.
• tileHostData: fornisce i dati dei riquadri all'estensione. I dati vengono aggiornati automaticamente in base alle interazioni con la dashboard di hosting. Un esempio è l'indicatore isDashboardEditing.
• visualizationSDK: fornisce funzioni specifiche per le visualizzazioni per consentire all'estensione di interagire con l'host della dashboard Looker. Un esempio è la funzione updateRowLimit.
• visualizationData: fornisce i dati di visualizzazione all'estensione. I dati vengono aggiornati automaticamente in base alle interazioni con la dashboard di hosting. I dati sono simili a quelli forniti alle visualizzazioni personalizzate.

Creare estensioni reattive

Le dimensioni degli iframe in cui vengono eseguite le estensioni vengono ridimensionate automaticamente quando viene ridimensionata la finestra host di Looker principale. Questo si riflette automaticamente nella finestra dei contenuti dell'iframe. Il componente iframe non ha padding o margini, quindi è l'estensione a dover fornire il proprio padding e i propri margini in modo che appaia coerente con l'applicazione Looker. Per le estensioni autonome, è l'estensione a dover controllare l'altezza dell'estensione. Per le estensioni eseguite nei riquadri delle dashboard o nelle visualizzazioni di esplorazione, la finestra dei contenuti dell'iframe verrà impostata automaticamente sull'altezza resa disponibile dall'iframe.

Considerazioni sul rendering

È importante notare che le estensioni dei riquadri vengono sottoposte a rendering quando una dashboard viene scaricata come PDF o immagine. Il renderer si aspetta che il riquadro lo avvisi al termine del rendering. In caso contrario, il renderer smetterà di rispondere. Di seguito è riportato un esempio di come avvisare il renderer che il riquadro è stato sottoposto a rendering.

  const { extensionSDK } = useContext(ExtensionContext40)

  useEffect(() => {
    extensionSDK.rendered()
  }, [])

Inoltre, le animazioni devono essere disattivate durante il rendering. Di seguito è riportato un esempio in cui le configurazioni delle animazioni vengono disattivate durante il rendering:

  const { lookerHostData} = useContext(ExtensionContext40)
  const isRendering = lookerHostData?.isRendering

  const config = isRendering
    ? {
        ...visConfig,
        valueCountUp: false,
        waveAnimateTime: 0,
        waveRiseTime: 0,
        waveAnimate: false,
        waveRise: false,
      }
    : visConfig

  if (mountPoint === MountPoint.dashboardVisualization) {
    return <VisualizationTile config={config} />
  }

Funzioni e proprietà dell'SDK per i riquadri

L'SDK per i riquadri fornisce funzioni che consentono a un'estensione dei riquadri di interagire con la dashboard di hosting.

Le funzioni e le proprietà disponibili sono riportate nella tabella seguente:

Dati dell'SDK per i riquadri

Le proprietà dei dati dell'SDK per i riquadri disponibili sono riportate nella tabella seguente:

Funzioni e proprietà dell'SDK per le visualizzazioni

Le funzioni e le proprietà dell'SDK per le visualizzazioni disponibili sono riportate nella tabella seguente:

Dati dell'SDK per le visualizzazioni

L'SDK per le visualizzazioni è costituito da:

• Dati di configurazione della visualizzazione
• Dati di risposta della query

Dati di configurazione della visualizzazione

export interface VisualizationConfig {
  queryFieldMeasures: Measure[]
  queryFieldDimensions: Dimension[]
  queryFieldTableCalculations: TableCalculation[]
  queryFieldPivots: PivotConfig[]
  visConfig: RawVisConfig
}

Dati di risposta della query

Utilizzare l'SDK Embed

L'utilizzo dell'SDK Embed in un'estensione dei riquadri non è consigliato per i seguenti motivi:

• È possibile che l'estensione finisca per eseguire il rendering di una dashboard in cui l'estensione è un riquadro. Il framework delle estensioni non è in grado di rilevarlo e, di conseguenza, il browser potrebbe bloccarsi.
• Il rendering PDF dei contenuti incorporati all'interno di un'estensione dei riquadri non funziona.