Identify Office 365 Tenants using a custom logo

I came across something really simple but equally useful recently.

It is quite well known that Office 365 allows you to set a custom image as a logo for your organisation. This logo then appears in the suite bar across the entire tenant.

When working on an Office 365 Development project, we have multiple tenants to take care of. Typically, they are  DEV, TEST, UAT and finally PROD.

When you are navigating between these tenants, a really simple way of telling them apart is to use a custom logo for each tenant!

We as developers might just quickly have a look at the URL to see which tenant we are in. But in many cases, the same tenants are used by non-technical members of the team who might need a clearer indication of which tenant they are in. This can also help in preventing someone accidentally doing something on the wrong tenant.

So here at Content and Code, we might have something like this:

Development Tenant:

Test Tenant:

UAT Tenant:

PROD does not require any special logo as that might confuse end users:

Here is how you set the custom theme and logo for your tenant:

https://support.office.com/en-us/article/Customize-the-Office-365-theme-for-your-organization-8275da91-7a48-4591-94ab-3123a3f79530

Hope you find this useful!

Add TermStore Managers and Contributors using CSOM

A new version of CSOM was released today for SharePoint Online. You can find more information about that here: http://dev.office.com/blogs/new-sharepoint-csom-version-released-for-Office-365-may-2016

This version adds the ability to add/retrieve Managers and Contributors to a Term Group in the SharePoint Online Term Store.

Here is a quick code snippet I put together for achieving this:

	ClientContext clientContext = GetClientContext();
	var taxonomySession = TaxonomySession.GetTaxonomySession(clientContext);
	var termStore = taxonomySession.GetDefaultSiteCollectionTermStore();
	var myTermGroup = termStore.Groups.GetByName("My Custom Terms Group");
	//Add Group Managers
	myTermGroup.AddGroupManager("i:0#.f|membership|ccdev2@tenant.onmicrosoft.com");
	//Add Group Contributors
	myTermGroup.AddContributor("i:0#.f|membership|ccdev1@tenant.onmicrosoft.com");
	myTermGroup.AddContributor("i:0#.f|membership|ccdev3@tenant.onmicrosoft.com");
	clientContext.Load(myTermGroup, group => group.GroupManagerPrincipalNames, group => group.ContributorPrincipalNames);
	clientContext.ExecuteQuery();
	Console.WriteLine("Group Managers: ");
	foreach (var manager in myTermGroup.GroupManagerPrincipalNames)
	{
	Console.WriteLine(manager);
	}
	Console.WriteLine("Group Contributors: ");
	foreach (var contributors in myTermGroup.ContributorPrincipalNames)
	{
	Console.WriteLine(contributors);
	}

view raw TermGroupManagersContributors.cs hosted with ❤ by GitHub

Once executed, you can see that the Term Group in the Term Store is updated:

Minify custom SharePoint themable CSS with Gulp

The ability to create your own themable CSS has been present in SharePoint for a long time:

How to: Make custom CSS files themable in SharePoint 2013

Working with the SharePoint Theming Engine

You can even define custom names/properties in your .spcolor files which can be used in your custom CSS. My colleague Matt Holden has a great post on this here:

Custom .spcolor files for SharePoint Composed Looks

We were using this method in one of our SharePoint Online projects along with Gulp tasks to bundle and minify all our JavaScript/CSS files as per my previous post Simple bundle, minify and upload JS to SharePoint using Gulp

Now, the SharePoint theming engine uses CSS comments to determine the color replacement:

	.myClass p {
	/* [ReplaceColor(themeColor:"ContentAccent1")] */
	background-color: #4b9461;
	}
	a#announcements .alert {
	/* [ReplaceColor(themeColor:"ContentAccent2")] */
	color: #225A40;
	}

view raw Themable_CSS.css hosted with ❤ by GitHub

As per Matt's post, the theming engine replaces the values at run-time to the color defined in the ContentAccess1 section in the spcolor file.

	<?xml version="1.0" encoding="utf-8"?>
	<s:colorPalette isInverted="false" previewSlot1="BackgroundOverlay" previewSlot2="BodyText" previewSlot3="AccentText" xmlns:s="http://schemas.microsoft.com/sharepoint/">
	<s:color name="TileText" value="FFFFFF" />
	<s:color name="TileBackgroundOverlay" value="7F000000" />
	<!-- Custom Dark Green -->
	<s:color name="ContentAccent1" value="225A40" />
	<!-- Custom Muted Green -->
	<s:color name="ContentAccent2" value="4b9461" />
	</s:colorPalette>

view raw spcolor_theme.xml hosted with ❤ by GitHub

For the theming engine to successfully carry out this replacement, the ReplaceColor comment needs to be present in the CSS file we load in SharePoint.

When I minified the Themable.css file using the clean-css gulp plugin, it stripped out all the comments which made the replacement not work:

