List of JS Libraries I’m using / looking into

July 3rd, 2014 Comments off

This is more of a note to myself so that I can remember the JavaScript libraries I’m interested in and what they do and maybe a related article.  These are mainly in dealing with SharePoint but could be anything really.  Not everything is compatible with everything else remember :-)


KnockoutJs – Data binding library, works with jQuery, great for a true single page app, IE no routing just data binding.  Yes I know SPA’s pages are called views.

AngularJS – Proper SPA framework, there’s Durandal but I’?m not going there even though I love knockout.


    - Linq Like queries, does need server side integration, not for local objects

Bootstrap – For that nice CSS layout grids and things.

Bootstrap UI – Directives for Angular using bootstrap

Angular Maps – Google maps directives for angular, something I’ve used already.


LinqJs – Linq for JavaScript, will work on JS objects, doesn’t do fetch for you

Js Loaders –  and

jQuery – Well how could I not mention it.

jQuery form validators

Sliders – ,,

fontawesome – No idea, well something to do with a shed load of CSS icons, vectors (no IE7)

Charts – jqPlot,, hicharts

Spinner - svg/vml Spinner, easier than a gif ?


Stuff to investigate

  • d3js – Don’t know why or what this gives me over anything else yet.
  • threejs – 3d library, gotta have some fun sometime.
  • Mobile Angular frameworks


Not a library but a list of handy SP2013 dev tools

Zimmergrens SP2013 Tools Page

SharePoint Designer 2013 – Working round some problems

June 19th, 2014 Comments off

I’ve been trying to do some customizations I did easily 2007 and 2010 but in 2013, it’s been a bloody nightmare.

I can hear you saying “Ahh missing designer mode”, well no not really I like xslt so the designer mode I can live without, although there are some things that it did make so much easier, like setting a form field to a textbox via a menu, all done in code now, no menu available like in this old article, which is an antiquated method anyway and best to do it in javascript.

So here are some of the problems.

First DVWP.  Nightmare.  Trying to customize this, I haven’t the time to figure out all that’s wrong with this one.  Just simple things, like inserting it, convert to xslt (all of it) then ripping the guts out of it to just be what I wanted, and then having it ignore all subsequent xchanges after the initial save.  Something very strange going on so I bailed on this, to revist later.

So I used the Item Forms instead, as they are built for form entry but also lists and paging, much like I expect the dvwp to work, only they work better-ish.

So the problems.

1. Where’s my button.

Once in the code you place the cursor in the white area (not yellow) where you want your webpart and nothings working, no buttons.  This is probably well known by now but do this.

In the Code View Tools menu click the Parse HTML button.


This usually sorts out the ribbon bar giving you what you need.  If it doesn’t, your cursor is in the wrong place.  Click round and about, when I wanted to add a CEWP to a page I had to select in the text of the end of a previous part, not in the white space after it for the add web part button to be active

2. Make it Easy in the XSLT

Insert your Display Form Part, then change the design to simple list mode.  It will change the xslt to something usable that you can extend without all the voodoo.

p2   p2a


3. Filtering

When you want to edit the query you are probably used to clicking filter and setting the menu items.  In this version I have had numerous problems when those filters are id’s or lookup fields.

I wanted to filter by a parent Id on a lookup field on my list.  So I added the display part and set the xslt to easy.  Next I know the Id of the parent is on the QueryString as pid param.

So I added the Parameter by clicking the Parameters ribbon button and setting the various values the name and the type(QS) and its name.



Great it inserted it into the ParamBindings and Params of the XSLT.  Now when I click the filter button it appears in the drop-down for selection.  If you save the page and run this it will not work. it will return everything or it might return one row, that’s another problem though, but its not filtering.


This is because the SPDataSource has had its query modified but it has not inserted the SelectParameter relating to the param you are querying against.  I had to manually enter it.


<asp:QueryStringParameter QueryStringField=”ID” DefaultValue=”1″ Name=”ParentIdeaId”></asp:QueryStringParameter>


Major bug there MS.

So I saved that and run the page, did it filter.  “Did it eck as like“.  Because the Query that this set up was querying for text not ID, the filter box doesn’t ask or figure out what you are trying to filter on so you have to edit the query as well to get the types right, in this case for a lookup field.  This is what I set mine to.

This is unencoded here, the string is encoded but that would be a pig to read. Changed elements are in bold.

<FieldRef Name=”ParentSubmission”  LookupId=”TRUE”/><Value Type=”Lookup“>{ParentItemId}</Value>


4. Returning one item

You have inserted your display form item, ran it and it shows 1 result. You look at the paging option in the menu and it says all items.  It’s lying.  Select this option and watch the xslt change.  you might find it shows all the options then.



