0

I am writing a high-trust provider-hosted SharePoint add-in that is based on the built-in MVC 5 web template, and I need to add the SharePoint Chrome control so that the add-in fits with the overall look-and-feel of the host site collection. All of the examples I have found are based on the ASPX template. Are there any working examples of adding the SharePoint Chrome Control to an add-in that is based on MVC 5 and not on ASPX?

0

It should work in MVC 5 as well. Its quite similar to what we do in Web Forms implementation.

Just some minor differences. Instead of the aspx page, we will modify the layout html.

Open the Views > Shared folder.

In that modify the _layouts.cshtml file.

Add the below references of scripts in its <head> section:

<script type="text/javascript" src="https://microsoft.sharepoint.com/_layouts/15/MicrosoftAjax.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){        

    var spHostUrl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));

    var layoutsRoot = spHostUrl + '/_layouts/15/';  

    $.getScript(layoutsRoot + 'SP.UI.Controls.js', renderSPChrome);

});


function getQueryStringParameter(urlParameterKey) {
    var params = document.URL.split('?')[1].split('&');
    var strParams = '';
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split('=');
        if (singleParam[0] == urlParameterKey)
            return singleParam[1];
    }
}

function renderSPChrome() {

    var hostlogourl = decodeURIComponent(getQueryStringParameter('SPHostLogoUrl'));

    var options = {
        'appIconUrl': hostlogourl,
        'appTitle': @ViewBag.Title,        
        'settingsLinks': [
            {
                'linkUrl': 'https://sitecollectionUrl.com',
                'displayName': 'Site Collection Name'
            }
        ]
    };

    //Load the Chrome Control into chromeCtrlPlaceholder div 
    var chromeNavigation = new SP.UI.Controls.Navigation('chromeCtrlPlaceholder', options);
    chromeNavigation.setVisible(true);
}

</script>

Add the below div in the <body> section.

<div id="chromeCtrlPlaceholder"></div>

It will load the SP Chrome control

  • I used similar code, but found that it fails in the high-trust scenario, depending on how the PHA is setup to handle SSL. I keep getting protocol errors when it tries to load the sp.ui.controls.js file. – John Holliday Aug 11 '17 at 13:00
  • Thats quite strange, can you directly add the CDN reference https://microsoft.sharepoint.com/_layouts/15/SP.UI.Controls.js and check ? – Gautam Sheth Aug 15 '17 at 14:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.