Formattazione condizionale nei page layout (o quasi)

L’argomento di questo post è un piccolo trick da cui spero possiate prendere spunto per le più disparate varianti. Partiamo come sempre dal descrivre l’esigenza: formattare diversamente un elemento di un page layout a seconda del valore di un page field. In questo esempio andremo a cambiare lo stile del titolo della nostra pagina a seconda del valore di un page field visibile unicamente in fase di edit della pagina.

Abbiamo quindi (almeno) due page field: Titolo – single line of text – e Categoria – choice -. In base al valore di Categoria il titolo avrà caratteristiche (font, colore, dimensioni, ecc…) differenti.

Per prima cosa inserisco nel page layout un elemento HTML (div) che conterrà il valore del page field di controllo.

<div id=”valoreCategoria” style=”display: none”>
<SharePoint:FieldValue FieldName=”Categoria” runat=”server” />
</div>

Definisco quindi la posizione nel page layout del titolo della pagina.

<div id=”titoloPagina” class=”Default-Style”>
<SharePoint:FieldValue FieldName=”Title” runat=”server” />
</div>

Subito dopo aver definito questo elemento richiamo la funzione JavaScript che si occuperà della modifica dello stile del testo.

<script language=”javascript” type=”text/javascript”>CambiaStile();</script>

Immagino che a questo punto abbiate già capito cosa fa questa funzione, i passaggi sono semplici:

  1. Selezione del contenuto dell’elemento “valoreCategoria”
    1. var myDivContent = document.getElementById(“valoreCategoria”).innerText
  2. Impostare in base al valore della variabile myDivContent la classe CSS dell’elemento “titoloPagina”
    1. switch (myDivContent){
    2. case “Categoria 1”:
    3. document.getElementById(“titoloPagina”).style.className = “Categoria1-Style”;
    4. break;
    5. case “Categoria 2”:
    6. document.getElementById(“titoloPagina”).style.className = “Categoria2-Style”;
    7. break;
    8. default:
    9. document.getElementById(“titoloPagina”).style.className = “Generico-Style”;
    10. }
  3. Voilà!🙂

Questo come ho già detto è un piccolo trick, non applicabile a tutte le esigenze di formattazione condizionale, e soprattutto è un esemepio che se utilizzato in ambienti di produzione deve essere ottimizzato, sia dal punto di vista della compatibilità browser (FireFox non mi pare supporti innerText ad esempio), ma soprattutto dal punto di vista delle performance. La mia intenzione in questo caso è solo quella di farvi accendere qualche lampadina🙂

– Riccardo (virtualmente in nave verso la Sardegna…)



Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...