Search

Binary Jam

Simon's blog, SharePoint, Arduino type things.

MDS Compliant Disp Template example

This is just a reminder for me really, take a look if you like, but its not done, based on Martin Hatch’s colour field example with Wictor’s mds detection.

https://github.com/binaryjam/DisplayTemplateExample

 

/// <reference path="DefinitelyTyped/microsoft-ajax/microsoft.ajax.d.ts" />
/// <reference path="DefinitelyTyped/sharepoint/sharepoint.d.ts" />
/// <reference path="DefinitelyTyped/DisplayTemplateFieldColour.d.ts" />
"use strict";
//This is a work in progress, trying to come up with a kind of best practice, of best practices
//because the office pnp examples do not do things how other JS peeps might.


//Im not convinced about this either, this should be SOD'ed  / Leaving in for future reference
//(jQuery || document.write('//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js'));

//Creates the namespace and registers it so MDS knows its there, 
Type.registerNamespace('BinaryJam.JSLink');

(function(ns) {
	
	ns.DisplayTemplateFieldColour = function () {
		
		//private members
		var overrides = {};
	  	overrides.Templates = {};
	  
	   	overrides.Templates.Fields = {
	       //Colour is the Name of our field
	       'Colour': {
	          'View': colour_FieldItemRender,
	          'DisplayForm': colour_FieldItemRender
	        }
	    };

		//Create CSS classes
		var style = document.createElement('style');
		style.type = 'text/css';
		style.innerHTML = '.binaryJam_dt_FieldColour { display:inline-block; margin 3px;width:20px;height:20px;border:1px solid black; }';
		document.getElementsByTagName('head')[0].appendChild(style);
		
		function colour_FieldItemRender(ctx) {
			if (ctx !== null && ctx.CurrentItem !== null) {
				
				var divStyle="style='background-color:" + ctx.CurrentItem['Colour'] + "'";
				var html = "
" + ctx.CurrentItem['Colour'] ; return html; } }; function registerTemplateOverrides() { SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrides); }; function mdsRegisterTemplateOverrides() { var thisUrl = _spPageContextInfo.siteServerRelativeUrl + "js/jslink/test1.js"; RegisterModuleInit(thisUrl, registerTemplateOverrides); }; //Public interface this.RegisterTemplateOverrides = registerTemplateOverrides; this.MdsRegisterTemplateOverrides = mdsRegisterTemplateOverrides; }; })(BinaryJam.JSLink); //This is the "official" way to check MDS //https://msdn.microsoft.com/en-us/library/office/dn913116.aspx if ("undefined" != typeof g_MinimalDownload && g_MinimalDownload && (window.location.pathname.toLowerCase()).endsWith("/_layouts/15/start.aspx") && "undefined" != typeof asyncDeltaManager) { BinaryJam.JSLink.DisplayTemplateFieldColour.MdsRegisterTemplateOverrides(); } else { BinaryJam.JSLink.DisplayTemplateFieldColour.RegisterTemplateOverrides(); };

 

Adding a Post Feature Activation notification

Recently I’ve been doing some 2010 work on a site which needed a bunch of javascript and some CSS files. Now most of these were deployed to the style library but as you know you often have to check them in etc once deployed.

Rather than figure that out I thought I’d just give a message to the user on activation of the feature

Continue reading “Adding a Post Feature Activation notification”

Pseudo Synchronous Call Queuing in Angular with promises

Here is example code that batches aync ajax calls into blocks of 5 and waits before calling the next set, without blocking the UI thread.

Continue reading “Pseudo Synchronous Call Queuing in Angular with promises”

Posting to Pushbullet via ThingSpeak

A Step by step guide on configuring ThingSpeak to auto post to PushBullet, I use ESP8266’s but the you can use this for anything posting to ThingSpeak.

Continue reading “Posting to Pushbullet via ThingSpeak”

SharePoint 2013 App – AngularJs, BootStrap and ngGrid example

I’ve created a SP2013 App including all the code and published it on Codeplex so anyone can take a look and steal the code get ideas.

It has an example of two data fetch techniques (see my earlier blog post for the third external data using the proxy)

using $http to get REST data or $.ajax to get legacy WebService Data.  With the appropriate angular code to handle either, no antipatterns here.

Perhaps I should have used SPServices instead of $.ajax it would have made it easier and I would not have blatantly nicked Marcs getZrows function (thanks Marc 😉  )

https://spappnggrid.codeplex.com/

Capture

Last Update:14/10/2014
Organised into folders and separate files for controllers and services. Changed Service to Factory.
(Service code left in project for example purposes)

 

 

Detecting the Language in a DVWP

I have been hunting all morning on how to do this.  I can do it in a CQWP with parameterbinding set correctly but no-one, no-one has put any example code on how to do this in a DVWP.  I’ve read many an article talking about ddwrt functions lists of variables which are not accessible even if you include the xslt namespace.

Eventually I figured something out.  It’s not pretty but then again, what SharePoint is doing isn’t exactly too far removed.

In order for SharePoint to know what browser is being used and what language the browser has to send this information via http headers so we have all the info we need.

 

In you DVWP start by adding a Parameter (I called mine Param1)

image

Set it to a Server Variable

Type in HTTP_ACCEPT_LANGUAGE

and give a a default value, mine says none, but set it to your default language e.g. “en-GB”

That will get you the language codes you need into your XSLT.

 

However those strings can be quite large, e.g.

    en-GB,de-DE, {lots of other stuff}

The bit your interested in, well that’s up to you in my case I care about language, and being British there are no such things as regions just ours and everyone else that’s doing it wrong.

So I have in my XSLT


This grabs the “en” from the string.  If I switch to German then I get “de”

So now I have my language code I can do conditional XSLT based on a language code.

 

This has allowed me to create multi lingual Content web parts in WSS 3. Which is handy.

It’s simple, if someone can point me at a better way please do, I haven’t tested this thoroughly with lots of different browsers and languages so I may need to get a bit cleverer that this simple example.  But for the many of you searching for how to do it, this might be an option for you.

 

Technorati Tags:

List of JS Libraries I’m using / looking into

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.

BreezeJs

    – 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 – http://requirejs.org/  and  http://labjs.com/

jQuery – Well how could I not mention it.

jQuery form validators

Sliders – http://slippry.com/ , http://bxslider.com/, http://workshop.rs/projects/coin-slider/

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

Charts – jqPlot, http://www.flotcharts.org/, hicharts

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

 

Stuff to investigate

 

Not a library but a list of handy SP2013 dev tools

Zimmergrens SP2013 Tools Page

SharePoint Designer 2013 – Working round some problems

UPDATE: Really Big Hint, if you are in SPDesigner messing with forms then you’re likely doing it wrong. Seriously, Im not kidding, DON’T crack open SPD and mess with DVWP’s look at Display Templates / JS Link every single time. If you have too then this is still a handy article.

Designer is Buggy. So here are some hints when doing DVWP or DFWP including filtering lookups, where to put the cursor + others.

Continue reading “SharePoint Designer 2013 – Working round some problems”

How to get the SiteCollection Url in XSLT

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.

Create a free website or blog at WordPress.com.

Up ↑