Come avrete visto, l'interfaccia di SharePoint 2013 è davvero cambiata rispetto a prima.
Assieme ai cambiamenti stilistici, abbiamo anche un nuovo elemento di interazione all'interno delle pagine (sfruttato soprattutto in liste e document library): le Callout.
Che cosa sono? Non sono nient'altro che dei tooltip un pò più fighi dal punto di vista grafico, che ci permettono di fare operazioni contestuali all'oggetto che è stato cliccato.
In SharePoint 2013 questi oggetti hanno sostituito l'edit control block di elementi di liste o di file di document library, dando la possibilità di fare azioni veloci sull'oggetto selezionato o per esempio (questo solo se avete installato le Office Web Apps) avere la preview del file. In realtà l'edit control block è sempre presente, ma viene renderizzato come azione all'interno di una Callout.
Bene, a fronte della presenza di questo nuovo componente, il popolo di sviluppatori SharePoint deve sapere che è possibile sfruttare delle API Javascript ed utilizzare le medesime Callout anche all'interno delle nostre customizzazioni.
Queste API sono presenti all'interno del file callout.js (o callout.debug.js), disponibile all'interno della directory LAYOUTS.
Questo file è inserito nella master page di default di SharePoint 2013, mentre invece va inserito a mano all'interno delle pagine delle vostre App se, appunto, volete utilizzare questo nuovo componente all'interno di un'App SharePoint 2013.
L'utilizzo è davvero semplice, ecco un esempio si base:

<script type="text/javascript">

function OpenTestCallout(sender) {
var c = CalloutManager.createNew({
ID: 'myCalloutId',
launchPoint: sender,
beakOrientation: 'leftRight',
title: 'Titolo',
content: 'Contenuto',
contentWidth: 600
});
c.open();
}
</script>
<a href="#" onClick="OpenTestCallout(this)">open callout</a>

Come vedete, gira tutto intorno al metodo createNew della classe CalloutManager, classe che ci permette di fare tante altre operazioni su questa tipologia di componente.
I parametri principali di questo metodo sono sicuramente:
  • ID - Identificativo della Callout, obbligatorio ed utile per recuperare univocamente la Callout nella pagina
  • launchPoint - Elemento HTML dalla cui posizione deve essere visualizzato la Callout graficamente
  • beakOrientation - Enumerazione per decidere l'orientamento grafico della Callout (i possibili valori sono "topBottom" o "leftRight")
  • title - Titolo della Callout
  • content - Contenuto della Callout (che può essere anche in formato HTML)
Oltre a queste opzioni, abbiamo la possibilità di aggiungere azioni specifiche direttamente all'interno della Callout.
Vedremo questo esempio in uno dei prossimi post.