Article
0 comment

Alternative to innerHTML in SharePoint Framework web parts

When you create a new project without any framework, the default web part content in the code will be added through innerHTML.
Technically there is nothing wrong with this approach, but you might run into a problem when you add more content to the web part afterward using the same method. In this case, the previously added content will be overwritten.


To avoid this behavior, you can use jQuery and the ‘append‘ or ‘prepend‘ methods to add your content. It works well but requires an external library.
Instead of using jQuery, there is a native method in the document object model of HTML available.

[Read more]

Article
0 comment

Yo SimpleStyle – First release of my yeoman generator is now available

Yo! SimpleStyle - Yeoman generator for you next Styl Guide

Last year I released a style guide generator for your SharePoint and Office 365 development.
This year I proudly present a yeoman generator that helps you to get started faster on your next project. There is no need to clone the old repository anymore. Simply create a new project as needed based on this template engine.
To be honest the old version of the Simple Style Guide is currently outdated and shouldn’t be used anymore.

[Read more]

Article
2 comments

The new document library in SharePoint is built with…

Not so fast… As announced at the May the 4th event there are a lot of new technologies that come to SharePoint and you can pick your personal flavored framework to enhance the SharePoint.
Some things of the upcoming changes are already available in Office 365. Things like the hidden web parts or the new document library. Time to rip the components of the new document library apart and show you what was used to build it.

TL;DR

The new document libraries are built with the following three core components:

  • React
  • KnockoutJS
  • RequireJS

In addition a React-based implementation of Office UI Fabric will become available together with the new SharePoint Framework.

[Read more]

Article

SharePoint – Table of Contents jQuery plugin – Now available on GitHub

Today I decided to publish my table of contents script on github. There it will be much easier to handle all the issues and gives the global SharePoint community the possibilities to contribute to my code.

I know from many people that this script is wide spreader throughout various SharePoint installation. I’m looking forward to improve the code in near future. This table of content script has a real long history for me and I published the first version already for SharePoint 2010. It is still one of my most popular posts.

SharePoint - Table fo Contents

 

Let me share some statistics with you:

  • SharePoint 2010 – [Enhance Wiki Page Layout by adding a navigational Table of Contents](https://n8d.at/blog/enhance-wiki-page-layout-by-adding-a-navgational-table-of-contents/)
    Page Views: 32,016
  • Office 365 / SharePoint 2013 – [Revised: Table of Contents for SharePoint Wiki Pages
    ](https://n8d.at/blog/revised-table-of-contents-for-wiki-pages/)
    Page Views: 8,002
  • Office 365 / SharePoint 2013 -[How to use: Table of Content – jQuery Plugin](https://n8d.at/blog/how-to-use-table-of-content-jquery-plugin/)
    Page Views: 2,289

From now on if you have issues or feature request simply publish them on github. If you like to contribute to this project you are also gladly welcome.

Table of Contents on GitHub

Article
1 comment

Deploy binary files from SharePoint Hosted App to Host Web

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.

[Read more]

Article
11 comments

Bind JSLink overrides to certain web parts only

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.

[Read more]

Article
0 comment

5 resources for web and one for SharePoint developer

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