My session is about SASS and how it fits into your modern SharePoint branding and development approach. The session is entitled “Stop your SharePoint CSS become a di-SASS-ter today!” and covers the following key takeaways.
– I will explain what SASS is and where you would use it.
– How to use SASS to brand SharePoint without requiring lengthy deployments.
– How to create simple Rich Text Editor Styles using mixins and includes.
– How to apply a Grid layout and make it Responsive.
– How to structure your branding correctly to make it more maintainable.
– How CSS 4 fits into the picture and does it make SASS obsolete?

See you in Antwerp, 18th April 2015!!!

SPChat – Branding Office 365 and SASS

SharePointChatPromoStefan2
About one month before my session in Antwerp, on 19th of March, I will be available to for an SPChat on Branding Office 365 using SASS.
You are gladly welcome to open discussion on how to get started using SASS. Get to know some cutting edge extensions that you should take a look into and talking about the challenges in Office 365 when it comes to enhance the user experience.

You will find more information at SharePoint-Community.net

SharePoint hosted Apps are limited to, use JavaScript or Jquery only. In some cases you like to copy a file directly from a SharePoint hosted app to the host web. This works as long as the file is a simple text file just like a master page or display template.
In case you like to copy an image to the host web, this is not possible trough jQuery. The reason for that is that jQuery has only been capable reading text files but not binary files.
The copy will succeed, but the file will be unusable and destroyed.

Continue reading

I’m not quite sure when it happened. During the last twosome of months, Microsoft provides some icon fonts in Office 365.Especially the newly introduced app launcher makes use of icons of this typeface.The content varies from icons, such as the Hamburger menu, arrows, general, UI elements, as considerably as all Microsoft Applications. The files of this font are hosted on the Microsoft CDN so they are ready to use to spice up Apps.

Office 365 Glyphs - Preview

Office 365 Glyphs – Preview

Why to use icon fonts?

Icon fonts provide a couple of benefits. Fonts are scaled better than any image across different screen resolutions and even looks great on high density displays without any loss of quality.
There is another advantage to use this font. By using the same icons as in Office 365 you will be able to provide a consistent user experience.
Microsoft created a while ago some UX Guidelines for Apps in SharePoint, but you won’t find any information on the icons.

How to get access to the icon font of Office 365?

As mentioned earlier CDN is the key. Microsoft provides some centralized assets there. There is only one problem the use of a CDN is mostly undocumented. One general documentation can be found on the MS Technet.
There are several CDN endpoints and in case of SharePoint only one url exist in Office 365 for a long time. This URL is //cdn.sharepointonline.com. This url can be accessed via http (port 80) and http’s (port 443).
To make use of the icon font the following code needs to be used in your courses.

You might recognise the path in there that points to “_layout/15 “ which is the current version of SharePoint. The path before the layouts fairly undocumented and might change over time. I try to maintain those urls in future until there is an official documentation available.

Content of the icon font

The font-face definition can be added to the custom style sheet of your app. Again the content of this font is undocumented as well.
This was the reason why I set up a small interactive documentation that use the CDN urls and shows all relevant icons. So you don’t have to search all the 65536 glyphs (or characters).
The guide be found on my newly created lab site under the url lab.n8d.at.
A page that I’m looking forward to maintain in the future and add some additional information and things there.
Following the principles of “Ship or die”. The mobile support is currently beta too. I’m looking forward to provide a superb user experience.
If you have any comment, suggestion how to improve. Please feel free to comment. I will be lucky to hear from you.

Looking back to the old year I must say it was the most challenging year in my life so far. There were great times and there were bad times. Before I can provide an outlook for the new year. Let’s take a look back at some of the most enjoyable moments.

2014 – Conferences, People and Blog Posts

Two times Stockholm and Sweden, first time in New York, back to Las Vegas, summer in Barcelona. This was actually one travels I did in the old years and I enjoyed every trip. I met a lot of great new and well known people on those trips.

Sunrise in New York

Sunrise in New York

The only thing I am really sorry about that I couldn’t come to the war room of SP24. Instead, I was awake for 24 hours and supported the team from a remote. I am really proud I was part of the team that make this all possible. I especially like to thank Mark Jones for inviting me to be part of the team, my other team mates, the speakers and anchors and all the people that watch those great sessions.

Sadly, I haven’t had that much time and mood to blog much in 2015. Here are some of my favorite blog posts of the last year:

2015 – A new beginning

The second half of 2014 was quite challenging for me and I recapped what I’ve accomplished so far and where I want to go. By the end of 2014 I quitted my job to work on my own and start my own business.

I will still continue to do a lot of stuff in 2015 based on SharePoint, Office 365 and Azure. On those platforms I will focus more than ever before on user experience and design, as well as web development. Another thing that i’m really interested in is to bridge the gap between the physical and the virtual worlds.

I also struggled with my effort for the community and thought about stop blogging.

