Durante la customizzazione della barra dei ribbon, oltre a dover specificare il tab e il gruppo in cui i controlli relativi al nostro Ribbon personalizzato dovranno essere visualizzati (come abbiamo visto nel primo post di questa serie dedicata ai Ribbon), dobbiamo specificare anche il modo in cui questi controlli dovranno essere renderizzati.
Per farlo, ogni controllo che possiamo inserire all'interno dell'estensione all'interfaccia di SharePoint che stiamo sviluppando, espone l'attributo TemplateAlias. Questo attributo serve a specificare l'identificativo del template che deve essere utilizzato per dare una larghezza ed una grandezza al controllo in questione, quando un particolare template è stato applicato al gruppo in cui abbiamo deciso di inserire il nostro Ribbon personalizzato.
Nel primo esempio, abbiamo applicato al bottone il template con alias "o1". Questo alias permette al sistema di rendering della barra dei Ribbon di SharePoint 2010 di dare larghezza e altezza massime al bottone. Inoltre, applica al bottone stesso l'immagine il cui URL è definito all'interno dell'attributo "Image32by32".

<?xml version="1.0" encoding="utf-8"?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction Id="Ribbon.HelloWorld"
RegistrationId="101"
RegistrationType="List"
Location="CommandUI.Ribbon"
Title="Hello world ribbon"
>
<CommandUIExtension>
<CommandUIDefinitions>
<CommandUIDefinition Location="Ribbon.Documents.Manage.Controls._children">
<Button Id="Ribbon.HelloWorld.Button"
LabelText="Hello world"
TemplateAlias="o1"
Image32by32="/_layouts/content/images/PeppeDotNet/HelloWorld32by32.png"
Sequence="31"
Command="HelloWorld"
/>
</CommandUIDefinition>
</CommandUIDefinitions>
<CommandUIHandlers>
<CommandUIHandler Command="HelloWorld"
CommandAction="javascript:alert('Hello world from BIG Ribbon !');"
/>
</CommandUIHandlers>
</CommandUIExtension>
</CustomAction>
</Elements>

Il risultato di un bottone con l'attributo TemplateAlias valorizzato a "o1" lo conosciamo già.

AliasTemplate o1

Ma se volessimo invece visualizzare il nostro Ribbon personalizzato nel formato un pò più piccolo, dobbiamo specificare un nuovo valore per l'attributo TemplateAlias. Questo è il valore "o2", che specifica la dimensione massima del testo, la posizione e l'utilizzo dell'immagine il cui URL è definito all'interno dell'attributo "Image16by16".

<?xml version="1.0" encoding="utf-8"?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction Id="Ribbon.HelloWorld"
RegistrationId="101"
RegistrationType="List"
Location="CommandUI.Ribbon"
Title="Hello world ribbon"
>
<CommandUIExtension>
<CommandUIDefinitions>
<CommandUIDefinition Location="Ribbon.Documents.Manage.Controls._children">
<Button Id="Ribbon.HelloWorld.Button"
LabelText="Hello world"
TemplateAlias="o2"
Image16by16="/_layouts/content/images/PeppeDotNet/HelloWorld16by16.png"
Sequence="31"
Command="HelloWorld"
/>
</CommandUIDefinition>
</CommandUIDefinitions>
<CommandUIHandlers>
<CommandUIHandler Command="HelloWorld"
CommandAction="javascript:alert('Hello world from LITTLE Ribbon !');"
/>
</CommandUIHandlers>
</CommandUIExtension>
</CustomAction>
</Elements>

Una volta fatto deploy, vedremo il nostro bottone personalizzato apparire nel secondo gruppo di controlli (sempre all'inteno del gruppo "Manage" proprio del tab "Documents"), cioè assieme a tutti quei controlli con altezza minima. Volendo poi spostarlo prima, in mezzo o dopo gli altri controlli già presenti, possiamo giocare con i valori dell'attributo "Sequence" (come spiegato in questo post).

AliasTemplate o2

Gli alias di template visti fin'ora ("o1" e "o2") sono validi fin quando vogliamo inserire un controllo all'interno di uno dei gruppi già esistenti nella barra dei Ribbon di SharePoint 2010. Se decidiamo invece di creare dei tab e dei gruppi personalizzati, possiamo allora definire i nostri template personalizzati per la visualizzazione dei controlli.