I controlli Form Table e Form Layout Row della Extension Library

I controlli Form Table e Form Layout Row consentono di implementare facilmente un modulo con i campi e le relative etichette.
In questo articolo utilizzo questi due controlli per convertire in xpage il modulo “Document” di un database che eredita dal template Doc Library – Notes & web (8.5).

  1. crea un database lotus che eredita dal template Doc Library – Notes & web (8.5) e togli la spunta a “Inherit future design changes”
    new database
  2. crea una xpage
  3. espandi Extension Library sotto l’etichetta Controls, seleziona Form Table e trascinalo sulla xpage
    form table
  4. seleziona Form Table sulla Outline e inserisci Doc Library nel Form title e Main Topic nel Form description
  5. seleziona XPage nell’Outline e sotto l’etichetta Properties -> Data aggiungi una nuova “Data Sources” usando il pulsante Add, scegliendo Domino Document e imposta gli altri parametri come in figura
    data source
  6. inserisci il controllo Form Layout Row all’interno dei Form Table come in figura
    form layout row
  7. espandi l’etichetta Dojo Form sotto Controls e inserisci un controllo Dojo Text Area in Form Layout Row come in figura
    dojo text area
  8. seleziona il controllo Dojo Text Area e sotto Properties -> Data e imposta “Data source” uguale a “document1” e “bind to” uguale a “Subject”
    subject
  9. esegui i punti 6, 7 e 8 in modo analogo per il campo Categories
  10. esegui i punti 6, 7 e 8 in modo analogo per il campo Body ma utilizza un controllo Rich Text sotto Core Controls invece di Dojo Text Area e lascia l’etichetta vuota; il risultato finale dovrebbe apparire così
    document
  11. lancia l’anteprima
    preview

Puoi provare a impostare le proprietà dei controlli come ad esempio labelPosition che permette di posizionare l’etichetta relativamente al campo; osserva anche che alcune di queste proprietà possono essere ereditate dal controllo Form Table al controllo Form Layout Row.

4 risposte a “I controlli Form Table e Form Layout Row della Extension Library”

    1. The space between the row is because of the following css styles:

      Then you can override that, select Form Table, go to All Properties -> styling -> styleClass and add a style sheet with code:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.