Technorati Tags:
Categories: Uncategorized Tags:

How to get the SiteCollection Url in XSLT

June 17th, 2014 Comments off

I found this way to get the root site collection url into a DVWP

There are Global parameters available but you have to mess about with the bindings to use them.


So for this one you need

<ParameterBinding Name=”RootSiteUrl ” Location=”WPProperty[RootSiteUrl]“/>


Then at the top of the XSL (make it global to all templates)

<xsl:param name=”RootSiteUrl”></xsl:param>


Then in your XSL you can use it

<xsl:value-of select=”$RootSiteUrl” />


That’s it. Well it worked for me, but SP2013 and designers is so damn flakey it might not work for you, this was done on a WPPage not a wiki page that causes all manner of hell using webpatrs in those things.

Categories: Uncategorized Tags:

Set Fiddlers Icon based on Connected or Not

June 5th, 2014 Comments off

Thanks to @ericlaw for the info on this, since version of fiddler you can set the Tray Icon to whatever you want.

I like to know at a glance whether fiddler is connected or not, I leave mine running al the time, I have various issues with proxy servers and virtuals, sometimes it’s just easier to manage the hosts file in fiddler perhaps cos I?’m too lazy to go into admin mode and edit the real one.

fiddlerOff fiddlerOn

I used a simple red / green system you can guess which is which :-)

To do this copy the images to your system somewhere.

Then in Fiddler open the Rules Editor (CTRL-R) and make these changes, just point at your path not mine.

static function OnAttach() {
    // MessageBox.Show(“Fiddler is now the system proxy”);

static function OnDetach() {
    // MessageBox.Show(“Fiddler is no longer the system proxy”);

Save it and that’s it.

If they would just give me the option now so a left click on the tray toggles between connected or not and a dbl click open fiddler. Because for me its more than just a debugger now.

Whilst I’m talking changes some more tray options (right mouse menu) that I would love, hope your listening :-)

  •     Toggle Https decryption
  • Select Gateway option (something I have to do all the time, stupid pac file wont work in fiddler)
  • Autoresponder toggle
Categories: Uncategorized Tags:

God Ted, I love fiddler – or using fiddler to address individual servers on a HNSC)

April 25th, 2014 Comments off

This tool just gets better for me with every little bit more I learn about it. I use it as a proxy server for my VM’s to keep them of the main network, but have internet access. I use it for speed tests, I use it for dynamic debugging of javascript of sites I have no access too.  It’s wonders do not cease.

Yesterday I had an problem with a Host Named Site Collection, or rather it appears that one of the servers appeared to be slow.  But being a HNSC no AAM’s were created for it and with four front ends to test how the hell do you hit each one sseperately.

Chap running the servers was kind enough to give me the IP addresses and of course I can then edit the hosts file and test each one from the main address.

Well that sucks.

Enter Fiddler, did I say how much I love fiddler ?

In fiddler is a rules file,   CTRL-R will get you there. In that we can do marvelous things, in this case I wanted to handle my HNSC problem by having 4 separate urls I could hit and test each server in a load test script.

My host was something like

and I wanted to hit


Here’s how to do it in fiddler.  Edit the rules file and find the function OnBeforeRequest, its all javascript dontcha know.

Add this bit of code at the bottom of the function

