.. _widgetpedia/elements/gnrwidgets/formbuilder:

formbuilder
===========

.. toctree::
   :maxdepth: 1
   :hidden:
   :titlesonly:


   field



Il formbuilder è un modo per creare con pochi parametri una form costituita da campi abbinati ad un'etichetta e presentati su una o più colonne.

A basso livello il risultato del formbuilder è una *table* HTML in cui ciascun campo ed etichetta sono all'interno di un *td* e ciascuna riga è all'interno di un *td*.

Vediamo un semplice esempio:

.. raw:: html

 <div class="gnrexamplebox">
            <a class="gnrexamplebox_title" onclick='gnrExampleIframe(this.nextElementSibling,{"height": 200, "width": "100%", "examples_root": "https://dev.genropy.org/webpages/docu_examples", "examples_root_local": "", "example_folder": "widgetpedia/elements/gnrwidgets/formbuilder", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "Esempio di formbuilder ", "example_name": "_base_"} );'>
                Esempio di formbuilder 
            </a>
            <div></div>
        </div> 
        

Come si usano gli attributi ``lbl`` per mettere le etichette sopra i campi:

.. raw:: html

 <div class="gnrexamplebox">
            <a class="gnrexamplebox_title" onclick='gnrExampleIframe(this.nextElementSibling,{"height": 200, "width": "100%", "examples_root": "https://dev.genropy.org/webpages/docu_examples", "examples_root_local": "", "example_folder": "widgetpedia/elements/gnrwidgets/formbuilder", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "Esempio con attributi lbl ", "example_name": "lbl_attributes"} );'>
                Esempio con attributi lbl 
            </a>
            <div></div>
        </div> 
         

È poi possibile impostare una larghezza di campi fissa con ``fld_width``:

.. raw:: html

 <div class="gnrexamplebox">
            <a class="gnrexamplebox_title" onclick='gnrExampleIframe(this.nextElementSibling,{"height": 200, "width": "100%", "examples_root": "https://dev.genropy.org/webpages/docu_examples", "examples_root_local": "", "example_folder": "widgetpedia/elements/gnrwidgets/formbuilder", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "Esempio con fld_width ", "example_name": "fld_attributes"} );'>
                Esempio con fld_width 
            </a>
            <div></div>
        </div> 
        

.. hint::  
  Per vedere il formbuilder all'azione si rimanda alla lezione dedicata nel `Corso Base di Genropy <https://docs.genropy.org/corso_genropy/formbuilder.html>`_
  
mobileFormBuilder
-----------------
Il mobileFormBuilder è una versione particolare del formBuilder studiata appositamente per una migliore visualizzazione sui dispositivi mobile. A differenza del formBuilder tradizionale le etichette sono di default collocate sopra al campo invece che a sinistra, mentre le dimensioni dei font e la gestione degli spazi sono ottimizzate per spazi più verticali che orizzontali.

.. raw:: html

 <hr>

**Parametri:**

+------------------------+------+--------------------------------------------------+
|     Nome parametro     | Tipo |                   Descrizione                    |
+========================+======+==================================================+
|cols                    |L     |Stabilisce il numero di colonne (es: cols=3)      |
+------------------------+------+--------------------------------------------------+
|table                   |T     |Permette di indicare una table a cui riferire i   |
|                        |      |vari "field" del formbuilder (es:                 |
|                        |      |table='fatt.fattura')                             |
+------------------------+------+--------------------------------------------------+
|byColumn                |B     |Permette di percorrere il formbuilder con il      |
|                        |      |tabulatore in verticale (per colonna) anziché in  |
|                        |      |orizzontale (per riga)                            |
+------------------------+------+--------------------------------------------------+
|                                 *Html Parametri*                                 |
+------------------------+------+--------------------------------------------------+
|_class                  |T     |Permette di assegnare una specifica classe CSS al |
|                        |      |widget                                            |
+------------------------+------+--------------------------------------------------+
|height                  |T     |Permette di assegnare un'altezza al widget        |
+------------------------+------+--------------------------------------------------+
|width                   |T     |Permette di assegnare una larghezza al widget     |
+------------------------+------+--------------------------------------------------+
|border                  |T     |Permette di assegnare un bordo al widget          |
+------------------------+------+--------------------------------------------------+
|rounded                 |L     |Permette di assegnare un arrotondamento al widget |
+------------------------+------+--------------------------------------------------+
|style                   |T     |Permette di assegnare uno stile (da esprimersi    |
|                        |      |come serie di attributi CSS) al widget            |
+------------------------+------+--------------------------------------------------+
|background              |T     |Permette di assegnare uno sfondo al widget        |
+------------------------+------+--------------------------------------------------+
|                                 *CSS Parametri*                                  |
+------------------------+------+--------------------------------------------------+
|tblclass                |T     |Permette di assegnare una classe css all'intera   |
|                        |      |tabella                                           |
+------------------------+------+--------------------------------------------------+
|lblclass                |T     |Permette di assegnare una classe css alle label   |
|                        |      |del formbuilder                                   |
+------------------------+------+--------------------------------------------------+
|fieldclass              |T     |Permette di assegnare una classe css ai field del |
|                        |      |formbuilder                                       |
+------------------------+------+--------------------------------------------------+
|                               *Columns Parametri*                                |
+------------------------+------+--------------------------------------------------+
|colswidth               |T     |Permette di indicare la larghezza delle colonne   |
|                        |      |del formbuilder (es: colswidth='100%')            |
+------------------------+------+--------------------------------------------------+
|                                *Label Parametri*                                 |
+------------------------+------+--------------------------------------------------+
|lblpos                  |T     |Permette di indicare dove posizionare le label, di|
|                        |      |default è lblpos='L' (valori alternativi: 'T', per|
|                        |      |mostrare la lbl sopra al campo)                   |
+------------------------+------+--------------------------------------------------+
|lblalign                |T     |Permette di personalizzare l'allineamento delle   |
|                        |      |label del formbuilder, di default lbl_align='left'|
+------------------------+------+--------------------------------------------------+
|lblvalign               |T     |Permette di personalizzare l'allineamento         |
|                        |      |verticale delle label del formbuilder, di default |
|                        |      |lbl_align='top'                                   |
+------------------------+------+--------------------------------------------------+
|                                *Field Parametri*                                 |
+------------------------+------+--------------------------------------------------+
|fldalign                |T     |Permette di personalizzare l'allineamento dei     |
|                        |      |field del formbuilder, di default fld_align='left'|
+------------------------+------+--------------------------------------------------+
|fldvalign               |T     |Permette di personalizzare l'allineamento         |
|                        |      |verticale dei field del formbuilder, di default   |
|                        |      |fld_align='top'                                   |
+------------------------+------+--------------------------------------------------+