May 25, 2015

SharePoint Online :This HTML cannot be inserted because you don't have access to add scriptable Web Parts in this site. Please contact your administrator if you think you should have rights to do so.


Recently when i was working on one of the project requirements to hide quick launch items for a specific page (SharePoint Online) using  script editor webpart(Embed Code webpart) on to the page,  i got  the below error while injecting the script 

"This HTML cannot be inserted because you don't have access to add scriptable Web Parts in this site. Please contact your administrator if you think you should have rights to do so."

The reason for this is, by default the sharepoint sites  in online are configured to not allow to inject the scripts from UI. This has a setting at site administration . You can change the settings by following the below steps

Resolution :

In Custom Script Section select the option "Allow users to run Custom script on personal sites and selfservice created sites.."

Note : As mentioned in the screen, to apply these changes it may take 24 hrs.


May 19, 2015

Chrome Control in Provider Hosted Apps to Navigate to SharePoint Site

Hi Guys,

In this post i am going to explain what is chrome control and how can we use it in our apps..

As you all know, basically there are two ways to host our apps..One is hosting in SharePoint(SharePoint-hosted) and other is in external systems/providers (also called as auto-hosted or provider-hosted.)

Basically when we host app in SharePoint, the app also gets the look and feel of SharePoint like menu and some other links which helps the user in going back to the SharePoint site. But when we host in external system, there would be no consistent look and feel like SharePoint. We will miss navigation and other short cut links to SharePoint site.

To overcome this problem, Microsoft provided a control called Chrome Control, which enables you to use the header style of a specific SharePoint site in our apps. This doesn't need any server library reference or custom tool, only reference of the SharePoint JavaScript library.

I have developed a provider hosted app with ACS model. And here is the landing page of the app, without chrome control

As you see here, there is no link to go back to sharepoint site from this app. Now here i am going to place chrome control in this page, which gives the links and navigation menus to host sharepoint site.

How to configure and use the chrome control?

To use chrome control in our app, we need these below libraries

  • jquery-1.9.1.js – can be loaded from cdn/filesystem
  • sp.ui.controls.js- load from layouts directory

Now add a div which has to hold the chrome control in your landing page of the app(usually default.aspx).This is the HTML body mockup with chrome control

<body style="display: none">
     <div id="chrome_ctrl_placeholder"></div>
    <div id="MainContent" style="background-color:yellow">
      <h1>Provider Hosted Sample using ACS</h1>

Now using script, we will load chrome control in above div.

The script looks like this, replace head tag of your html with below one

    <title>Chrome control host page</title>
    <script src="//" type="text/javascript"> </script>
    <script type="text/javascript" src="//">   </script>
    <%--<script type="text/javascript" src="demochrome.js"> </script>--%>
    <script type="text/javascript">
        "use strict";
        var hostweburl;
        $(document).ready(function () {
            hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl")
            var scriptbase = hostweburl + "/_layouts/15/";
            $.getScript(scriptbase + "SP.UI.Controls.js", renderChrome)

        function chromeLoaded() {

        function renderChrome() {
            var options = {                                          
                "appTitle": "Chrome control demo",
                "onCssLoaded": "chromeLoaded()",
            var nav = new SP.UI.Controls.Navigation(

        function getQueryStringParameter(paramToRetrieve) {
            var params =
            var strParams = "";
            for (var i = 0; i < params.length; i = i + 1) {
                var singleParam = params[i].split("=");
                if (singleParam[0] == paramToRetrieve)
                    return singleParam[1];
In the above script,

getQueryStringParameter : this function get the host web (sharepoint web) url from the appUrl
renderChrome : This function renders the chrome control in to the page .

In renderChrome function, we are creating a variable called 'options' which holds all the required options for the chrome control like the app title, link to other page etc. 

And we are creating a new object for navigation with the div(chrome_ctrl_placeholder) and the specified chrome control options and making it visible.

Now the apps landing page would look like below

For more information and the code , please follow this msdn link