Come modificare l’aspetto grafico di una vista usando i css

Una vista lotus aperta in un browser è molto spartana ma è possibile migliorarla di molto usando i fogli di stile (css); qui spiego come utilizzare i css in una vista lotus per migliorarne l’aspetto grafico e per visualizzare le righe a colori alternati.

  1. crea un database lotus
  2. crea un modulo con quattro campi
    • Employee di tipo testo
    • Salary di tipo numerico
    • Bonus di tipo numerico
    • Supervisor di tipo testo
  3. crea una vista di nome “MyView”
    • In View Selection inserisci il modulo appena creato
    • nelle proprietà della vista, nell’etichetta Advanced (penultima etichetta) spunta “Treat view contents as HTML”; questo è un punto importante perché creerò io il codice HTML per la vista
    • inserisci quattro colonne con questi valori nel Title delle loro proprietà
      • <tr><th>Employee</th>
      • <th>Salary</th>
      • <th>Bonus</th>
      • <th>Supervisor</th></tr>

      nelle colonne inserisco l’header per la tabella, in particolare osserva l’apertura del tag tr nella prima colonna e la sua chiusura nell’ultima

    • inserisci le seguenti formule nelle colonne appena create
      • "<script>
        if("+@DocNumber+"%2!=0)
        document.write(‘<tr class="odd">’);
        else
        document.write(‘<tr>’);
        </script>"
        +"<td>"+Employee+"</td>"
      • "<td>"+@Text(Salary)+"</td>"
      • "<td>"+@Text(Bonus)+"</td>"
      • "<td>"+Supervisor+"</td></tr>"

    anche qui è presente il tag tr nella prima colonna e la sua chiusura nell’ultima; in particolare osserva la formula della prima colonna, il codice javascript è contenuto all’interno del tag “script”, è presente una interessante combinazione fra javascript e @Formulae per inserire l’attributo “class”

  4. crea il foglio di style table.css in Resources/Style Sheets

    questo file è tratto da Horizontal Zebra

  5. crea un modulo di nome “$$ViewTemplate for MyView” contenente
    • un tag <table> inserito come Pass-Thru HTML
    • una embedded view che punta sulla vista MyView e nelle proprietà (prima etichetta) seleziona “Using HTML” in Web Access
    • un tag </table> inserito come Pass-Thru HTML

    form
    e nella sezione del modulo HTML Head Content inserisci

Verifica l’aspetto della vista con alcuni documenti in un browser
view

Puoi scaricare il database di esempio qui.

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.