Finally, what I found out after all those considerations, I won’t stop blogging and will invest effort in the global community of SharePoint and Office 365. The reason for that is simple. I really like being and stay connected with all my people and friends I found over the last years. You are all great out there.

Traveling and Speaking

To stay in touch with all of you I will be traveling this year again to some conferences. The dates that are currently fixed are:

  • Saturday, February 14, 2015 – [SharePoint Saturday Stockholm](http://www.spsevents.org/city/Stockholm/Stockholm2015/home)
  • 9-12 November 2015, [European SharePoint Conference](http://www.sharepointeurope.com)

There is a another great conference this year that I would love to visit. The Microsoft Ignite Conference that will be held in Chicago from 4th to 8th of May. Chicago in May should be wonderful at this time of year.

Last year my effort to get a speaking engagement haven’t worked that well. I hope this year will work better for me because I love speaking about things that are important for me and might help others.

Thank you Microsoft

Well, it is hard to start your own business if you haven’t the right partner to start with. To get started, I joined a really great program by Microsoft.
This program is called BizSpark and provides all the tools I need. Office 365 E3, Azure and last but not least an MSDN Visual Studio Ultimate Edition.

BizSpark

In exchange I’m looking forward to provide some new applications.

That’s all for now

Hope to meet some of the readers of my blog post on some events around the world. I currently feel that 2015 will become a great year. See you all! Online and Offline.

JSLink can only be registered on certain list templates. This works well as long as only one web part on a page will be shown. If you added multiple list views of the same list template the template override will affect all web parts and not only the one that has the JSLink File attached to. To avoid this behavior the template override needs to be able somehow to conditional format the output.Continue reading

This is not a tutorial how to customize the master page in Office 365. Microsoft doesn’t recommend to create your own master page because they will constantly evolve the user interface and this might break your branding.

The reason I created this case study is to show that it is yet possible to use the same master page in Office 365 and on-premises. This master page also takes into account that the Ribbon and Suite Bar are completely different in both environments.

Another important thing is to show how the master page might evolve in future so that it provides two things. Enables Microsoft to implement and add new features and allows custom branding as we currently do it on-premises.Continue reading

After I’ve published the revised version of my table of contents script I got many request on “How to use” it. You asked for it and here it is the guide how to embed the script. I won’t provide a full featured step by step guide here. Instead, I will provide a small package of a page layout and a guide how to script embed directly. To make this work you need to have an Enterprise Wiki or Publishing page. The first part covers how to add a page layout containing the table of contents script. The second method shows how to add the script using code embedding. You also need to download the following file TableOfContents-PageLayoutPack that contains all the required files.

Continue reading

The last weeks was really inspiring and I found some great resources. Time to honor those and some older ones with this blog post.

Eloquent Javascript

Eloquent JavaScript
Eloquent Javascript is a free ebook for learning JavaScript.
This ebook was published by Marijn Haverbeke and start from the basic concepts of JavaScript to more advanced topics. It covers game development with HTML5 and Node.Js too. The book is available in various formats. A printed version is also available to purchase that has some extras.

DevDocs.IO

You start a new project based on Angular, Sass and like to use the lastest HTML and CSS3 features. If you look up something in the documentation then you have to deal with three or four different websites.
The solution to this problem is devdocs.io.
This website allows to create your own set of API documentation.
devdoc.io
The list of currently supported documentations is enormous and will be extended in future. An offline version that requires no setup is planned for the future.

Linq for JavaScript

While i was working last year on the SP24Conf I had a funny idea. I wondered if I will be able to use LINQ in JavaScript too. I search it on the web and found a project on CodePlex called Linqjs.
linqjs
This javascript covers all .net 4.0 methods to query JavaScript objects. I used it for SP24 and the session browser that was online and it worked pretty well for me. So if you normally write C# code and like to use something you already know. This is the perfect addition to your code.

INPUT Font by Font Bureau

This is for font and development nerds like me that always wanted to have a better looking font in the code editor they currently use.
input-font
“Input is a flexible system of fonts designed specifically for code by David Jonathan Ross. It offers both monospaced and proportional fonts, all with a large range of widths, weights, and styles for richer code formatting.”
There are 168 different font styles available in this font family. Enough to make your code look unique just as you like it.

Emmet.io

Emmet — the essential toolkit for web-developers. I can’t describe it better than that. It’s a plugin for text editors such as TextMate, Sublime, or NotePad++ that allows you to short code your html.

emmet.io
I’ll give you a short example. If you like to create an unordered list with four elements. The list finally looks like this.

With Emmet all that needs to be written is this simple line.

After pressing CTRL+E or whatever key is defined in your editor it compiles this single line in the code above. Sadly, Visual Studio is currently not listed of supported text editor list.

Make sure to check out the emmet demo on their web site.

IntelliSense for SPServices in Visual Studio

In case you haven’t heard. @Daniel_The_Nerd created an IntelliSense for SPServices. To get your hands on this take a look at Marc Anderson’s Blog