Quando si sviluppa un componente aggiuntivo per Google Workspace, uno degli aspetti da non trascurare è l’interfaccia grafica. Google mette a disposizione un pacchetto CSS ufficiale che permette di realizzare interfacce coerenti con lo stile di Google Docs, Fogli, Presentazioni e Moduli.

Il vantaggio è semplice: invece di ricreare da zero pulsanti, campi di testo, checkbox, menu e altri elementi dell’interfaccia, possiamo partire dagli stili messi a disposizione da Google.

Il pacchetto CSS per Google Workspace Add-ons

Per utilizzare gli stili ufficiali è sufficiente includere il foglio CSS all’interno della parte iniziale del proprio file HTML:

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">

Una volta caricato il foglio di stile possiamo utilizzare le classi previste da Google per costruire l’interfaccia del nostro add-on.

Tipografia e testi

Il pacchetto utilizza una tipografia pensata per integrarsi con l’interfaccia degli editor Google. La documentazione indica Arial come carattere di riferimento e mette a disposizione classi per distinguere testi normali, secondari, messaggi di errore e altre informazioni dell’interfaccia.

<h1>Titolo del componente</h1>
<b>Testo importante</b>
<span class="gray">Informazione secondaria</span>
<span class="error">Messaggio di errore</span>

Pulsanti già pronti

Il CSS ufficiale consente di utilizzare normali elementi HTML come button, input e link trasformati in pulsanti. Sono inoltre disponibili classi dedicate alle diverse tipologie di azione.

<button class="action">Salva</button>
<button>Annulla</button>
<button class="create">Crea</button>
<button class="share">Condividi</button>

In questo modo è possibile distinguere visivamente l’azione principale dalle operazioni secondarie senza dover definire manualmente tutto il CSS.

Checkbox e radio button

Il pacchetto comprende anche gli stili per checkbox e pulsanti di opzione. Possiamo quindi continuare a utilizzare il normale markup HTML.

<div>
    <input type="checkbox" id="notifiche" checked>
    <label for="notifiche">Attiva notifiche</label>
</div>

Lo stesso principio vale per i radio button e per gli elementi disabilitati.

Menu select

Per creare un menu a tendina possiamo utilizzare un contenitore con le classi previste dal pacchetto:

<div class="block form-group">
    <label for="servizio">Servizio</label>
    <select id="servizio">
        <option>Google Docs</option>
        <option>Google Forms</option>
        <option>Google Sheets</option>
    </select>
</div>

Google segnala tuttavia che l’aspetto degli elementi select non può essere controllato completamente in tutti i browser. È quindi opportuno effettuare sempre dei test sui browser che intendiamo supportare.

Campi di testo e textarea

Naturalmente sono disponibili anche gli stili per input testuali e textarea, elementi particolarmente importanti quando realizziamo un add-on che deve raccogliere informazioni dall’utente.

<div class="block form-group">
    <label for="nome">Nome</label>
    <input type="text" id="nome">
</div>

<div class="block form-group">
    <label for="testo">Messaggio</label>
    <textarea id="testo" rows="5"></textarea>
</div>

Creare una sidebar per Google Workspace

Un caso particolarmente interessante riguarda le sidebar. Nei componenti aggiuntivi è spesso necessario mantenere una parte dell’interfaccia scorrevole e, contemporaneamente, lasciare un’area di branding nella parte inferiore.

Il pacchetto mette a disposizione classi come sidebar e bottom, che possono essere utilizzate come base per organizzare questo tipo di layout.

<div class="sidebar">
    <div class="block form-group">
        <label for="testo"><b>Contenuto</b></label>
        <textarea id="testo" rows="15"></textarea>
    </div>

    <div class="block">
        <button class="action">Elabora</button>
        <button>Inserisci</button>
    </div>
</div>

<div class="sidebar bottom">
    <span class="gray">Il mio Google Workspace Add-on</span>
</div>

Perché utilizzare il CSS ufficiale di Google

Utilizzare il pacchetto CSS ufficiale permette soprattutto di concentrarsi sulla funzionalità del componente aggiuntivo senza perdere tempo nel ricostruire da zero gli elementi base dell’interfaccia.

Il risultato è inoltre più coerente con l’ambiente nel quale l’add-on viene utilizzato. Pulsanti, campi e controlli risultano familiari all’utente e l’interfaccia appare maggiormente integrata con Google Workspace.

Il pacchetto CSS non sostituisce naturalmente una buona progettazione dell’interfaccia: rimane importante mantenere l’add-on semplice, leggibile e verificare il comportamento dei controlli nei diversi browser.

Documentazione ufficiale

Per consultare tutti gli esempi e verificare eventuali aggiornamenti è consigliabile fare riferimento alla documentazione ufficiale Google Workspace per il pacchetto CSS degli add-on.