Il blog di Giuseppe Marchi - SharePoint MVP
NAVIGATION - SEARCH

Utilizzare il ChromeControl di SharePoint 2013 all'interno delle vostre Provider-Hosted App

Quando si sviluppa una Provider-Hosted App siamo obbligati a dover implementare da zero la grafica della nostra applicazione. Questo perchè le App di questo tipo sono delle vere e proprie applicazioni web create da zero, con la home page bianca per intenderci.
Per evitare di perdere quello che è il look & feel della intranet SharePoint da cui l'utente passa per entrare all'interno dell'applicazione, il team di Microsoft mette a disposizione una libreria Javascript che crea un header nella nostra App che utilizza gli stessi colori.
All'interno di questo header è possibile poi inserire il link di rimando alla intranet, un logo e uno o più link legati invece all'applicazione corrente. Come una sorta di comandi.
Questo è il risultato che si ottiene utilizzando gli oggetti presenti all'interno di questa libreria:


La libreria in questione è la SP.UI.Controls.js che è presente su tutte le installazioni SharePoint (e SharePoint Online) e reperibile all'indirizzo:

http://<hostWebUrl>/_layouts/15/SP.UI.Controls.js

Questa libreria espone una classe chiamata Navigation, che può essere utilizzata per generare l'header che abbiamo visto in figura.
Di seguito la mia implementazione Javascript per utilizzare questa classe.

'use strict';

window.D4S = window.D4S || {};
window.D4S.SP2013 = window.D4S.SP2013 || {};

window.D4S.SP2013.ChromeControl = (function () {
    var hostWebUrl = D4S.SP2013.Utils.QueryStringManager.Get('SPHostUrl');

    function loadSharePointScripts(callback) {
        $.getScript(hostWebUrl + '/_layouts/15/SP.UI.Controls.js', callback);
    };

    return {
        LoadChromeControl: function (options) {
            loadSharePointScripts(function () {
                var nav = new SP.UI.Controls.Navigation(options.element, {
                    'appIconUrl': options.iconUrl,
                    'appTitle': options.title,
                    'appHelpPageUrl': options.helpUrl,
                    'onCssLoaded': 'D4S.SP2013.ChromeControl.OnChromeControlLoaded()',
                    'settingsLinks': options.links
                });
                nav.setVisible(true);
            });
        },
        OnChromeControlLoaded: function () {
            $('body').fadeIn();
        }
    }
})();

Questa libreria Javascript l'ho scritta sfruttando il Module pattern e, al suo interno, utilizza un'altra libreria di cui abbiamo già parlato per recuperare i valori presenti in querystring.
Per utilizzare questo metodo, basta inserire all'interno delle pagine della vostra Provider-Hosted App il seguente codice:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="../Scripts/d4s.sp2013.utils.js"></script>
        <script type="text/javascript" src="../Scripts/d4s.sp2013.chromecontrol.js"></script>
        <script type="text/javascript">

            $(document).ready(function () {
                var options = {
                    element: 'chromeControlPlaceHolder',
                    iconUrl: '/Images/dev4side.png',
                    title: 'Chrome control demo',
                    helpUrl: 'http://www.dev4side.com',
                    links: [{ 'linkUrl': 'http://www.dev4side.com', 'displayName': 'Dev4Side S.r.l.' }, 
                            { 'linkUrl': 'http://www.peppedotnet.it', 'displayName': 'PeppeDotNet' }]
                };
                D4S.SP2013.ChromeControl.LoadChromeControl(options);
            });

        </script>
    </head>
    <body style="display: none;">
        <form id="form1" runat="server">
            <div id="chromeControlPlaceHolder">
    
            </div>
        </form>
    </body>
</html>

Assieme all'header, la classe Navigation scarica dal sito SharePoint anche il file CSS contenente le principali classi che vengono utilizzate all'interno dell'host web e che possono essere quindi riutilizzate anche all'interno della nostra App, per cercare di mantenere il più possibile lo stesso look & feel dalla intranet da cui l'utente passa per accedere alla nostra App.
Se invece vogliamo stravolgere la grafica della nostra App, nessun problema è una nostra scelta.

Vi lascio i sorgenti della Provider-Hosted App d'esempio che ho scritto:
blog comments powered by Disqus