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

Article
3 comments

Hide toolbar / hero button in list view web part using JSLink

To hide the tool part of a web part is pretty easy. You just need to edit the settings and set them to “No Toolbar” and you are done.
Today I needed to do this programmatically. After I debugged the list view web part an haven’t found a setting for this I took a look into the “clienttemplates.js”, which is mostly responsible to render the views correctly and voila I found a solution how to hide the toolbar.

[Read more]

Article

Revised: Table of Contents for SharePoint Wiki Pages

It’s more then two years ago when I first wrote a table of contents script to enhance wiki pages in SharePoint. Time to release a new version and this time it’s a jQuery plugin. This new version will work potentially work with all versions of SharePoint and Office 365. I just have tested it in SharePoint 2013 and Office 365.
Now I also included support to for all levels of headlines (<h1> – <h6>).
This is possible because a found a good old part in the jQuery Documentation

Table Of Contents - Live in Action

Table Of Contents – Live in Action

[Read more]

Article
0 comment

Load Display Templates from Provider Hosted App or remote website

Display templates can only be stored in several places of SharePoint to get loaded. I was wondering if I will be able to inject this mechanism or if I will be able to provide a display template directly out of a provider hosted app.

Normally Display Templates will be uploaded to every site collection inside the master page catalog, but with a little tweak those can be loaded from everywhere in the world as long they are accessible via a web server.[Read more]

Article
6 comments

Safer request form fields in list forms using JQuery

Mark Anderson published today an article on his blog concerning an issue that currently exists in Office 365 and is called “Office 365 Update Changes ‘Display Name’ on Required Fields”. In this article he described that the rendering of fields recently have been changed in Office 365. I will take a look what can be done to solve this probably.

The cause of the problem

The title attribute of list fields have been widely use to customise forms in SharePoint using JavaScript, JQuery or SPServices. I used this attribute sometimes too do address fields by the display name. But somehow I always had a bad feeling about this. Why? Well, the ID attribute of the field is the only real unique identifier in the form. The downside using the ID is that you need to have some information about the field to generate the ID. But I will explain this later.
What the update recently in Office 365 did was to change the rendering of the field. Previously it look like this:

Now it has changed to this:

As you see now the title has additional parts such as required or field. This means that you haven’t in this attribute the display name of the field alone and you will fail if you query by title.

Safer approach to request fields

As mentioned before the ID property is the only one that is unique in the whole page. The ID is formatted in the following form:
Field name + ”_” + Guid of the field + ”_$” + Type of the field.
As seen in the previous section the ID looks like this:
Region_59566f6f-1c3b-4efb-9b7b-6dbc35fe3b0a_$LookupField
So if you like to be absolutely sure and like to generate this ID by yourself you need to do a request to the list and read the fields. The you will be able to find the name by the display name, the id and the type. This will make some lines of code that you can reuse in your projects. I haven’t seen any ready made code yet but I’m sure it can be found somewhere over the internet. (If you have would be great to post that in the comments)
I looked into this problem and what I found was that SharePoint does that job for you and stores it on the form in the JavaScript variable “WPQ2FormCtx”.

Console output of WPQ2FormCtx Object

Console output of WPQ2FormCtx Object

This context is somehow new in SharePoint 2013 and Office 365 This somehow represents the so called form context with a lot of information. Also included in this variable is the list schema which we can use without loading any additional information from the list.
So what I did is that I created a small javascript object that loads the information and allow me to generate the id of the field. The tricky part i currently not have implemented is the type part because this is a little bit tricky and the value changes with the different configurations of the fields. I hope that the following code give you an example how this works.

To this script the last part needs to be added to be 100% sure. Think about the fill in option for example this will start with the same id but I’m sure there will be added a special type.

Field after update via JS

Field after update via JS

As you see the value was written to the form

A Look to the future

I will never use the title field again. I write this now 100 times to keep it in mind. But not here in this blog post. In future I will reuse my little helper object for a simple reason. If Microsoft changes the format of the ID attribute I only need to change it at a central location instead of search and replace all my jQuery / JavaScript code.
Convenience is not everything better go an extra mile to be safe.

Article
3 comments

Disable “SharePoint plugin cannot be loaded” on public facing web sites

Recently I stumbled upon various sites that are built on SharePoint 2013. All those sites have the same problem. The SharePoint plugin that those web sites try to load is only useful for collaboration but not for public facing web sites.

Plugin request in Safai

Safari and SharePoint on MacOS X

Plugin Cannot be loaded in Chrome

Chrome requests for plugin

Origin of the message

This message comes from a client side JavaScript and tries to load the presence information. To avoid this message the following lines of code needs to be added to the master page or via a JavaScript file.

The code to request the plugin won’t be executed anymore. The visitor can enjoy the web site instead of concentration on the source of the error message.

Using SharePoint from MacOSX? Use Safari. This is because if Office and Lync are installed on MacOS special web extensions will be installed to support working with SharePoint better.

Additional information:

Article
2 comments

Close SharePoint Modal Dialogs with “Esc”-Key press

Whenever a list items will be checked or reviewed in SharePoint a modal dialog come up. This feature of SharePoint 2010 is really helpful from a usability point of view, because the user is able to return to the list where the interaction with the list item has been started by closing the modal dialog. When this will be done a couple of times a day, the user will always have to move the mouse pointer to the close button to close the dialog.

As user learned over the last couple of year, when the user want something to go away that pops out of the current browser window, no matter if it is a modal dialog, image or full screen video the use only have to press the “Esc”-Key to make it go away.

As I mentioned before this is not implemented in SharePoint now, but could be changed with a simple JavaScript and the usage of the Modal Dialog Framework implemented in SharePoint. To add this functionality I created a simple sandbox solution, which has a module and a JavaScript.

First of all the elements.xml contains the following definition:

The custom action register a JavaScript on the Master Page. The module definition deploy the JavaScript file the style library, the location for the deployment is URL parameter on the module. The JavaScript file only has few lines of code that capture the ESC-Key press  and close the mos recent dialog. The rest could be found in the following script.

Conclusion

With this simple solution I think the usability in SharePoint could be improved a bit and based on SharePoint components like the modal dialog framework. jQuery would be to overweight for this task.

You can download the visual studio solution as well as the sandbox solution.

After the solution deployment a the site collection feature “Close Dialog on Esc-Key press” needs to be activated. In the Style Library the new added JavaScript file needs to be checked in.