Custom ribbon in SharePoint 2013

Nel post di oggi verranno mostrati i passaggi per creare un custom ribbon nella barra multifunzione di SharePoint.

Per prima cosa è necessario creare una nuova SharePoint solution vuota in Visual Studio.
Aggiungere quindi un Empty Element, che servirà per definire lo stile e il comportamento del nostro ribbon.

Date un nome parlante all'elemento in modo da riconoscerlo tra gli altri.
A questo punto l'unica cosa che occorre fare è definire nel file Element.xml tutte le proprietà necessarie al funzionamento della nostra soluzione.

Riporto un esempio di seguito:
Andiamo ad analizzare da vicino il codice.

Nel tag CustomAction:

• Id: indica l'identificativo univoco del ribbon
• Location: il posto dove verrà visualizzato il ribbon (https://msdn.microsoft.com/en-us/library/office/ee537543.aspx)
• RegistrationType: il ribbon può essere visibile in vari punti all'interno di SharePoint, come List,ContentType,ProgId e FileType
• RegistrationId: va a specificare su quale tipo di lista deve essere pubblicata il ribbon
• Title: il titolo del ribbon

CommandUIDefinition definisce l'interfaccia grafica del nostro ribbon:

• Location: attributo molto importante, che va ad indicare in quale punto dovrà essere inserito il ribbon all'interno della barra multifunzione. Questo attributo è legato al tipo di lista definito in custom action e al tipo di elemento definito nel type.
  è possibile sovrascrivere un ribbon già esistente andando a settare uno di questi valori https://msdn.microsoft.com/en-us/library/office/ee537543.aspx, in alternativa è possibile aggiungere il ribbon ad un nodo figlio dell'elemento, nell'esempio viene inserito nei figli del tab action

Button è il controllo che verrà inserito nel ribbon, è possibile scegliere tra i seguenti controlli https://msdn.microsoft.com/en-us/library/office/ff458373.aspx#sectionSection1

• Id: identificativo univoco del controllo
• Command: riferimento del comando definito nell'elemento CommandUIHandler
• Image16by16 e Image32by32: immagini da visualizzare nel ribbon
• LabelText: testo da visualizzare nel controllo
• Alt: testo alternativo
• TemplateAlias: usato per dimensionare e posizionare il controllo nel gruppo dei ribbon

CommandUIHandler definisce gli eventi e le azioni utilizzabili nei controlli definiti in precedenza

• Command: identificativo del comando
• CommandAction: comando da eseguire all'attivazione dell'evento.
  NB: è necessario sapere che sono disponibili alcuni token che vengono sostituiti runtime, che indicano dove ci troviamo all'interno dell'applicazione di SharePoint 
• {ItemId} 
• {ItemUrl}
• {RecurrenceId}
• {SiteUrl} 
• {ListId}
• {ListUrlDir} 
• {Source} 
• {SelectedListId} 
• {SelectedItemId}

A questo punto non rimane che deployare e vederne l'effetto.

Enjoy!

HOW TO: Leggere e scrivere parametri in query string

Di seguito un semplice metodo per leggere e scrivere parametri in query string.

setQueryStringParameter = function (uri, key, value) {

    var re = new RegExp("([?|&])" + key + "=.*?(&|$)", "i");

    separator = uri.indexOf('?') !== -1 ? "&" : "?";

    if (uri.match(re)) {

        return uri.replace(re, '$1' + key + "=" + value + '$2');

    }

    else {

        return uri + separator + key + "=" + value;

    }

};

getQueryStringParameterByName = function (name) {

    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");

    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),

        results = regex.exec(location.search);

    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));

};

Un esempio per il suo utilizzo:

setQueryString = function () {

    var txt = getQueryStringParameterByName("test");

    if (!txt)

        txt = 0;

    txt = parseInt(txt); 

    txt++;

    document.location = setQueryStringParameter(document.location.href, "test", txt);

};

<div>

    <input type="button" onclick="setQueryString()" title="setQueryString" value="setQueryString" />

</div>