Widget Custom View

Quando i widget integrati non bastano — un chart specializzato, una board in stile kanban, una mappa interattiva o una tile dashboard compatta — il widget Custom View ti permette di renderizzare la pagina con il tuo JavaScript mentre Bobuild carica i dati in modo sicuro per te. Mantieni autenticazione, filtri e permessi sugli oggetti; scrivi solo lo strato di presentazione.

Scenari tipici:

• una dashboard personalizzata che mescola più oggetti in una schermata;
• una libreria di visualizzazione già standardizzata dai tuoi designer;
• un layout "command center" denso che griglie e Chart da soli non possono esprimere;
• prototipare rapidamente un'idea UI senza attendere un nuovo widget first-party.

Il valore è velocità e controllo: pubblica un'esperienza su misura senza spostare dati fuori da Bobuild o esporre credenziali database grezze.

Come creare una Custom View

1. Trascina un widget Custom View in una pagina.
2. Apri le impostazioni del widget e configura una o più data sources.
3. Scrivi il Custom JS che recupera quelle fonti e renderizza nel container del widget.
4. Imposta facoltativamente una widget width così la vista sta accanto ad altri widget.

Data sources

Ogni data source dice a Bobuild quali record esporre al tuo script:

• Populate [name] with records of type [object] — il name diventa la chiave della fonte nelle richieste
• Filter — quali record includere
• Sort — ordine dei risultati
• Fields — mappa ogni campo dell'oggetto a un nome variabile nel payload JSON (Populate [variable] with [field])

Aggiungi quante data sources ti servono (ad esempio orders e customers sulla stessa vista). Ogni fonte restituisce al massimo 1000 record — progetta i filtri di conseguenza per dataset grandi.

Custom JavaScript

Il tuo script gira nella pagina live. Sono fornite due variabili globali:

Variabile	Scopo
BB_CUSTOMVIEW_URL	URL dell'endpoint per caricare i dati del widget (?view_id=…&action=datasource)
BB_CUSTOMVIEW_CONTAINER	L'elemento DOM dove devi renderizzare l'output del widget

Risposta di BB_CUSTOMVIEW_URL

Chiama BB_CUSTOMVIEW_URL una sola volta a ogni caricamento pagina. Una singola GET restituisce tutte le data source configurate per il widget — non serve una richiesta separata per ogni fonte.

Il corpo JSON è un oggetto le cui chiavi sono i nomi delle data source da Populate [name] with records of type (ad esempio orders, customers). Ogni chiave corrisponde a un array di record per quella fonte. I nomi delle proprietà in ogni record sono i nomi variabile del mapping Fields (Populate [variable] with [field]), non gli identificativi grezzi dei campi oggetto.

Esempio con due fonti denominate orders e customers:

{
  "orders": [
    { "id": 1, "total": 99.5, "customer_id": 42 }
  ],
  "customers": [
    { "id": 42, "name": "Acme Corp" }
  ]
}

Ogni array è limitato a 1000 record (lo stesso limite descritto in Data sources sopra).

Un pattern minimo:

axios.get(BB_CUSTOMVIEW_URL)
  .then(function (response) {
    var orders = response.data.orders;
    var customers = response.data.customers;
    BB_CUSTOMVIEW_CONTAINER.innerHTML =
      '<pre>' + JSON.stringify(response.data, null, 2) + '</pre>';
  });

Sostituisci il dump <pre> con il tuo HTML, libreria di chart o componenti. Tieni presente gestione errori e stati vuoti così gli operatori non restano mai con un riquadro bianco.

Le data source della Custom View sono in sola lettura. Se la tua UI deve creare o aggiornare record, definisci endpoint API (Create / Modify) e autenticati con Browser Session. Chiamali dallo script con credentials: 'include' così viene usata la sessione dell'utente autenticato — nessuna API key nel sorgente della pagina.

suggerimento

Sviluppa lo script prima su un'app di staging. Il codice Custom View gira per ogni visitatore di quella pagina con gli stessi privilegi che la pagina ha già.

Widget width

Nella scheda titolo/impostazioni del widget, Width controlla quanto spazio orizzontale occupa la Custom View: 100%, 75%, 50%, 33%, 25% o 16% (predefinito 100%).

Usa larghezze più strette per posizionare una tile personalizzata accanto a una griglia o a un widget Detail sulla stessa pagina — layout più ricchi senza annidare pagine.