thekid.me.uk

Useless SharePoint Designer error message

vincent@thekid.me.uk — Fri, 04 Jul 2014 11:04:07 +0000

I have had this before, but forgot the fix, so I am posting it here so that I remember it!

I got the error from SharePoint designer this morning…

The version of Microsoft SharePoint Foundation running on the server is more recent than the version SharePoint Designer you are using. You need a more recent version of SharePoint Designer.

Obviously I have the latest version of SPD and it was talking rubbish. What is the real problem?

Turns out that it is SPD not being very informative when it can’t logon to Office365 and so the fix is simple…switch accounts.

Sample Data images is now fixed

vincent@thekid.me.uk — Wed, 02 Jul 2014 12:17:40 +0000

Sorry to everyone about the images not being created in the Sample Data App.

It appears that Flickr decided that you can only access their API via https and they switched off http access completely on Sunday. I have updated the scripts which retrieve the images and all is working again now.

New release of Sample Data SharePoint App

vincent@thekid.me.uk — Mon, 30 Jun 2014 09:31:00 +0000

I have released a new version of the free Sample Data App, which is already available in the SharePoint App Store The solution can be downloaded and it has two new features…

Download the app solution file

The App Solution can now be downloaded and installed for farms that are not connected to the SharePoint App Store.

Sample Data for a Links List

You can now quickly create links in a SharePoint Links List. The source of the links is from Wikipedia and you can enter your own URL so that the generated links can be on any subject you like.

The links are taken from the references section at the end of the Wikipedia page.

Improved document creation

Previously you could only create 30 documents at a time. This has been increased to 500, so you can quickly hit that 5000 limit if you are testing.

The feedback/progress has also been improved so that you can see more progress as the documents are created.

JSOM Fiddle source now on GitHub

vincent@thekid.me.uk — Fri, 27 Jun 2014 13:55:26 +0000

I have put the source code to JSOM Fiddle SharePoint App into GitHub. This will allow you to create your own project and to deploy it with Full Control. The current store version does have limitations on the actions you can perform because of the App security.

You can access the project here on GitHub

Creating Sample Data for SharePoint 2013 Lists and Libraries

vincent@thekid.me.uk — Tue, 10 Jun 2014 12:44:00 +0000

We all have to do it, whether for testing, development or a demonstration. Creating semi-realistic sample data can be time consuming and generally a bit of a pain. Well now you have a free SharePoint App which can help you out.

The Sample Data SharePoint App

The app adds a custom action to several lists and libraries. Specifically it can generate sample data for the following…

Custom Lists, Document Libraries, Asset Libraries, Wiki Libraries, Calendars, Discussions, Tasks and contacts.

It places a button on the ribbon which, when clicked, presents you with a dialog.

Generally this dialog gives you some options about the data you want created.

Library Sample Data

For document libraries the App the creates a mix of Excel and Word files, with some random content in them all. The filenames are randomly created and are hopefully slightly real. You can specify the number of documents, so if you need a library with 1000 documents then this will create them for you.

For Wikis you can enter the URL of you favourite RSS feed. The content of the feed is then used to create the pages and the page names. You can enter different feeds to add as much content as you wish.

For Asset Libraries the App will add some random images to your library. All the images have a creative commons license, which can be viewed in the App dialog. There are three types to choose from ‘Buildings’, ‘Old Artwork’ and ‘Space Innovation’.

List Sample Data

Calendar data is randomly created. You can specify the number of days in the past and the into the future. The number of events per day is random and again you can specify the range. All days events are also randomly created and if not all day then the duration of the event is random.

Tasks are all randomly created, the start and end dates also being random. The percentage complete is also random, with some tasks being set as complete.

Adding data to Custom Lists is also easy. Not all column types are covered, but the most common ones are. Date columns are random, Note columns have a paragraph and Choice columns have a random values selected from the choices. With custom lists it is entirely possible to add 5000 items in one go should you need to test hitting the item limit in SharePoint.

Discussions are taken from the MS Office newsgroups. The sample data is basically a copy of the RSS feed, with all the replies added to the relevant discussions. This gives you quite a few discussions, with varying number of replies.

Contacts are randomly created, with phone numbers and countries all added.

See it in action

This is a simple video showing the Sample Data App creating documents in a document library.

Let me know

Let me know what you think or if there is anything you want added.

You can install the app now from the SharePoint App Store.

Creating an icon for the custom action in your SharePoint App

vincent@thekid.me.uk — Sat, 31 May 2014 11:57:09 +0000

This is a quick post to show how to creating a good looking Icon for your SharePoint custom action.

First create the icon

Download Metro Studio from Syncfusion. This will allow you to select an icon from a huge range of royalty-free icons.

Pick the icon which best suites your custom ribbon action.

You will need two icons. One 32px and one 16px. Choose the colour for your icon and set the background to transparent. Then simply export both versions as a PNG.

Encode your image

I tend to encode the images and put that in the custom action XML, so you will need to encode them. Fortunately Richard diZerega created a tool to do this easily for us.

This will encode the image into a base64 string, which we can then use in our custom action definition.

Modify the Custom Action

Once you have the file encoded you can then change the Image32by32 and the Image16by16 in your custom action definition.

And there you go, a quick simple icon for your custom action.

Creating/Editing XLSX or DOCX documents directly in JavaScript

vincent@thekid.me.uk — Tue, 27 May 2014 22:01:54 +0000

Must admit that when I first starting looking at this I wasn’t overly hopeful of achieving it, but it is possible…it’s not dead simple, but it is definitely doable.

TL;DR: Download the project, open it in Visual Studio, read the code, deploy it and then try it.

There are numerous things you need and it involves a number of different script libraries, all with varying documentation. Hopefully this post will put you in the right direction, mostly because it includes the source code to a working example of creating an Excel Spread Sheet in JavaScript and uploading it to a document library in SharePoint.

First the bits you need

In order to get this working you need to add a few scripts to your project. Fortunately Eric White over at OpenXmlDeveloper has done a lot of the hard work for us. I am basically adding a bit of SharePoint stuff to his work and it’s always nice to have a working sample.

Firstly you will want to have a look at the Open XML SDK for JavaScript, which provides some wrapping for the Open Xml specification in JavaScript. The Open XML for JavaScript provides some useful examples, but if I am honest they do take a lot of reading and viewing of webcasts to get anything working; And once you add SharePoint into the mix it obviously gets a bit harder.

You can go to the Open XML SDK for JavaScript site on CodePlex and download the source. This actually contains all the files you need to add support to your project.

However, it’s worth mentioning the other projects that it uses.

JSZip	This allows the SDK to open the XLSX or DOCX as they are just ZIP files anyway.
linq.js	LINQ for JavaScript. This is used to access the object model of the XLSX or DOCX.
JSZip extensions	Extensions for inflating & deflating ZIP files in JavaScript.
Open XML	The Open XML file formats.

The Open XML SDK for JavaScript doesn’t actually hide the complexity of the Open XML format, you still have to deal with all the different XML elements and attributes it requires. What it does do is give you easy access to the different parts of the document inside the DOCX/XLSX zip file. It also provides a simpler way to handle the different namespaces you need to generate the XML of a DOCX/XLSX file.

What to include on your page

This is always the first problem, what exactly are the scripts I need to include on my page for all this stuff to work. If you download the CodePlex project there are a number of scripts and sample pages. They all provide useful information and functionality, but you don’t need them all.

These are the script I included on my SharePoint App page…

<script src="../Scripts/openxml/linq.js"></script>
<script src="../Scripts/openxml/jszip.js"></script>
<script src="../Scripts/openxml/jszip-load.js"></script>
<script src="../Scripts/openxml/jszip-deflate.js"></script>
<script src="../Scripts/openxml/jszip-inflate.js"></script>
<script src="../Scripts/openxml/ltxml.js"></script>
<script src="../Scripts/openxml/ltxml-extensions.js"></script>
<script src="../Scripts/openxml/openxml.js"></script>

This will give you all the functionality required and the order is important. I always have jQuery included and I wouldn’t be surprised to discover that it is a requirement too.

How do I create a document

Basically you don’t, you start from a blank document template and add to it. I won’t include it here, but they are in the sample project and it is a base64 encoded string, which is the XLSX or DOCX from where you want to start. In the samples and in my project this is included in a JavaScript file as a string literal.

This actually works quite well as it means you can pre-configure things and save writing code to set formats or static content. Creating the base64 string is a little (but not too much) involved. There is a post describing it and I used the PowerShell scripts from that post without problems.

Creating the document in JavaScript

So, once you have your templates (feel free to re-use the ones in the project, they are just blank) you can then open the document in JavaScript and modify it’s contents. The JavaScript Open XML SDK has more examples for DOCX and so I will be showing an XLSX example. Here is the script to open an XLSX, add a row and to add a cell.

The example below just uses the openXml object and the OpenXmlPackage method to open the blank XLSX document template. Once the spreadsheet is opened it gets the workbook and the first sheet. You will notice it is using LinkJs to achieve this. It then gets the sheetdata, adds a new row and then adds a new column.

This is a very basic example of setting one cell value. If you want to add different data types (strings, dates, etc) then you will need to modify the code which creates the ‘cell’. Generally you have to build the correct XML for the cell using the appropriate XAttributes and XElements.

Building the correct structure of the OpenXML document is going to be a bit of a pain, but fortunately finding out what it is supposed to look like is pretty easy. Because an XLSX or DOCX is just a zip file you can rename them to .ZIP and look at the contents. In the case of a spreadsheet you will find a folder called ‘xl’ and in that folder another folder called ‘worksheets’, this is where all the sheets are stored. Opening one of the sheets you will see the OpenXML for that worksheet. So, by creating a sample spreadsheet, renaming it and looking at the XML you can find out what elements you need to create.

The project

The project is just a very basic SharePoint App which allows you to enter a number, generate the SpreadSheet using JavaScript and save it to a document library using REST.

It’s hosted on GitHub and can be downloaded from here.

Accessing data from an external service in a SharePoint App

vincent@thekid.me.uk — Tue, 27 May 2014 21:24:23 +0000

So you can access remote data from a SharePoint using the Web Proxy, but what if you don’t know the domain of the service you’ll want to access beforehand. That means you can’t add it to the manifest for your App and so the Web Proxy will not work.

Another option is JsonP, but not all services provide JsonP support. How to access them?

This is my solution to the problem. I am hoping that someone will say “Vince, you’re over complicating it, this is the easy way”, but until that happens this is the solution I am currently using.

I looked at using Azure, but the free websites have restrictions and I didn’t want things to stop working if I hit them. So, as much as I’m not a Google fan, Google Scripts it was. Basically I have a script which takes a Url and then returns the result of that Url in JsonP.

If you visit Google Scripts then you can create a new script and publish it. This is what my script looks like.

And here is the code…

function doGet(e) {
    return ContentService
            .createTextOutput(urlGet(e))
              .setMimeType(ContentService.MimeType.JSON);  
}

function urlGet(e) {
  var results = {};
  
  if (!e.parameter.url) {
    results = "{error:'missing url',results: null }";
  }
  else {
    var response = UrlFetchApp.fetch(e.parameter.url).getContentText();
    if (!response) {results = "{error:'no data returned',results: null}";}
    else {results = response;}
  }
  
  //results = JSON.stringify(results);
  if (e.parameter.callback) {
      results = e.parameter.callback + "(" + results + ")"
  }
    return results;
}

This code expects JSON from the remote service, but there is a line to un-comment if you are getting a string or XML.

Once you publish this script (ensure that you make it public) then you get a Url to your script which you can use in your App to download any JSON from anywhere. Your JavaScript would be similar to this…

var dataUrl = "http://<the URL to the data you want to access>";
var url = "https://script.google.com/macros/s/" + 
          "AK1ycbxFZcqlPNgUIz97Q1FSX-5akze8X3Lx36iNqE_ltmBvfgWjSxc/exec?url=" +

          encodeURIComponent(dataUrl) + "&_callback=?";

$.ajax({
     url: url,
     crossDomain: true,
     success: function (o, a, x) { 
          // Do something useful with your data
     },
     error: function (o, a, x) {
          alert("Failed");
     }
});

Note: That is not the Url to my service and it will not work…create your own, it’s free and is just a bit of copy ‘n’ paste of the code.

I have used this code to get RSS feeds, but you will not get a success, you get a parse failure because it’s not JSON. Fortunately if you change the ‘success’ handler to an ‘error’ handler in the $.Ajax call you will get the response code (200) and the body of the response (containing your XML). A bit of a hack, but it does work.

Another option for getting some XML or an RSS feed is to use Yahoo Pipes. These can, amongst numerous other things, turn your XML/RSS into a valid JSON feed. This you can then use as the Url in your SharePoint App to convert the data before passing it to the Goole Script. Lots of indirection, but it does all work and is plenty quick enough.

Calendar Custom Actions in your SharePoint 2013 App

vincent@thekid.me.uk — Fri, 23 May 2014 13:23:51 +0000

Today I wanted to add a custom action to a calendar in a SharePoint App. Thought it would be straight forward, but apparently not.

Adding the custom action is fine…

Selecting ‘Calendar’ as the list template to associate the custom action with is simple.

You then get a choice of where you want the action to appear. I want it on the Events Actions ribbon menu. Easy enough, well that’s not quite right as the List is not exhaustive and misses out completely the Calendar ribbon locations.

Turns out that even though you chose a calendar list template it does not offer you the ribbon locations available to a Calendar. So don’t use ‘Ribbon.ListItem.Actions’ as your location, use ‘Ribbon.Calendar.Events.Actions.Controls._children’ instead.

This is the correct location to use to add a command to the calendar ribbon.

By using this location your custom ribbon action will appear in the events lists on your App’s host site.

These locations can be found in ‘15\TEMPLATE\GLOBAL\XML\CMDUI.XML’, but I find it easier to use the developer tools in IE to get the locations.

If you look at the ribbon with the DOM Explorer then you can see a list of the locations in the IDs of the section containers. If find this a quicker easier way to find out ribbon locations you need to use.

Easily add item reordering to your SharePoint list

vincent@thekid.me.uk — Wed, 21 May 2014 12:35:04 +0000

Using List Reorder from the SharePoint app store you can easily add reordering capabilities to any list in your SharePoint site.

It’s particularly useful if you use Promoted Links a lot.