# Personalizzazione della Toolbar di pannello

**URL:** <https://community.instantdeveloper.com/t/personalizzazione-della-toolbar-di-pannello/893>\
**Category:** Tips & Tricks\
**Tags:** ids, idf\
**Created:** [6 Marzo 2026, 1:47pm UTC](https://community.instantdeveloper.com/t/personalizzazione-della-toolbar-di-pannello/893 "2026-03-06T13:47:50Z")\
**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:** [6 Marzo 2026, 1:47pm UTC](https://community.instantdeveloper.com/t/personalizzazione-della-toolbar-di-pannello/893/1 "2026-03-06T13:47:50Z")

</div>

La toolbar di pannello nelle applicazioni web create con Instant Developer Foundation o Studio viene generata dal framework ed è composta da 10 zone che sono occupate come segue:

- 1 - bottoni Collassamento e Lucchetto
- 2 - Status bar, QBE filter
- 3 - Bottoni di navigazione
- 4 - Bottoni Lista/Dettaglio, Cerca, Trova, Annulla, Ricarica
- 5 - Bottone Cancella
- 6 - Bottoni Inserisci, Salva e Duplica
- 7 - Bottoni Stampa, Esporta e Allega
- 8 - Bottoni Custom
- 9 - Bottoni associati al pannello
- 10 - Vuota

Per personalizzare la posizione di queste zone e quindi cambiare di posizione i bottoni esiste il metodo di applicazione _[initCommandZone](https://doc.instantdeveloper.com/?ARTID=0A670CDD-F09A-43BB-9F17-EEB763B8D846&LANG=ita)_ che permette di riposizionarle.

Il metodo va utilizzato prima di aprire le videate e quindi nell’evento _Inizilize_ o in _AfeterLogin_ e la modifica vale per tutta la sessione.

Un esempio di modifica della toolbar può essere il seguente.

```auto
event WebApp.Initialize()
{
  WebApp.initCommandZone(FormList, 0, 2)
  WebApp.initCommandZone(Update, 0, 3)
  WebApp.initCommandZone(Delete, 0, 4)
  WebApp.initCommandZone(Duplicate, 0, 4)
  WebApp.initCommandZone(Insert, 0, 4)
  WebApp.initCommandZone(Refresh, 0, 5)
  WebApp.initCommandZone(Navigate, 0, 9)
  WebApp.initCommandZone(0, StatusBar, 10)
}

```

Con questa impostazione l’aspetto della toolbar con il pannello in visualizzazione è questo:

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

Con il pannello in modifica:

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

L’ordine di un gruppo di bottoni come ad esempio _Inserisci, Salva e Duplica_ se presenti nella stessa zona è quello in cui sono scritti nella lista in alto.

Per mettere il bottone _Salva_ separato e per primo dai suoi fratelli _Inserisci e Duplica_ li ho dovuto posizionare in zone diverse (vedi l’ultimo parametro del metodo).

Vi allego un piccolo progetto di esempio  
[Personalizzazione Toolbar Fluid.zip](https://community.instantdeveloper.com/uploads/short-url/pQ4SRTsMMYN8dQXFKIGSazvWpgq.zip) (485,2 KB)