<pre>         if (oSession.hostname == ""){
             oSession.hostname = "";
             oSession["x-overrideHost"] = ""; // <-- Server IP here!
         if (oSession.hostname == ""){
             oSession.hostname = "";
             oSession["x-overrideHost"] = ""; // <-- Server IP here!
         }         if (oSession.hostname == ""){
             oSession.hostname = "";
             oSession["x-overrideHost"] = ""; // <-- Server IP here!
         }         if (oSession.hostname == ""){
             oSession.hostname = "";
             oSession["x-overrideHost"] = ""; // <-- Server IP here!

Save it and do a test.

I even ran WireShark to see what was actually happening on the network stack, and it works, it was routing requests for specific servers to each individual server, and because we set the hostname to what it should be any code JS or server using the server name works fine too.

Makes me really want to crack open the fiddler manual and find out what other voodoo I can do.

Categories: development, Internet, Sharepoint Tags:

SharePoint Apps and AngularJS – SP.WebProxy Invocation using promises

April 17th, 2014 1 comment

Recently I’ve been trying to create a SharePoint 2013 app using AngularJS and angularui-bootstrap.

It’s been going well thanks to Jeremy Thake’s (@jthake) original demo.

But I wanted more! More than just access to the local site, I wanted access to the web, but I wanted to do it in the right AngularJs way, using the service so later when I figure out how to do DI testing I can, using promises too, which of course SharePoint doesn’t return in a way we can use in AngularJS.

So this code snippet (not complete app) will give you a clue on a way of doing it, there may be a better way to do this in AngularJS Im no expert, I see references to moduile.Factory calls in other examples, but I’m sticking to Jeremy’s starter code for now.

This example uses UK police data, details of the license are here

'use strict';
var myApp = angular.module('myApp', []);

function myAppCtrl($scope, $myDataService) {
    $scope.getPoliceClick = function () {

        //Whoops, edited this line as it was wrong from original post
        var promise = $myDataService.getPolice($scope);
            //Success callback, check the status = 200 and go mad
            function (response) {....
            //Epic Fail callback
            function (response) {....

//this method signature is same as Jeremy's thats why the $http is there, I use it for lists as well
//just not in this code sample
myApp.service('$myDataService) ', function ($q, $http) {
    this.getPolice = function ($scope) {
        var deferred = $q.defer();
        var context = SP.ClientContext.get_current();
        var request = new SP.WebRequestInfo();
        // We need the response formatted as JSON.
            "Accept": "application/json;odata=verbose"
        var response = SP.WebProxy.invoke(context, request);
            function () {
                //Notice the scope apply, because the async call is made from outside of angular
                //just resolving will not work
            function () {
        return deferred.promise;
Categories: development, Sharepoint Tags:

Angular Google Maps Example

April 10th, 2014 Comments off

I’m trying to get my head around angular and using it for writing SharePoint Apps, but one of the first things I wanted to write used google maps.

Luckily (or not depending on how much pain you want to know this caused me) there is a directive library for google maps.

After far too many save and refresh and crash cycles I have a simple example working that has markers and info windows.

Here it is

<!DOCTYPE html> 
<meta charset="UTF-8">     
<title>angular-google-maps example</title>     
        .angular-google-map-container {
            height: 800px;
<!-- Google Maps API v3 -->     
<script src=";language=en"></script> 	
<!--  v1.0.8 -->     
<script src="angular.min.js"></script> 	
<!-- -->     
<script src="underscore-1.6.0.min.js"></script> 	
<!-- -->     
<script src="angular-google-maps.min.js"></script> 
     <div ng-app="BinaryJamApp">
         <div ng-controller="MappingController">
 		<google-map  center="" zoom="map.zoom" draggable="true" events=""  options="map.options" pan="true"  control="map.control">
			<markers models="sites" coords="'self'" click="'onClicked'">
 				<windows show="'showWindow'" closeClick="'closeClick'" ng-cloak>
 					<p ng-non-bindable style="width:200px">{{ options.title }}</p>
 					<p ng-non-bindable>{{ latitude | number:4 }}, {{ longitude | number:4 }}!</p>
        var BinaryJamApp = angular.module('BinaryJamApp', ['google-maps']);

        function MappingController($scope) {

			$ = {
				control: {},
				options: {
					streetViewControl: false,
					panControl: false,
					maxZoom: 20,
					minZoom: 3
				center: {
					latitude: 52,
					longitude: 0
				zoom: 6

			var onMarkerClicked = function (marker) {
				marker.showWindow = true;

			$scope.sites.push({latitude:52, longitude:0, options: { title: "Southerners" } });
			$scope.sites.push({latitude:52.5, longitude:1, options: { title: "Turkeys" } });

			_.each($scope.sites, function (site) {
				site.closeClick = function () {
					site.showWindow = false;
				site.onClicked = function () {


Categories: Uncategorized Tags:

SharePoint 2010/2013 Open a Form on the browse tab

April 10th, 2014 Comments off

This is something I regularly search for and more and more often I’m finding people posting code versions when all I really want is the URL parameter to force it. So luckily I stumbled across SharePoint Den page that posts the following



So cheers chap, the more places this version is shown I hope helps someone else find the way correct for them

Technorati Tags:

Categories: Sharepoint Tags:

SharePoint 2010/13 Getting the Default Disp Page in JSOM

April 10th, 2014 Comments off

Being pretty new to JSOM, thought I might write this down so I don?t forget again.

JSOM is just quite a bit different to REST or SPServices or just ferreting around the old server API, so it’s going to take some time.  Give me REST any day, but today I find myself altering some one else’s code.

I needed to find the default display page Url

Well it’s pretty simple, but web examples are gathering all list information the code I had was getting a specific list, not sure that they are still not getting all lists, but hey.

Adding the paramter “Include(DefaultDisplayFormUrl)” into the getByTitle function, instructs CSM that you want this bit of info.




 targetList = clientContext.get_web().get_lists().getByTitle("Glossary", "Include(DefaultDisplayFormUrl)");  



But you can’t access it immediately.

No you have to wait until after the executeQueryAsync only then can you call the function on the targetList variable, so watch those scopes,


  targetList = clientContext.get_web().get_lists().getByTitle("Glossary", "Include(DefaultDisplayFormUrl)");  
      Function.createDelegate(this, function() { alert( targetList.get_defaultDisplayFormUrl();) } ),
      Function.createDelegate(this, function() {alert("failed")})

Technorati Tags: ,,

Categories: development, Sharepoint Tags:

Using jQuery Queue with SPServices

November 20th, 2013 3 comments

One of the problems I came across the other day is I had several hundred items in a list to process.  To make life easy I use javascript on a web part page to make an app to process the items I wanted to do. 

However when its hundreds, do them all at once and you’re in trouble.  You block the UI thread, you cant update any status values, I dare not think what would happen if you called a couple of hundred async ajax queries all at once, it might just handle them – you can try it if you want ;-)

To get round this I thought I’d try to use jQuery queues.  So in this example I have a custom list which I get data from, I’m using promises to get the data but there was no need, I just used some code from the last example.  Once I have the data I inject it onto the screen an lose the original data array (now this is the point where I should use knockout and let the screen adjust to the observed data, but this is a demo).  Then on a click event, a big process this now button, I iterate thru each item on the page, gets its details and add a function to the queue that calls another function (just for being tidy I could embed) which makes a call to SPServices async update, phew.

Then I tell the queue to start executing the functions in it, one at a time.  At the end of each async success, it calls the next function, you might spot the mistake here, what if it doesn’t succeed (well I forgot to code it, but you need to do something with the item and the queue when you do it).

Hint: When calling functions and sub functions, make sure you “var” every variable, I forgot and it only updated the last item.

Technorati Tags: ,,

Here’s the code


 <script src="js/jquery.SPServices-0.7.1a.min.js"></script>  <script src="js/underscore.min.js"></script>   <div id="mainApp" > 	<div id="appStatus">Initialising</div>	<div id="appButton" style="cursor:hand;display:none">Click Me</div> 	<div id="appBody"></div>  </div>        <script>

var binaryJamQueueTest = function ($) {
   	//Private Members
  	var testListArray;

	function main() {

		//Remember that $.when is an async function also, so dont put anything after this code
		//unless you want it running immediately, in which case stick it here first.
		.fail(function() {
  	function loadFailure() {
  		//Oh dear
	  	$("#appStatus").text("Failed to Load data");
  	function dataReady() {
  		$("#appStatus").text("Processing Data");
  		//Earlier versions did not queue so in cases where you will thread block
  		//use something like this to give the DOM time to update
  		setTimeout(function() {
	  	}, 10);
  	function asyncGetTestList() {
  		var dfd = $.Deferred();
			operation: "GetListItems",          
			async: true,          
			listName: "TestList", 
			CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='name' /><FieldRef Name='valueField' /></ViewFields>",

			completefunc: function(data, status) { 
				if (status== "success") {
							return {
								id: $(this).attr('ows_ID'), 
		                        title: $(this).attr('ows_Title') , 
		                        name: $(this).attr('ows_name') ,
		                        value: parseInt($(this).attr('ows_valueField')) 
		return dfd.promise();
  	function updateListItem(id, title, value, $item, next)
		//Notice here, if I was databinding I would only have to update the value not the html item
			operation: "UpdateListItems",
			async: true,
			ID: id,
			listName: "TestList",
			valuepairs: [ ["valueField", value]],
			completefunc: function(xData, Status) {
				$item.text(title + " " + value);
				$item.attr('value', value);
  	function processList()
		var $taskQueue=$({});
  		var htmlAdd="";
		$.each(testListArray, function(locIndex, testListRow) {
				htmlAdd+="<li id='" + + 
								"' title='" + testListRow.title + 
								"' name='" + + 
								"' value='" + testListRow.value + 
						  "'>" + testListRow.title + " " +
						 testListRow.value + 
		//Clear the original list Im going to use stuff onscreen, I know its wrong and not MVC
		//But Hey you do it the right way with a data binding library instead
  		html=$("<ul id='itemsToProcess'>" + htmlAdd+ "</ul>");

  		$("#appButton").click(function() {
			$.each($("#itemsToProcess").children(), function() {
				var $currentLi=$(this);
				$taskQueue.queue('tasks', function(next) {
	  				var id =$currentLi.attr('id');
	  				var title =$currentLi.attr('title');
	  				var value=parseInt($currentLi.attr('value'));
	  				updateListItem(id, title, value+1, $currentLi, next );


	//Public Members
  	return {
   		init : main

}(jQuery); //binaryJamQueueTest Module

jQuery(function () {


Categories: development, Sharepoint Tags: