Useless SharePoint Designer error message

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.

JSOM Fiddle source now on GitHub

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

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/Editing XLSX or DOCX documents directly in JavaScript

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> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 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

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; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 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

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

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.

Dynamically resizing a SharePoint App webpart to show dialogs

One of the problems with SharePoint Apps is that you cannot SP.UI.showModelDialog() to show additional details to the end user. It is also a problem when you want to provide a richer UI than the very basic properties you can add to the ToolPart window. I was talking to Chris earlier this week and showed him some code I had that used sendMessage() to send the parent frame a message to resize the SharePoint app part. This made me think that it might be nice to have a sample project to demonstrate resizing the app part when a dialog is displayed, so here it is… Things you need to know The App Part XML In the project you will notice that the webpart elements.xml has a couple of changes. Firstly the height is set to 0, If you know the default height use that, but 0 ensures that nothing is shown until the first resize has been performed. This can be useful to prevent things moving around in front of the user. The editmode query string parameter has been added to the source url. This allows us to show a different dialog when we are in edit mode for the app part. Src="~appWebUrl/Pages/DialogsWebpart.aspx?{StandardTokens}&amp;editmode=_editMode_" The DialogsWebpart.aspx page This has a DIV for the content of the page, followed by two dialogs. The resizing relies on the fact that the content has an ID of ‘content’ and the dialogs have an id that starts with ‘dialog-‘. These IDs are used when calculating the height of the app part. Along with jQuery and jQueryUI the other scripts are App.js, the javascript for the app part, and partResize.js, the script which performs the resize. You should also notice the onresize event handler on the <body> tag. <body onresize="setTimeout(CodexPoint.PartResize.resize(), 10)"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } TypeScript The sample project uses TypeScript, if you’re not using it I do throughly recommend it. However, the .js files are perfectly useable and you can safely delete all the .ts files and just edit the JavaScript files directly. .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } I should give thanks to Leandro as this was influenced by his blog post. And I should also mention that MS recommends to resize in increments of 30px as described in this article.. Downloads There are two downloads. One is the .app file so that you can deploy the project yourself and the other is a .zip of the actual project. The SharePoint App Install The App Part Project

So you want to replace the default SharePoint asset picker

I have just had reason to replace the default OOTB SharePoint 2013 asset picker, you know the one. It gives you lots of places to find things, but absolutely no way to search or filter. And God help you if you want to link to an asset in another site collection.     Anyway, there is a pretty simple way to replace this dialog with your own implementation. You just need to override some global variables so that SharePoint uses your dialog instead of the one specified in assetpickers.js So, here is the code you need… <script> ExecuteOrDelayUntilScriptLoaded(function (){ window.CONST_ImageAssetPickerDialogName = "mypicker/picker.html"; window.CONST_LinkAssetPickerDialogName = "AssetPortalBrowser.aspx"; window.CONST_EditHyperLinkDialogDialogName = "AssetEditHyperLink.aspx"; window.CONST_EditImageDialogDialogName = "AssetImagePicker.aspx"; }, "assetpickers.js"); </script> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }This modifies the dialog locations specified in assetpickers.js with your own custom one. Here I am replacing the Image Asset Picker with my own implementation. You can see your other options, but you only need to specify the ones you wish to change. The one thing you to ensure is that your dialog implementation returns the same object as the OOTB SharePoint one. Your OK handler should go something like this… function onOk(e){ var result = { AssetUrl: <selectedURL>, AssetText: <selected title>, ListItemFields: null}; window.frameElement.commonModalDialogClose(1, result) } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } This will return the correct format of the JavaScript object for the asset picker to work. You do get a lot of information passed in the query string, but I’ll leave it to you to decide if you need it or not. It’s also worth looking into assetpickers.js as there are a lot more global variables where you can override the default behaviour of your pickers. Shame I can’t share the search based picker I wrote, but I might write my own cut-down version that I can share with you all. Until then there is no reason why you can’t implement your own picker.

Introducing the JSOM Fiddle SharePoint App

I’ve been doing a fair amount of JSOM development recently, you kinda have to if your doing a ShareP [More]

SharePoint on Windows Phone

AgilisPoint a free App for your Windows Phone