Il blog di Giuseppe Marchi - SharePoint MVP
NAVIGATION - SEARCH

HTML5 fields per SharePoint 2010

E' da un pò che sto studiando HTML5, penso sia ormai un dovere per tutti noi sviluppatori web. Nella fine dello scorso anno ho già fatto qualche esperimento e sicuramente ci sarà da divertirsi nei prossimi anni.
La cosa bella è che vengono aggiunte tutte quelle funzionalità per cui prima si doveva pensare qualcosa di custom utilizzando javascript o altro. Un esempio lampante sono le nuove tipologie di controlli input, che permettono di catalogare una semplice casella ti testo secondo un'insieme di valori a caratterizzare il tipo di dato che dovrà essere inserito dall'utente.
Questi valori vanno a sostituire il valore "text" che eravamo soliti utilizzare all'interno del tag "input" per il renderizzare la nostra casella di testo.

<input id="txtAge" type="text" />

I valori possibili per tale attributo "type", ad oggi (perchè ancora le specifiche non sono complete), sono i seguenti:
  • email
  • url
  • number
  • range
  • Date pickers (date, month, week, time, datetime, datetime-local)
  • search
  • color
Ecco quindi che una casella di input pensata per inserire gli anni di un utente, potrà essere scritta in questo modo:

<input id="txtAge" type="number" step="1" min="0" max="123" />

Come referenza riguardo questi nuovi elementi HTML potete utilizzare il sito W3Schools.com, da cui io stesso ho preso la lista che avete appena letto.
- http://www.w3schools.com/html5/html5_form_input_types.asp

Come potete vedere, allo stato attuale delle specifiche, solo Chrome ed Opera supportano a pieno queste nuove tipologie di input. Per gli altri browser dovremmo aspettare ancora un pò.
Invece, un campo in cui questi nuovi controlli di input danno il massimo e sono già ampiamente supportati è il campo degli applicativi mobile. In base alla tipoloia di campo infatti, uno smartphone presenta all'utente una configurazione differente della tastiera, così da permettere un'input contestualizzato in base al campo che l'utente seleziona. Qunidi un campo di tipo "number" verrà gestito con la tastiera con soli numeri, il campo di tipo "mail" avrà la tastiera con la chiocchiola e così via.

Per non restare indietro quindi, mi è venuta l'idea di iniziare ad applicare i vantaggi di questi tag all'interno di SharePoint 2010, perchè il concetto di "campo" o "colonna" in SharePoint è ormai radicato da anni e mi è sembrato un buon punto di estensione del prodotto in ottica futura.
Ecco quindi che ne è uscito un progettino, ancora in fase primordiale, che ci permette di sfruttare queste funzionalità del browser anche su form di liste e document library presenti su siti SharePoint. Qua sotto, potete vedere un esempio d'uso del campo "number" con Chrome.

HTML5 fields for SharePoint 2010

L'indirizzo è il seguente: http://html5spfields.codeplex.com/

Attualmente ho sviluppato solo i campi di tipo "mail" e "number". Non ho ancora pubblicato una versione totalmente funzionante perchè mi manca da sviluppare le funzionalità di visualizzazione in percentuale e di rendering di un valore numerico con uno o più decimali (proprio come fa il campo numerico di default di SharePoint), però dai sorgenti potete già scaricare la soluzione, provarla e darmi qualsiasi tipo di feedback.
Ho in previsione di sviluppare quanto meno i campi di tipo "range" (molto carino), "url" e quelli legati alle date, ma non posso darvi la certezza assoluta ancora ;)
Comunque, come vi dicevo, con Chrome e con Opera non avete problemi di utilizzo. Internet Explorer 9 non ha implementato nessuna di queste novità ancora.

Come sempre, se c'è qualche volenteroso che mi vuole dare una mano io son contento :)
blog comments powered by Disqus