.myClass p{background-color:#4b9461}a#announcements .alert{color:#225A40}

view raw invalid_css.css hosted with ❤ by GitHub

Then I noticed that the clean-css plugin provides an option to keepSpecialComments when it does the minification. I tired using that but it still did not work as special comments have to start with an exclamation mark: https://github.com/jakubpawlowicz/clean-css#how-to-preserve-a-comment-block

Adding an exclamation mark before the comment was not going to work as that would be invalid syntax for the SharePoint theming engine.

So my final solution was to convert the ReplaceColor comment to a special comment before processing it through the minifier, then letting the minifier do it's thing by minifying the css file but preserving the special comments, and then after the minification, again converting the special comment to a regular comment suitable for the SharePoint theming engine:

	var cleanCSS = require('gulp-clean-css');
	var replace = require('gulp-replace');
	var rename = require('gulp-rename');
	gulp.task('minify-css', function () {
	gulp.src("./Styles/**/*.css")
	.pipe(replace("/* [", "/*! [")) //convert all SP Replace comments to special comments
	.pipe(cleanCSS({ keepSpecialComments: "*" })) //Preserve all special comments
	.pipe(replace("/*! [", "/* [")) //convert the special comments back to SP Replace comments
	.pipe(rename({
	suffix: '.min'
	}))
	.pipe(gulp.dest("./Output/"));
	});

view raw minify_css.js hosted with ❤ by GitHub

Which then gave me the minified CSS along with the required comments preserved:

.myClass p{/* [ReplaceColor(themeColor:"ContentAccent1")] */background-color:#4b9461}a#announcements .alert{/* [ReplaceColor(themeColor:"ContentAccent2")] */color:#225A40}

view raw valid_minified_css.css hosted with ❤ by GitHub

Thanks for reading!

Simple bundle, minify and upload JS to SharePoint using Gulp

I recently started playing around with Gulp and was not really impressed until I came across the gulp-spsave plugin. This plugin will let you upload your JS/CSS files directly to SharePoint right from Visual Studio 2015! This meant that I no longer had to manually upload my JS files to SharePoint or use SharePoint Designer to edit my JS/CSS files!

This got me more interested in Gulp and I started exploring how can I further improve my debugging and build workflow with Gulp. After spending some more time, I came up with a basic workflow which will definitely get you interested in Gulp as a SharePoint/Office 365 Developer!

This is a simple workflow which will look for predefined JavaScript files in your Visual Studio 2015 project. If any of your files change, it will be bundled into a single JavaScript file, minified and uploaded to SharePoint.

Here is my project on GitHub: https://github.com/vman/SP-Simple-Gulp-Demo

The plugins used in this demo are:

gulp-concat : Used to bundle js files.

gulp-uglify : Used to minify the js files

gulp-rename : Used to rename the minified file to .min.js

gulp-spsave : Used to upload files to SharePoint

Here is the file structure of my Visual Studio 2015 project. It is a simple ASP.NET project where I have removed all unnecessary files. Since this is a strictly front-end/UI project, you could also open a folder in Visual Studio as described in this StackOverflow post.

The Scripts folder contains the JS files I will be working on. For demo purposes, I have copied the files from the Core.JavaScriptCustomization project in PnP.

The Output folder is where my output files GulpDemo.js and GulpDemo.min.js will be created. These will also be uploaded to SharePoint.

The GulpFile.js is where all my Gulp tasks will be defined. 

The package.json file is where all the NPM packages required for my tasks will be defined. 

So without further ado, here is the code for my Gulp tasks:

	//Load gulp
	var gulp = require('gulp');
	//Load gulp plugins
	var concat = require('gulp-concat'); //bundle
	var uglify = require('gulp-uglify'); //minify
	var rename = require('gulp-rename'); //renaming to min
	var spsave = require('gulp-spsave'); //upload to SharePoint
	//Bundle JS files together into a single file
	gulp.task('concat-js', function () {
	return gulp.src("./Scripts/**/*.js")
	.pipe(concat("GulpDemo.js"))
	.pipe(gulp.dest("./Output"))
	});
	//Minify the GulpDemo.js file. This task has a dependency on concat-js which means concat-js will always run before minify-js
	gulp.task('minify-js', ['concat-js'], function () {
	return gulp.src("./Output/GulpDemo.js")
	.pipe(uglify())
	.pipe(rename({ suffix: '.min'}))
	.pipe(gulp.dest("./Output"))
	});
	//Upload GulpDemo.js and GulpDemo.min.js files to SharePoint. This task has a dependency on minify-js which means minify-js will always run before upload-to-sp
	gulp.task('upload-to-sp', ['minify-js'], function () {
	return gulp.src("./Output/*.js")
	.pipe(spsave({
	username: "dev@yourtenant.onmicrosoft.com",
	password: "Password",
	siteUrl: "https://yourtenant.sharepoint.com/sites/dev/",
	folder: "Style Library/My Folder",
	checkin: true,
	checkinType: 1
	}));
	});
	//Watcher task. This will watch for any changes in the scenario1.js and scenario2.js files and then run the upload-to-sp task.
	gulp.task('watch-js-upload-to-sp', function () {
	return gulp.watch("./Scripts/**/*.js", ['upload-to-sp']);
	});

view raw simplespgulp.js hosted with ❤ by GitHub

After creating your gulp tasks, you can run them from the Task Runner Explorer window in Visual Studio 2015:

After changing the scenario1.js file, I can see that the concat, minify and upload to sp tasks are triggered as well:

Thanks for reading!