# Aggiungere comandi alla toolbar di una web app Foundation

**URL:** <https://community.instantdeveloper.com/t/aggiungere-comandi-alla-toolbar-di-una-web-app-foundation/895>\
**Category:** Tips & Tricks\
**Tags:** ids, idf\
**Created:** [16 Marzo 2026, 10:37am UTC](https://community.instantdeveloper.com/t/aggiungere-comandi-alla-toolbar-di-una-web-app-foundation/895 "2026-03-16T10:37:56Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![paolo.giannelli](https://community.instantdeveloper.com/user_avatar/community.instantdeveloper.com/paolo.giannelli/32/12_2.png) [@paolo.giannelli](https://community.instantdeveloper.com/u/paolo.giannelli)\
**Post date:** [16 Marzo 2026, 10:37am UTC](https://community.instantdeveloper.com/t/aggiungere-comandi-alla-toolbar-di-una-web-app-foundation/895/1 "2026-03-16T10:37:56Z")

</div>

Nelle applicazioni web realizzate con **Instant Developer Foundation** e **Studio** è presente una barra di applicazione che contiene:

- il bottone per collassare o aprire il menu
- la caption dell’applicazione
- il campo dei comandi
- il bottone del debug
- il bottone di logout

 ![image](https://community.instantdeveloper.com/uploads/default/original/1X/420520227a65cd8b78977bae8c9d1941a8857a00.png)

Come possiamo aggiungere altri bottoni in quest’area?  
Lo facciamo utilizzando un _CommandSet_ di applicazione che ha la proprietà _Toolbar_ a true e la proprietà _Menu_ a false.

A questo _CommandSet_ aggiungiamo i _Command_ che ci occorrono nella nostra applicazione.  
I _Command_ possono essere di solo testo oppure utilizzare solamente un’icona che occupa meno spazio e in questo modo possiamo metterne diversi senza ingombrare troppo.

Compilando anche la proprietà _Descrizione_ del _Command_ avremo un tooltip che ci indica cosa fa il nostro comando e per esempio potremmo metterci questi:

- Informazioni sull’applicazione (versione installata e data di rilascio)
- Informazioni utente di login
- Cambio password

Il nostro _CommandSet_ che con molta fantasia chiamiamo _Toolbar_ può essere posizionato insieme ai comandi già presenti oppure sotto di essi; questo dipende dal parametro di compilazione _Posizione toolbar applicazione_, presente nella sezione _Layout_, che può valere:

- _Dentro_ - la toolbar sarà mostrata dentro all’intestazione dell’applicazione
- _Sotto_ - la toolbar sarà mostrata sotto l’intestazione dell’applicazione

A seconda del motore grafico utilizzato avremo un possibile posizionamento diverso della toolbar di applicazione:

- RD3 - solamente sotto
- RD3 Bootstrap - solamente dentro
- Fluid - dentro e sotto

Nel caso che la toolbar aggiuntiva sia sotto i bottoni sono allineati a sinistra e non a destra come di vede qui sotto.

 ![image](https://community.instantdeveloper.com/uploads/default/original/1X/a826d85bd12d9aa0ea4b49569dc465b8530b9796.png)

Il tipo di icone che possiamo utilizzare varia a seconda del motore grafico utilizzato:

- RD3 - file immagine
- RD3 Bootstrap - file immagine e icone vettoriali
- Fluid file immagine e icone vettoriali

Vi ricordo che per utilizzare le icone vettoriali presenti nel tema grafico occorre impostare il nome dell’icona nel titolo del _Command_ utilizzando la sintassi:

`{{icon-nome-icona}}`

Per Fluid è possibile spostare la posizione dei bottoni aggiuntivi dopo il campo dei comandi utilizzando la seguente regola css:

```auto
div.main-global-toolbar:not(.bottom) {
    order: 3 !important;
}

```