The document could not be created. The required application may not be installed properly, or the template for this document library cannot be opened.


Working within my VM this morning, and just testing out basic functionality of SharePoint on my demo site. I went to do a very simple task of creating a new document. I received the following pop up.

It took me a moment, but I realised I didn’t have any Office products installed on my VM, however I did have Office Web Apps. I thought I should still be able to create a new document. It turns out that if you disable an Internet Add-On this message goes away. The Internet Add-On is called SharePoint OpenDocuments Class, (which sounds like it needs to be enabled for it to work!)

As soon as I disabled it, without any browser restart, I was able to create a new document.

SharePoint 2013 Calendar not displaying correctly with IE11


Been working on my SharePoint Dev machine where I needed to add a calendar to my site. Wrote the code, everything looked good. I then VPN onto the client’s machine to upload the code to their QA environment. Soon as I looked at the calendar, I notice that it was displaying funny and not working as expected. After ensuring I had indeed uploaded the latest code, I decided to go back to basics and create an out of the box site and add a calendar to the site. Again the calendar didn’t look right.

Non Working Calendar

I jumped on the web front end, and used IE11 from there and the same site appeared correctly.

From my machine I checked with Chrome, Safari, Firefox and all appear correctly, but for some reason my IE didn’t work. It was the first time I’ve had a case of “It doesn’t work on my machine” but does everywhere else.

I opened up the developer tools and took a look at what was being loaded on the page, and compared the two browsers. It appeared that on the working browser I had an additional JavaScript file loaded “SP.UI.ApplicationPages.Calendar.js”, perhaps this file applied a css. Needed to work out why this file wasn’t being loaded. Using the IE developer tools, I viewed the calendar.aspx file in both browsers and copied the source for comparisons. Not only did this highlight to me that at line 43 sp.ui.applicationpage.calendar.js wasn’t being referenced, but two line up, where it registers the browserScript, it was loading up a different javascript file. It seemed to think that I wasn’t using an IE browser. (Even though in Chrome, Firefox etc, it still loads the ie55up.js file!)

Non-working. (Loads non_ie.js)

Working (Loads ie55up.js and sp.ui.applicationpages.calendar.js files)

A colleague of mine suggested to use fiddler to look at the User Agent being sent in the request. (Thanks Chris) It turned out that two different User-Agent were being sent.

Non-working: (Mozilla/5.0 (Windows NT 6.3;WOW64;Trident/7.0;rv:11.0) like Gecko)

Working: (Mozilla/4.0 (compatible;MSIE 7.0;Windows NT 6.3;WOW64;Trident/7.0;.NET4.0E;.NET4.0C;.NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729)

I was able to prove that it was the User Agent causing the issue, by using IE developer tools, and changing the User agent string there. Which then made my calendar display correctly. I also tested the original User Agent string, and if I removed the like Gecko from the User Agent string, the calendar did display correctly. It appears it’s the “Like Gecko” that causes the problem.

This gave me enough information to try and find something on the internet that could help me with my problem. I came across Jeremy Sinclair blog, which implies there is an issue with IE11 and SharePoint 2013.

http://sinclairinat0r.com/2014/03/06/internet-explorer-11-compatibility-fixes-for-sharepoint-2013/

http://sinclairinat0r.com/2014/03/14/spoofing-ie10s-user-agent-in-iis-for-ie11-support-in-sharepoint-2013/

Jeremy explains in his blog that the following doesn’t work correctly in IE11 with SharePoint 2013, even with SharePoint 2013 SP1 the issues are still there.

  • Edit Page doesn’t place the page in Edit mode (especially on custom page layouts)
  • If you do happen to use a built-in page layout, any webparts added are unable to be customized.
  • The calendar view doesn’t look right
  • The calendar overlay button on the calendar view is disabled.

Jeremy second blog post above show you how to use a URL Rewrite Module for IIS, and configure IIS to re-write the HTTP_USER_AGENT.

So how comes it worked on the client QA SharePoint box browser, and worked on my browser pointing to my dev environment, but not when I used my browser to point to the client QA SharePoint Site?

I have learnt that in IE Internet Options, on the Security Tab, when a site is a Local Intranet site, it uses the working User Agent. So when I was trying to connect to my farm that was already set up as a Local intranet. When I was on the remote desktop of the web front end, again I was inside the client domain and the site was already configured to Local Intranet. The connection of my browser on my pc through the VPN to the client’s farm sent the request via Internet. As soon as I put the URL of the client’s site in my Local Intranet settings, the calendar then appeared correctly to me.

Hopefully a patch will eventually be released, and this won’t be an issue. Until it is, I hope this blog helps explains the problem to you and gave you the answer quicker than it took me to work out.

Visual Studio Web Essentials, Minified and Source Map files


Working in the SharePoint 2013 online world I have found myself deep in the world of JavaScript files. Now as a good developer I ensure that my JavaScript files are all minified before deploying to a production server. However what happens if there is a JavaScript error on the production server. You would normally see an error like below:

Line: 1, Column: 83008. Well yeah, that’s going to be easy to solve. To makes matters worse, if I look at the cannonfodder.min.js file, line 1 looks a bit like the following:

However you could hit “Turn Pretty On” button

IE11

Chrome – (Bottom left)

Which makes the above text looks like the following:

Not exactly the file I originally wrote, as functions and variables are still minified to single letters.

One solution that I used to use was have a custom action script link, that points a piece of JavaScript code, that either adds the minified or un-minified file to the page depending if there was “jsdebug” in the query string on the page.


var Cannonfodder = Cannonfodder || {};

Cannonfodder.LoadMainJs = (function () {

    var scriptElement = document.createElement('script');

    scriptElement.setAttribute('type', 'text/javascript');

    if (window.location.href.indexOf('jsdebug') != -1) {

        scriptElement.setAttribute('src', '/assets/scripts/cannonfodder.js ');

    } else {

        scriptElement.setAttribute('src', '/assets/scripts/cannonfodder.min.js ');

    }

    document.getElementsByTagName('head')[0].appendChild(scriptElement);

}());

There is nothing wrong with doing the above, the only issue is that you are inserting the javascript file into the page with a custom action. If you wanted just to add the JavaScript link to your masterpage, or HTML page etc you couldn’t use this method.

This is where minified and source map files come in handy.

 

Web Essentials for Visual Studio

Before I explain further about Minified and Source Map files, let me show you a Visual Studio plugin that will do most of the work for you. It’s called Web Essentials and can be downloaded from http://vswebessentials.com/. It is available for Visual Studio 2010, 2012 and 2013. It has many features, but the feature you are installing it for, is so that it automatically minifies and creates a map file for your JavaScript files.

How to minify

Once you have installed Web Essentials extension, and have a project with a group of JavaScript files, all you need to do is select the JavaScript files, and right click.

You will see that you have a new menu item “Web Essentials” and inside this menu item, you can Create JavaScript bundle file. By clicking this you are asked to name your bundle. Once you have named your bundle and click OK, it will create 4 files based on your bundle name.

The files:

[BundleName].js – is all the JavaScript files put together into one file, that isn’t minified. This is the easy to read version. (Although not used any further)

[BundleName].min.js – is all the JavaScript files put together into one file, but this file is minified.

[BundleName].min.js.map – is the source map file. This is a file that holds information about your original files. When you query a certai line and column number in your generated minified JavaScript you can do a lookup in the source map which returns the original location. A map file can look as simple as the following.


{

 "version" : 3,

"file": "Cannonfodder.min.js",

"mappings": "AAAAA,SAASA,kBAAmB,CAACC",

"sources": ["test.js"],

"names": ["window", "src", "maps", "are", "fun"]

}

 

[BundleName].js.bundle – This is an XML file, also the file that groups the other 3 files. This XML file contains the files that need to be minified, also it determines the order. The bundle file looks similar to the following:


<?xml version="1.0" encoding="utf-8"?>

<bundle minify="true" runOnBuild="true" output="Cannonfodder.js">

<!-- The order of the <file> elements determines the order of them when bundled. -->

<file>test.js</file>

<file>anotherfile.js</file>

<file>mycoreutilities.js</file>

</bundle>

 

What is really cool about using web essentials, is any changes you make to your original javascript files, as soon as you save it within Visual Studio, the 3 bundle files are recreated/updated. ([bundle].js, [bundle].min.js, [bundle].min.js.map)

 

What to deploy to the server

I’ve created a basic demo to explain what needs to be deployed to the server.

What I have is a module called assets. I added 3 JavaScript files to my assets module. Then, using Web Essentials created my Cannonfodder bundle from the 3 JavaScript files. Lastly I have created a Custom Action Script link which adds “~SiteCollection/Assets/Cannonfodder.min.js” to the page for simplicity. (Save worrying about creating a Master Page for this demo)

The files highlighted in yellow are the files, I’ve included in the Elements.xml file which will be uploaded to the server.

When I hit my page, the only file that I’ve told to load on the page is the minified file Cannonfodder.min.js.

 

Browsers and debugging the minified file

I have deployed my sandbox solution to the server, and using Chrome I can see my original files instead of the minified files. Here I will show you how this works.

By default Chrome doesn’t load the unminfied files, even when you enable the developer tools (F12) it doesn’t automatically load the unminified files. To get this to work you need to go into the settings of Chrome, by clicking on the cog on the top right of the developer toolbar.

You need to ensure “Enable JS source maps” is turned on. Now refresh the page. In the source panel, you will now see your original files and the minified files.

With “Enable JS Source maps” turned off, you will not get the original files in the source panel. (There are more files loaded here before I took my screenshot, compared to the last screenshot)

Ok, so I can see my original files, but how does that help me? Well now I can actually put a break point on my original code, which gets hit as my page runs.

This may seem like magic, but it is to do with the final line you will find in the min.js file.


/*

//# sourceMappingURL=Cannonfodder.min.js.map

*/

This line tells the browser to read the map file if found, it can then load the original files from the map file. The mappings in the map file, allows the browser to work out exactly where in the minified file you are in the original files. So for example, if you click “turn pretty on” for your minified file, and then attempt to put a break point in this file, the actual breakpoint it makes is in your original file. You can see this by the “Breakpoints window”.

 

Other Browsers

Firefox in the debug tools can view the original files. Apparently according to this Microsoft Article http://msdn.microsoft.com/en-us/library/dn255007(v=vs.85).aspx IE11 with Windows 8.1 update also can do this. However I cannot see the extra buttons that Microsoft States are there to perform what I did in Chrome.

What I have


What Microsoft says I should have


The last two buttons are Just My Code and Enable source maps. If anyone works out how to get these two buttons to appear, please place a message in the comments below.

Update: I have just installed the latest updates for my Windows 8 machine and can confirm that them buttons are now there. I obviously didn’t have 8.1 installed.

 

Issues I’ve discovered

The main issue I’ve had when debugging my files is that in the console window, if I wanted to see a variable value, I would normally just type the variable into the console and it would give me my value. However, because the browser is actually running your minified file, and showing you the original files, your variables are not actually your variables.

What do I mean? Well, below I have put a break point on my simple displayDateandName(name) function. This breakpoint is showing my original file.

When I try and get “date” variable, it states it’s undefined. With the “name” variable it displays nothing. This is because it is running your minified file, and you can tell this by looking at the Local Scope Variable window.

You can see variables called

n: “Paul”

t: Tue Apr 08 2014 21:59:40 GMT+0100 (GMT Daylight Time)

Which if you can find it within your minified file, you will see that what these variables have been minified too

Resources

http://msdn.microsoft.com/en-us/library/dn255007(v=vs.85).aspx – IE 11 and Map Files

https://developers.google.com/chrome-developer-tools/docs/javascript-debugging#source-maps – Chrome and Map Files.

http://www.codeproject.com/Articles/649271/How-to-Enable-Source-Maps-in-Firefox – Firefox and Map files

http://vswebessentials.com/ – Visual Studio Extension Web Essentials.

http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ – HTML5Rocks Introduction to JavaScript Source Maps.

 

AMS – App Model Samples


A good set of examples of Apps have been released by Microsoft. They can be found on CodePlex. Most will work on 365 and on Prem.

Quick list of included scenarios.

  • Cloud base site collection provisioning
  • Creating site collections remotely using SP Apps in on-premises
  • Provision and integrate Yammer group into site provisioning
  • Manage and update theme settings in host web
  • Changing host web rendering with custom CSS
  • Site policy management with CSOM
  • Wiki page manipulation using CSOM
  • Site collection enumeration
  • Setting up Apps to Windows Azure with specific roles
  • People picker implementation for provider hosted app
  • Taxonomy picker implementation for provider hosted app
  • Utilization of JavaScript injection pattern to modify the UI for end users
  • Uploading of large files to SharePoint
  • Deploy branding to personal OneDrive Pro sites automatically
  • Connect to and manipulate Office365 sites using console application
  • Provide custom template pattern for sub site creation
  • Manipulation of user profile properties remotely
  • Build sync of user profile properties in cloud
  • Taxonomy driven navigation control using JavaScript
  • Mass deployment of branding elements from console app
  • Hybrid self-service site collection provisioning – one UI for cloud and on-prem
  • Synchronization of user profile pictures from on-prem to SharePoint Online
  • Dynamic permission handling
  • Remote event receivers from host web

https://officeams.codeplex.com/

Setting default Content Types for List/Libraries using JavaScript


Long time ago, when using SharePoint 2010, I had to set the default Content types on a bunch of SharePoint Lists and Libraries. Of course I had the ease of doing this in C#. In a recent project I had to do the same thing, however being a SharePoint 2013 online project, I could only do this in JavaScript. It is amazing how something you know so well in C# that would take less than an hour to do, can take hours in JavaScript if you aren’t a JavaScript expert like myself.

How you use this code is down to you, my code originally was part of a huge JavaScript configuration file, using namespaces and callbacks. For simplicity sake, I have written this blog just with straight JavaScript code to perform setting the default content type, and show you how to set up your environment to test this. This isn’t production ready code, just a way to show you how you can do it.

Environment Setup

  • Create yourself a simple team site.
  • Create some Site Content Types, I’ve based mine on Document.

  • Create yourself a couple of Document Libraries.
    • Change the Advanced Settings to Allow management of content types
    • Click Add from existing site content types and add one or more content types to your library.

I have created a HR library which consists of CF Holiday content type, and an Accounts library which has CF Claim Form, CF Invoice and CF Purchase Order added to it.

Below HR Library

Below Accounts Library

This is the environment set up. Currently the Content Types I wish to use have already been added to the libraries, and Document is the default content type.

Code and Demo

As this is purely a demo, I’m going to use SharePoint Designer to create a basic page, that when you click a button, it updates the Default Content Types for lists and libraries. It’s not ideal using SPD as there is no intellisense, but you can quickly create a page and upload to SharePoint, which is great for testing like this.

  • Connect SharePoint Designer to your site.
  • Open the All Files section, then right click and add an aspx page. I called mine test.aspx
  • Open your aspx page, you will get a warning, Click Yes to open the page in advanced mode.
  • Delete everything in the page and paste the following. This will give you a basic page, for a Standard SharePoint Master Page.
<%@ Assembly Name="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>
<%@ Import Namespace="Microsoft.SharePoint.WebPartPages" %> <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Page Language="C#" MasterPageFile="~masterurl/default.master" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=15.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document" meta:webpartpageexpansion="full" %>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server" >
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">
    <SharePoint:ProjectProperty Property="Title" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server">
    <SharePoint:ProjectProperty Property="Title" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
</asp:Content>
  • If you save this page and then navigate to your site, you should get just a blank page, no errors. So your site URL would be similar to http://cf/sites/teams/test.aspx

First thing is to ensure I have all my references I require for the code to work. I’m using underscore.js. I have found underscore to be very useful for looping through arrays. I’ve downloaded underscore.js and using SharePoint designer I have created a folder called Assets/Scripts and placed the underscore.js file in there.

  • Add a reference inside your test.aspx. Put the reference inside your PlaceHolderAdditionalPageHead. I’ve also put stubs in place ready for our JavaScript in a later step.
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server" >
    <script type="text/javascript" src="Assets/Scripts/underscore.js"></script>
    <script type="text/javascript">
        /*Our javascript code will go here */
    </script>
</asp:Content>
  • In PlaceHolderMain content placeholder, add a button that will call our JavaScript function to set Default Content Types.
<div>
    <button type="button" onclick="setDefaultContentType();return false">Update Default Content Types</button>
</div>
  • Within the PlaceHolderAdditionalPageHead after the underscore.js reference, add the following script.
//Collection of Lists and Default Content Types for given list.
 var defaultContentTypes = [
        { ListTitle: 'HR', ContentTypeId: '0x0101003293FA81A1DB8B47AC008BE39BCE695C0057F88502D28F9042A061813A2DA79AE9', ContentTypeName: 'CF Holiday' },
        { ListTitle: 'Accounts', ContentTypeId: '0x0101005C18A4FC55B2C84FB8DD5E5A71D1DA02000529316EC50BA14CB28D9E8D69BA43B4', ContentTypeName: 'CF Claim Form' }
];

 var context;

 function setDefaultContentType(){
    context = SP.ClientContext.get_current();
    _.each(defaultContentTypes, function(current){
var rootFolder = context.get_web().get_lists().getByTitle(current.ListTitle).get_rootFolder();
var contentTypes = context.get_web().get_lists().getByTitle(current.ListTitle).get_contentTypes();

context.load(rootFolder, 'ContentTypeOrder', 'UniqueContentTypeOrder');
context.load(contentTypes);
});

context.executeQueryAsync(loadContentTypesSuccess, onScriptFailure);
 };

function loadContentTypesSuccess(){
        _.each(defaultContentTypes, function (current) {
              var originalCTO;
              var rootFolder = context.get_web().get_lists().getByTitle(current.ListTitle).get_rootFolder();
              var contentTypes = context.get_web().get_lists().getByTitle(current.ListTitle).get_contentTypes();
              originalCTO = rootFolder.get_contentTypeOrder();

              var newCTO = new Array();
              var contentTypeEnum = contentTypes.getEnumerator();
                  while (contentTypeEnum.moveNext()) {
                        var currentCT = contentTypeEnum.get_current();
                        if (currentCT.get_name().toLowerCase() == 'folder')
                            continue;

                         if (currentCT.get_name().toLowerCase() == current.ContentTypeName.toLowerCase()) {
                            newCTO.splice(0, 0, currentCT.get_id());
                            continue;
                         }

                         for (i = 0; i < originalCTO.length; i++) {
                             if (originalCTO[i].toString() == currentCT.get_id().toString()) {
                                     newCTO.push(currentCT.get_id());
                                     break;
                             }
                         }
                      }

                      rootFolder.set_uniqueContentTypeOrder(newCTO);
                      rootFolder.update();
                });
                context.executeQueryAsync(onUpdateContentTypes, onScriptFailure);
};

function onUpdateContentTypes(){
    alert('Updated Default ContentTypes');
};

function onScriptFailure(sender, args){
      alert(args.get_message() + '\n' + args.get_stackTrace());
};

Let me explain each section to you. Right at the top of the script we have a global variable called defaultContentTypes. Here we have the List Name, the Content Type ID and Name which will be set as the default content type. If you have more than 2 lists to set the content type, just add another line to this collection for each list. You can add as many, or as little as you want, the code is written to be flexible here.

The first function setDefaultContentType (which is what the button will call when pressed), gets the SharePoint context, then using the underscore.js _.each function, loops through each list in our defaultContentTypes variable. Before we can update anything we need to grab the information from SharePoint. This is what this looping function does. It gets the List rootFolder, and current content types for that list.

The line below ensures that rootFolder contains the values for the properties ContentTypeOrder, and UniqueContentTypeOrder. The ContentTypeOrder is required to get the current order of the Content Types, and the UniqueContentTypeOrder is required because when we set the new order back, this is the property to use. Leaving them out of the following line would throw an error stating “The property or field ‘ContentTypeOrder’ has not been initialized”.

context.load(rootFolder, 'ContentTypeOrder', 'UniqueContentTypeOrder');

Once we have loaded all the lists and content types (loadContentTypesSuccess) we then loop through all in defaultContentTypes again. However because we have already loaded the rootFolder in the context, this time when we call it, we will have values. We grab the original order of the content types, and loop through them. Within the while statement there is 3 checks.

  1. If content type == “folder” then don’t add it.
  2. If content type == our default content type, then add first in the array.
  3. If it is still a content type to display, add it to the end of the content type order array.

The reason why the 3rd check is written as below, is if one of the Content types is not visible on the New button, it ensures that it continues to behave this way.

for (i = 0; i < originalCTO.length; i++) {
     if (originalCTO[i].toString() == currentCT.get_id().toString()) {
                newCTO.push(currentCT.get_id());
                break;
     }
}

Lastly, once we have obtained the correct Content Type Order for the list, setting the default Content type at number one, we need to write back to SharePoint and save this data. On the root folder, we set_uniqueContentTypeOrder passing in the new array order. Then call executeQueryAsync, which will either alert success or failure.

If we see this in action, by loading up the test.aspx page we will just have a simple button, saying “Update Default Content Type”. We click this button and hopefully receive a successful alert.

If we look at our Accounts library, we can see the CF Claims form is now the default content type.

And if we look at our HR library, we can see the CF Holiday is now the default content type.

If in your code, you didn’t want to make the SharePoint Document content type visible, in your code, just don’t add it to the newCTO array, like what we do with Folder.

if (currentCT.get_name().toLowerCase() == 'folder' || currentCT.get_name().toLowerCase() == 'document')
    continue;