Personalizzazione

Personalizzare l'aspetto della tua app è il modo più rapido per far sentire un portale come tuo prodotto — non uno strumento generico. Logo, colore della navbar, CSS, JavaScript e un footer condiviso trasformano un backoffice funzionale in qualcosa che staff e cittadini riconoscono, con spazio per analytics, helper di accessibilità o note legali senza ricostruire le pagine una per una.

Scenari tipici:

• allineare logo e colore navbar alle linee guida del brand aziendale in pochi minuti;
• ritoccare spaziatura o tipografia con CSS così le griglie dense restano leggibili;
• aggiungere un piccolo helper JavaScript (analytics, chat widget, scorciatoia da tastiera) su ogni pagina;
• mostrare una privacy policy o una dichiarazione di accessibilità in un footer condiviso in tutta l'app.

Apri Customize dalla sidebar del Builder (nell'area impostazioni).

Logo, favicon e colore navbar

Logo

Imposta l'immagine nella barra superiore in uno dei due modi:

• Logo URL — link a un'immagine ospitata altrove (anteprima live una volta impostato l'URL)
• Upload an image — PNG, JPEG, GIF, WebP o SVG memorizzati da Bobuild (alternativa a un URL; usa Remove per tornare a un URL o cancellare il logo)

Il Title dell'app (sotto Settings) viene usato come testo alternativo del logo.

Favicon

Carica una favicon personalizzata per schede del browser e preferiti — PNG, ICO, JPEG, GIF, WebP o SVG (max 512 KB). Anteprima e Remove sono sulla stessa pagina Customize. Quando non carichi una favicon, Bobuild usa la sua icona predefinita.

Colore navbar

Imposta Navbar Color — colore HTML per la navbar superiore (selettore colore o valore hex; l'etichetta UI resta Navbar Color).

Il colore primario della navbar influenza anche la sensazione generale di pulsanti e chrome nell'app live.

Esempio

How to configure it in the builder

How it looks like in the resulting app

CSS personalizzato

Se hai esigenze più sofisticate, aggiungi regole CSS personalizzate per la tua app — font, spaziatura, colori o animazioni leggere.

Il modo migliore per scoprire gli identificatori degli elementi è un ispettore DOM del browser (ad esempio Chrome DevTools). Preferisci gli hook pubblici così le regole non si rompono quando cambiano gli interni, e limita lo scope così non si propagano su tutto il prodotto:

• [data-bobuild-page-url="/foo/bar"] o .bobuild-page — limita una regola a una pagina specifica
• [data-bobuild-view-id="xxxxxxx"] o .bobuild-view — limita una regola a un Widget specifico
• [data-bobuild-field="status"] o .bobuild-field — mira al wrapper di un campo form

Non basarti su selettori interni come .app-page, .app-view, [data-url], [data-view-id] o classi Selectize — non fanno parte del contratto pubblico e possono cambiare senza preavviso. Il Builder può mostrare avvisi consultivi quando il CSS personalizzato usa quei pattern.

Se hai dubbi, contattaci senza esitazione. Possiamo aiutarti a capire quali regole CSS usare.

Esempio

How to configure it in the builder

How it looks like in the resulting app

JavaScript personalizzato

Il box Custom JS viene eseguito sulle pagine live della tua app. Usalo per miglioramenti leggeri che non stanno dentro un singolo Widget: snippet analytics, widget di terze parti o piccoli helper UX.

Mantieni gli script focalizzati e difensivi. Preferisci l'API pubblica stabile Bobuild poiché ogni altra chiamata non è ufficialmente supportata e potrebbe cambiare senza preavviso. Per schermate personalizzate più ricche e guidate dai dati, preferisci un Widget Custom View — Custom JS è ideale per comportamenti globali condivisi tra le pagine.

Il Builder può mostrare avvisi consultivi (non bloccanti) quando Custom CSS o Custom JS corrispondono a pattern fragili comuni (selettori interni, helper deprecati). La stessa scansione compare in App Health.

suggerimento

Prova Custom JS prima su un'app di staging. Un errore di sintassi qui colpisce ogni pagina per ogni utente.

API pubblica (window.Bobuild)

Custom JS viene iniettato in fondo al body della pagina live (dopo gli script della piattaforma). Dopo i reload AJAX dei Widget, usa gli eventi di lifecycle per seguire gli aggiornamenti.

Form

Metodo	Scopo
Bobuild.getFieldValue(viewId, fieldName)	Legge il valore corrente del campo (scalari, boolean, array per campi multi-valore)
Bobuild.setFieldValue(viewId, fieldName, value)	Imposta il valore e aggiorna il controllo
Bobuild.setFieldError(viewId, fieldName, message)	Mostra un messaggio di validazione; passa null o '' per cancellarlo

Non esiste getFieldEl() — non raschiare il markup dei campi.

View e pagina

Metodo	Scopo
Bobuild.reloadView(viewElOrId)	Ricarica una view filtrabile (griglia e simili) senza refresh completo della pagina
Bobuild.getView(viewId)	Elemento root del Widget, oppure null
Bobuild.getPage()	Elemento root della pagina, oppure null

UX

Metodo	Scopo
Bobuild.alert(message)	Alert non bloccante nel chrome dell'app
Bobuild.confirm(message)	Promise che risolve a true / false
Bobuild.announce(message)	Annuncio accessibilità nella live region
Bobuild.openModal(url) / Bobuild.closeModal()	Modal popup della piattaforma
Bobuild.redirect(url, opts)	Navigazione (pagina intera e/o popup)

Eventi

Bobuild.on(eventName, filterOrHandler, handler?);
Bobuild.off(eventName, filterOrHandler, handler?);

Evento	Quando
view:load	Un root di Widget è stato (ri)inizializzato dopo load o AJAX
page:load	Il container della pagina ha finito l'init
field:change	Il valore logico del campo è cambiato ({ viewId, fieldName, value })
form:before-submit	Prima del POST di salvataggio del form — annullabile; gli handler possono essere async

Filtri (dove supportati): { viewId }, oppure { viewId, fieldName } per field:change.

Esempio — blocca l'invio e mostra un errore di campo:

Bobuild.on('form:before-submit', { viewId: 'abc123' }, async (event) => {
  const ok = await validateAsync();
  if (!ok) {
    event.preventDefault();
    Bobuild.setFieldError('abc123', 'year', 'This year is already in use.');
  }
});

Esempio — ricarica una griglia:

Bobuild.reloadView('xyz789');

Hook DOM per CSS e identità

Attributi pubblici (additivi rispetto a quelli interni): data-bobuild-page, data-bobuild-view, data-bobuild-view-id, data-bobuild-view-type, data-bobuild-field, data-bobuild-field-type. Classi CSS opzionali: bobuild-page, bobuild-view, bobuild-field, bobuild-view-contents.

Non fare affidamento su altri selettori non documentati qui poiché potrebbero essere modificati o rimossi senza preavviso.

Gli script Custom View ricevono BB_CUSTOMVIEW_URL e BB_CUSTOMVIEW_CONTAINER.

HTML footer personalizzato

Custom Footer HTML viene incluso in fondo a ogni pagina. Usi comuni:

• link legali (privacy, cookie, termini)
• dichiarazioni di accessibilità o contatti richieste dalla tua organizzazione
• piccole righe di branding che non devono mai mancare su una nuova pagina

Incolla HTML valido. Tienilo compatto — i footer compaiono su form, griglie e portali pubblici allo stesso modo.