Friday, June 19, 2015

Using custom actions to configure, brand and inject client side web parts into a Team Site

image
In my current project we have created a configuration based provisioning engine using CSOM to configure and brand SharePoint Team sites into what we call Group sites. The above picture is a screenshot of the console runner version of the tool, but we’re use the same templates in a custom site creation process as well. As we started this before the OfficePnP engine was made available it’s all custom built, but we have borrowed code from OfficePnP in the engine itself.

As an end user you will use a wizard on the intranet to fill out information about your new site, which in turns does a POST ajax query over to an WebAPI service on a random IIS server which does the actual site creation and configuration.

Our approach is to take a default team site, and then re-configure it. No custom master page involved. And much of the end-user customizations are done using the app script part pattern - even though they are not all app parts. And all very O365 friendly.

Before

This is a default team site
clip_image002

After

Configured site which uses bootstrap tour on first load to highlight parts of the site.
image

Expanded search box from custom header with search as you type suggestions

image

Here’s list of the changes and approaches taken:
  • Custom header – custom action to hook in CSS and JavaScript on all pages. Header and footer resources are loaded from a local CDN
  • Home page – configured using CSOM to add links web part, change default view and add dummy start text
  • Bootstrap tour – custom script JavaScript which checks on #introtour parameter and Home.aspx and then kick starts itself
  • Hide suitebar links and Recent menu in quick launch – custom action to inject JavaScript on all pages using jQuery to “fix” the pages
  • CSOM to configure Document library to only use major versions and max 30
  • HTTP request to set access request e-mail address as there is no CSOM api for this yet
  • CSOM to activate and deactivate some features
    • We disabled minimal download strategy as we got a suitebar flicker with the injection if not. Might be possible to make it work, but we didn't investigate it.
  • CSOM to add content types from the content type hub
  • CSOM to set service account as site collection admin, and responsible persons in the Owner group.
Basically we have a lot of small tasks, all chained together and being played out after a site is created. Pretty sweet and easy to change and configure.