Enabling the Developer Site Collection Feature in SharePoint Online

I have been doing a bit of work updating some of our content for apps lately, and I found a couple areas where I needed to enable the developer site collection feature for a new site collection.  You might want to enable the developer site collection feature when you need to side-load an app and deploy directly from Visual Studio.  There isn’t a button in the site collection features to let you enable this. 

If you were on-premises, you’d just run Enable-SPFeature:

 Enable-SPFeature e374875e-06b6-11e0-b0fa-57f5dfd72085 –url https://sp.contoso.com

However, we can’t do that with SharePoint Online as the PowerShell cmdlets don’t expose the ability to turn features on and off.  There are a few ways to do this by taking advantage of the Client Side Object Model.

Using PowerShell

One way would be to install the excellent (and free!) SharePoint Client Browser for SharePoint 2010 and 2013.  It includes an extremely useful feature to open up PowerShell with the CSOM already loaded.

Using that PowerShell window, you could then easily use the client side object model (CSOM) to enable the developer feature.

 $ctx.Load($ctx.Site);
$ctx.ExecuteQuery();
$guid = [System.Guid]"e374875e-06b6-11e0-b0fa-57f5dfd72085"
$ctx.Site.Features.Add($guid,$true,[Microsoft.SharePoint.Client.FeatureDefinitionScope]::None)
$ctx.ExecuteQuery();

Too easy.

Creating an App

Of course, I am lazy and I don’t want to have to dig up that PowerShell code each time I do this.  I want to be able to just click a button like I do in the site collection features dialog.  I can do that by creating a simple SharePoint hosted app.  In Visual Studio, create a new app for SharePoint.  Replace the contents of app.js.

 'use strict';

var context = SP.ClientContext.get_current();


// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function () {
    var site = context.get_site();
    context.load(site);
    context.executeQueryAsync(function () {
        site.get_features().add("e374875e-06b6-11e0-b0fa-57f5dfd72085", true, 0);
        context.executeQueryAsync(function () {
            alert("added the developer site feature to the site collection!");
        },
            function(sender, args){
                alert("unable to add the developer site feature to the site collection: " + args );
            });
    },
    function (sender, args) {
        alert("oops! " + args);
    });
});

Go to the appmanifest for your app and request Manage permission for the site collection.

Package the app and then add the .app package to the app catalog for your tenant.  Now you can go to any site in your tenancy where you are a site collection administrator and add the app.  Click on the app to execute the code above, and then optionally uninstall the app from that site so that other users don’t feel compelled to click on it. 

Now it’s as simple as add the app, execute it, then uninstall the app.  You might add additional capabilities, such as a toggle button to enable/disable the feature, but I’ll leave that as an exercise to the reader.