Sample Data images is now fixed

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

I have released a new version of the free Sample Data App, which is already available in the Sh [More]

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 an icon for the custom action in your SharePoint App

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.

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.

Some useful CSS classes for your SharePoint Apps

You want your SharePoint App to fit in with the theme of the parent SharePoint site and so you need to use the same colors & fonts. I haven’t seen anywhere giving a list of the useful classes & I keep forgetting them. ms-emphasis This applies the emphasis foreground and background color. Useful for highlighting rows or headers. ms-ContentAccentn-bgColor Where n is 1-6, these are the different accent colors of the theme. This class simply sets the css background-color ms-ContentAccentn-borderColor Where n is 1-6, these are the different accent colors of the theme. This class simply sets the css border-color ms-ContentAccentn-fontColor Where n is 1-6, these are the different accent colors of the theme. This class simply sets the css font color ms-sideNav This is the side navigation style and includes all the hover/active effects. ms-subtleEmphasis For when you want something a bit more subtle than the normal emphasis. ms-button-emphasize Make you buttons a bit more interesting, including a hover effect.   This is for my reference and I’ll add to is as I find other classes useful.

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

SharePoint on Windows Phone

AgilisPoint a free App for your Windows Phone