Me & My SharePoint [FrontEnd]

© Christian Stahl – All about SharePoint branding & customizations

Back on board in the MVP community — April 8, 2017

Back on board in the MVP community

Once an MVP, always part of the MVP community! MVP Reconnect is a new community for MVPs! This program is the official way for former MVPs  to stay in touch with Microsoft and other community leaders.

MVP_Reconnect_Logo_Blue_Color_RGB

I have had the honor of being SharePoint Server MVP awarded for 4 years in a row, 2011-2014 and after that I’ve started up my own company called eVolution Interactive Sthlm
and has had a strong focus on my business and my customer, but now It’s time to get back into the swing of things again. I can see a bright future for business around Office 365, Azure with its services and not least SharePoint, as I work mostly with.

Can wait to start blogging more frequently, speaking at conferences around the world and support people where I can – not least because this opportunity gives me great inspiration to continue working for the fantastic community around SharePoint!

To start with my next plan is to write a new series centred around using REST CRUD operations, for example if you need to inject JS/CSS files into SharePoint host web from a add-in or how you can use REST in your add-ins to easly work with no SQL databases. Let’s see what comes up in the series. Got some useful stuff to share from my past projects out there.

Love to you all and thank you Microsoft for all support and the possibilities with private networking channels, regional event invitations and other engagement opportunities that comes with being a part of the great MVP community!

</christian>

Speaking at the aOs Tour in India — April 3, 2017

Speaking at the aOs Tour in India

If you are located nearby Mumbai or Bangalore in India, don’t miss my sessions about SharePoint Hosted Add-Ins and about Display Templates and search in SharePoint. This will happens in Mumbai April 4th and in Bangalore April 6:th.

agenda

This conference is welcomed by Microsoft India in Mumbai and Bangalore offices, with strong support of the India local aOS Ambassador, my friend Dipti Chhatrapati.

Read more about the conferences here:

 

Nominated as a top SharePoint influencer for harmon.ie’s annual Top 25 SharePoint influencer initiative — August 11, 2016

Nominated as a top SharePoint influencer for harmon.ie’s annual Top 25 SharePoint influencer initiative

Of course, it’s nice to have been nominated and acclaimed addition to activity in the great SharePoint Community amongs all the other SP dudes in that list. Community voting will run August 1 – 19. Now my friends, time to vote  🙂

Vote here 

Btw, what happens otherwise? Since I’ve started up my own company for 1 1/2 years ago, I have had very little time to write blog posts, it has been super busy with various assignments. Anyway, I have ideas for new stuff on the front end scoop of SharePoint and hope soon to have time to write down what I think some interesting articles on the subject. I will have two sessions on SEF in 26-28 October in Stockholm, Sweden about SP Addins and Display templates, so probably I will stock up on some articles about this in soon. In the meantime, stay in tune!

 

SEF Unity Connect Logo no AZURE-updated

</ christian>

 

 

Responsive Web Design in SharePoint — November 11, 2015

Responsive Web Design in SharePoint

Welcome to my new series about Resposive Design in SharePoint 2013! My intention in writing this is to show you some Quick, downloadable and easy to follow examples to get you started into the techs of responsive design in SharePoint Online or On premise Environment. My goal is to provide different examples made out of different approaches all from a Heavy custom UI to how just to inject a few lines of CSS and JS depending of your needs.
ESPC

I’ll actually speak today in Europe SharePoint Conference (Stockholm) about responsive web design in SharePoint, so it’s great day to start writing this series.

In the next post I’ll provide you with some CSS and JS for responsivness in SharePoint, so stay in tune!

Most visited sites in SharePoint 2013 — April 30, 2015

Most visited sites in SharePoint 2013

Hi! Here come’s just a short blog post about how to Query the REST search api in SharePoint 2013, Online or On prem to display most visited sites that could look something like the image below. Take not that you should be able to get something similar with a content search web part with help of a custom display template as well. But if you need to display this in an app part or a script web part I hope this could be in any help.

TopSite

Let’s try this!

Download my experimental code from here, and please if you found something that can be written better or if you have any other ideas regarding this, drop me a comment!

Take a look at some other posts about REST in SharePoint I’ve written Before, you’ll find them over here

The main parts of this is the search API

_api/search/query?querytext=

And the ViewsLifeTime property

ViewsLifeTime

/Christian

How to create a text-size switcher in SharePoint with HTML5 Web storage — March 31, 2015

How to create a text-size switcher in SharePoint with HTML5 Web storage

I’ve written a couple of post earlier about how to work with JS and cookies, that’s cool but now in the era of the client side it’s time to take a look into how to work with HTML5 Web Storage and Local Storage and in the example, how to create a simple text-size switcher.

What is Web Storage and what can we do with it?

Ok, with local storage, a web application like SharePoint can store data locally within the user’s browser. Before HTML5, app data had to be stored in cookies, included in every server request. Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance.
Yeah localStorage works somewhat like a database; it stores some data locally on the user’s browser, which then can be retrieved using JavaScript. The data will always be available in the user’s browser, even after the user has closed the browser.

There are many different ways you could use web storage, like:

  • Navigation: Remember the last state, add an active class into the DOM
  • Forms: Remember form values
  • Branding: Let the user decide things like an alternate CSS (style sheet switcher)
  • WebService calls: If something doesn’t change then there is no point in loading it over the Internet compared to local access which is so much faster

Local Storage v/s Cookie

Cookies, the old way of saving data are primarily for reading server-side. Local storage can only be read client-side, so if you need to create a function for the client and not for the server, use Local Storage. Got it? The Local Storage stays on the client, while cookies are sent to the server through the HTTP header. Cookies are not considered secure and not able to hold much data either.

More to note

The Local Storage stores data with no expiration date and gets cleared only through JavaScript or by clearing the Browser Cache or Locally Stored Data, unlike cookie expiry. There’s two kind of ‘storage objects’, Local and Session (storage). A Local storage will keep the data stored when you close the tab or a the broser window and the Session storage will not keep anything stored. Local Storage comes with HTML5, so if you need to create an app supporting really old browsers (for example IE7) you can use cookies as a fallback by for example modernizr as the detector. However Local Storage are a part of the HTML5 specs, so if you allow HTML5 in your master page, which comes out of the box in SharePoint 2013 and the users have IE8, latest Google Chrome, Safari, Firefox etc your ready to go!

Demo: Create a text-size switcher

This example will change the SharePoint body font size from small to large in Three steps. This will work in SharePoint 2013, onprem or Online. I’ve tested this in IE11 and latest Google Chrome. Take a look at a video of the text-size switcher. Click at the SWF file and open it.

I’ll just provide you the HTML, CSS and JS – you could implement this in a custom masterpage, APP or for example in a text file linked from a content editor web part. In this case I’m using _spBodyOnLoadFunctionNames and if your using a custom master page, be sure to include a reference to an external JS file in the bottom of the master page, just above the ending body tag. Keep the reference to jQuery in the head section of your master page. You can download a masterpage with a css file and js file if you need to take a look from here.

Markup

<div class="radioFontHolders">
<div class="letterFontsHolder">
<div class="miniLetter">Aa</div>
<div class="midLetter">Aa</div>
<div class="bigLetter">Aa</div>
<div style="clear:both"></div>
</div>           
<div class="radioHolders">
<input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" value="miniFont" /><label for="radio-1-1"></label>
<input type="radio" id="radio-1-2" name="radio-1-set" class="regular-radio" value="midFont" /><label for="radio-1-2"></label>
<input type="radio" id="radio-1-3" name="radio-1-set" class="regular-radio" value="maxFont" /><label for="radio-1-3"></label>
</div>
</div>

JS

// Using SP JS API to push the function instead of document ready or window load
_spBodyOnLoadFunctionNames.push("Demo.Intranet.Contrast");

// Establish Namespace
Type.registerNamespace('Demo')
Demo.Intranet = Demo.Intranet || {};

// start set contrast ---
Demo.Intranet.Contrast = function () {

jQuery('.radioHolders input').click(function () {
var fontCode = jQuery(this).val();
if (fontCode == 'miniFont'){
jQuery('#miniFont').attr("checked", "checked");
jQuery("body").removeClass("midFont MaxFont").addClass("miniFont");
}
else if (fontCode == 'midFont'){
jQuery('#midFont').attr("checked", "checked");
jQuery("body").removeClass("miniFont MaxFont").addClass("midFont");
}
else if (fontCode == 'maxFont'){
jQuery('#maxFont').attr("checked", "checked");
jQuery("body").removeClass("miniFont midFont").addClass("MaxFont");
}
else{}

localStorage.setItem("fontCode", fontCode); 
});

if (localStorage.getItem("fontCode") !== null) {
var fontCode = localStorage.getItem("fontCode");
if (fontCode == 'miniFont'){
jQuery('#radio-1-1').attr("checked", "checked");
jQuery("body").removeClass("midFont MaxFont").addClass("miniFont");
}
else if (fontCode == 'midFont'){
jQuery('#radio-1-2').attr("checked", "checked");
jQuery("body").removeClass("miniFont MaxFont").addClass("midFont");
}
else if (fontCode == 'maxFont'){
jQuery('#radio-1-3').attr("checked", "checked");
jQuery("body").removeClass("miniFont midFont").addClass("MaxFont");
}
else{}
}
}

CSS

.radioFontHolders{
border:0px #e1e1e1 solid;
padding:10px 5px 10px 5px;
margin-top:30px;width:100%;
}
.letterFontsHolder{
padding:1px;width:170px;
}
.miniLetter, .midLetter, .bigLetter{
float:left;font-family:"Times New Roman", Times, serif;
font-weight: 700;height:32px;
border-bottom:1px #ccc solid;
color:#035183
}
.miniLetter{
width:33.33333%;
font-size:18px;
width:40px;line-height:41px;
padding-left:7px;
}
.midLetter{
width:33.33333%;
font-size:26px;width:50px;line-height:36px;
padding-left:7px;
}
.bigLetter{
width:33.33333%;
font-size:40px;width:60px;line-height:26px;
}
.font-1, .font-2, .font-3{
width:28px;float:left;height:20px;
}
/* set the fonts */
.miniFont{font-size:0.9em}
.midFont{font-size:1.3em}
.MaxFont{font-size:1.5em}
.radioHolders{
margin-top:10px;
margin-bottom:10px;
z-index: 1;width: 200px;
z-index:999;background-color: transparent
}
/* radios */
.regular-radio{display: none}
.regular-radio + label {
margin-left:10px;
-webkit-appearance: none;
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 9px;
border-radius: 50px;
display: inline-block;
position: relative;
background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
border-radius: 100%;
zoom: 1; cursor: pointer;
display: inline-block;
margin-right: 12px;
-webkit-appearance: none;
}
.regular-radio:nth-child(1) + label:after{background-color:#CDCDCD}
.regular-radio:nth-child(3) + label:after{background-color:#CDCDCD}
.regular-radio + label:after{background-color:#CDCDCD}
/* selected */
.regular-radio:checked + label:after {
content: ' ';
width: 12px;
height: 12px;
border-radius: 50px;
position: absolute;
top: 3px;
background: #84B942;
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
text-shadow: 0px;
left: 3px;
font-size: 32px;
border-radius: 100%;
box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.4), 0 1px 1px hsla(0,0%,100%,.8);
content: '';
display: block;
}
/* not selected */
.regular-radio + label:after {
content: ' ';
width: 12px;
height: 12px;
border-radius: 50px;
position: absolute;
top: 3px;
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
text-shadow: 0px;
left: 3px;
border-radius: 100%;
box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.4), 0 1px 1px hsla(0,0%,100%,.8);
content: '';
display: block;
}

Thanks, Christian

Add a breadcrumb in SharePoint 2013 — February 28, 2015

Add a breadcrumb in SharePoint 2013

Hi! Here come’s just a short blog about how to implement a breadcrumb in SharePoint 2013 onprem or online, something that can be just as useful like the other navigation elements like the global navigation.

The user needs to know his location in the website’s hierarchical structure in order to possibly browse back to a higher level in the site hierarchy, useful when the structure of the SharePoint site follows a strict hierarchical structure of similar formatted content e.g not a search driven structure by manage metadata. Note that a breadcrumb should not be used on the startpage of your site collection, you can hide it on the welcome page with a display none in the page layout or similar. That’s cool, but how about to implement this breadcrumb then, well it’s just to add a ASP:SiteMapPath control onto your custom masterpage!

breadcrumb

Let’s try this!

Add this somewhere in the markup of your Custom master page

<div class="customBreadCrumb ms-dialogHidden">
   <asp:SiteMapPath SiteMapProvider="CurrentNavigation" ID="ContentMap" SkipLinkText="" RenderCurrentNodeAsLink="false" NodeStyle-CssClass="ms-sitemapdirectional" runat="server"/>
</div>

And here’s the CSS, note that I’ve created the Arrows with CSS3 with a little help of on of my favorites in CSS3; transform (rotate, scale and skew)

.customBreadCrumb{
padding-left:10px;
padding-right:10px;
padding-bottom:0px;
}
.customBreadCrumb > span{
background-color:transparent;
border-bottom:0px #ccc solid
}
.customBreadCrumb a:link, .customBreadCrumb a:visited {
color:#555;
font-family:Arial;
font-size: 12px
}   
.customBreadCrumb .ms-sitemapdirectional{
font-family:Arial;
font-size: 12px;
color:#999
}
/* hide separators */
#ctl00_ContentMap span:nth-of-type(2), #ctl00_ContentMap span:nth-of-type(4), #ctl00_ContentMap span:nth-of-type(6), #ctl00_ContentMap span:nth-of-type(8) {
display:none
}
.customBreadCrumb {
position:relative;
padding:10px 0px 0px 8px
}
#ctl00_ContentMap  {
display: inline-block;
border: 1px solid #E8DABF;
border-radius: 5px;
overflow: hidden;
width: 100%;
}
#ctl00_ContentMap span, .customBreadCrumb a:link, .customBreadCrumb a:visited{
font-family:Arial;
}
/* change height? change both line height and height and width for the ID #ctl00_ContentMap span:after*/
#ctl00_ContentMap span, #ctl00_ContentMap span:after{
line-height: 30px;
height: 30px
}
#ctl00_ContentMap span:after {
width: 35px;
content: '';
z-index: 1;
border-right: 1px solid #E8DABF;
border-top: 1px solid #E8DABF;
position: absolute;
right: 0;
top: 0;
box-sizing: border-box;
-webkit-transform: translateX(20px) rotate(45deg) scale(0.6) skew(15deg,15deg);
transform: translateX(20px) rotate(45deg) scale(0.6) skew(15deg,15deg);
-ms-transform: translateX(20px) rotate(45deg) scale(0.6) skew(15deg,15deg); /* IE9 */
}
#ctl00_ContentMap span {
list-style: none;
float: left;
display: block;
position: relative;
padding: 0px 14px;
text-align: center;
}
#ctl00_ContentMap span a {
padding:0px 6px 0px 12px;
color: #000;
text-decoration: none;
}
#ctl00_ContentMap span:last-child {
padding-left: 20px;
}
.ms-sitemapdirectional a{
font-family:Arial;
font-size:1.0em;
}
#ctl00_ContentMap span:first-child {
padding-left: 0px;
}
#ctl00_ContentMap span,
#ctl00_ContentMap span:after{
background-color:#fff;
}
#ctl00_ContentMap{
border:1px;border-radius: 2px;
}
#ctl00_ContentMap > span{
margin-bottom:1px;
}
#ctl00_ContentMap span a:hover{
color: green;text-decoration: underline;
}
#ctl00_ContentMap span:first-child{}
#ctl00_ContentMap span:after {
width: 35px;
-webkit-transform: translateX(20px) rotate(45deg) scale(0.5) skew(15deg,15deg);
transform: translateX(20px) rotate(45deg) scale(0.5) skew(15deg,15deg);
-ms-transform: translateX(20px) rotate(45deg) scale(0.5) skew(15deg,15deg);
}
.ms-sitemapdirectional a{}
.customBreadCrumb a:link, .customBreadCrumb a:visited{
color:#555;
}   
.customBreadCrumb .ms-sitemapdirectional{}
#ctl00_ContentMap span:last-child{
overflow:hidden
}

/ Christian

What’s up 2015 — January 31, 2015

What’s up 2015

Ok readers, so it was time to sum up the past year and take a look into what to expect in this new year. This year will be a kind of change in my career, from February 1. The big news is that I will start up my own company, ‘eVolution Interactive Sthlm’ after working as a SharePoint consultant at two different consulting companies since 2006, Humandata and CGI. Of course it is just incredibly exciting and I will then hopefully be able to take me a little more time to work on community around SharePoint, anyway, I will not slowing down any way when it comes to writing blog posts, other articles and speaking at conferences, etc.

At the moment, I have not yet fixed any public website with a description of what services I can help with, contact information, etc., for those who are interested in hiring me, but as soon as I have it in place, I will publish a link on this blog!

Plans for the future

Well the details will change constantly and nobody knows the future, but I will do my best and work as hard as I can to get my business to go around. Right now I’m looking for an office space, need to find an inspiring place somewhere in central Stockholm, I have a few options I’m considering at the moment so we’ll see what happens here.

I will as before continue doing what I love most about, consulting and educate. I will publish some apps, continue to write blog posts and speak at SharePoint conferences both in Sweden and internationally.

2014

A fun year at full speed, two major challenging projects on SharePoint 2013 in which I participated as a front-end developer and web designer. Besides all this, I have also taken the certification ‘70-480 Programming in HTML5 with JavaScript and CSS3’ this summer, which actually was quite a challenging one I must say. Yes that’s right, I also work as a teacher at LabCenter in Stockholm and at EC. I do educate in the area of SharePoint branding, apps and client code scripting etc. The education part of my job is exciting and will definitely have to continue this year as well. I’m also members of the management team for EC.

Besides all this, I have traveled a lot and talked at a few different SharePoint Conferences around like Miami and Las Vegas SharePoint Conference 2014, Dubai SP Saturday, Slovenia SharePoint Days 2014, Stockholm, SEF2014 and the yearly MVP Summit in Seattle. Every one of this conferences and experience in itself really deserves its own blog post. I have met and had exchanges of so many people, meet old friends and got new ones, people from different cultures and from different backgrounds, that part is perhaps what has given most in itself.

Some pictures from a few of the events the past year
coll1

coll2

coll3

coll4

coll5

coll6

Getting started with REST in SharePoint 2013 – Part VIII — December 31, 2014

Getting started with REST in SharePoint 2013 – Part VIII

Welcome to the last post in this series about REST in SharePoint 2013. In this post it’s time to take a look into Knockout, a JS library that let’s you associate DOM elements with ‘model data’, instead of pushing or appending data by JS you can separate markup from the JS. You can think of Knockout as a general way to make UIs for editing JSON data.

Please read the previous posts in this series before you go on to this post:

Hey what’s Knockout?

Knockout js (shortly called KO) is a popular JS library that helps to create rich & interactive web applications. It works directly with the web application’s underlying data model. Using KO with any web application is simple, clean and straightforward. Its powerful in the context of dynamic UI creation.

In previous example I’ve used jQuery for the Ajax stuff, but what should you use? Well KO doesn’t compete with jQuery or similar low-level DOM APIs. KO provides a complementary, high-level way to link a data model to a UI. KO itself doesn’t depend on jQuery, but you can certainly use jQuery at the same time, and indeed that’s often useful if you want things like animated transitions. I would try to use KO in the first hand if it’s about a more complex structure of data you are going do display in let’s say an app, otherwise if its just about to roll up some stuff from a list in SharePoint I would just do as described in the previous posts in this series. Please note that KO is not the only player here, there are as always a bunch of alternative techniques and framworks out there, but that’s maybe a subject for a another post in the future.

KO in short

  • Declarative bindings
  • Pure JS, minimal and works cross browser
  • A framework that let’s you build interactive CRUD applications in SharePoint with help of REST

Let’s try Knockout!

For this example I have created a custom list called ‘Knockout’ in a subsite called ‘knockout’ below the root site collection. I have added two custom columns (multiple text) to the list called ‘Introduction’ and ‘Content’ and added a few example items. The idea is to display the content from the list in a app or web part on the start page of the root site. How to create an app or web part is out of scoope for this post, if you want to try this you can just add this stuff into a textfile in a document library in the root site and use a content editor and link it to the textfile including the JS and the markup you’ll find down below.

KnockOut

It’s a standard SharePoint list at the top, and below is an example of you can create your own custom look and feel with help of KnockOut

<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
<script type="text/javascript">
var rootSite = "https://swe.sharepoint.com/";
var subSite = "knockout";
var results = [];

function LoadStuff(index) {
$.ajax({
url: rootSite + subSite + "/_api/web/lists/GetByTitle('KnockoutList')/items",
method: "GET",
headers: {"Accept": "application/json; odata=verbose"},	
  success: function(data){
    results.push.apply(results, data.d.results);
    ko.applyBindings(results);
  },
  error: function (fn, status, error) {
    alert('Error:' + error);
  }	
});
}
$(function(){LoadStuff(0)})
</script>

<div>
<div data-bind="template:{name:'KoList', foreach:results, as:'rows'}"></div>
<script type="text/html" id="KoList">
  <table cellpadding="0" cellspacing="0" class="knockOutTable">
    <tr>
     <td id="td-alfa" data-bind="text:Title"></td>
     <td id="td-beta" data-bind="text:Introduction"></td>
     <td id="td-gamma" data-bind="text:Content"></td>
  </tr>
  </table>
</script>
</div>

Download the complete example with CSS from here

Find more information on the Knockout site

Thats the last post in this series about REST, hope you liked it!

/ Christian

Getting started with REST in SharePoint 2013 – Part VII — November 30, 2014

Getting started with REST in SharePoint 2013 – Part VII

Welcome to post number seven in this series about REST in SharePoint 2013. In the previous posts I wrote about how to interact with the search API.
This time, we will take a look at how to use search queries together with a graphQuery. Graph Query Language (GQL) is designed to query the Office graph via the SharePoint Online Search REST API.

Please read the previous posts in this series before you go on to this post:

Delve

Take advantage of Office Graph in your SharePoint Online apps

Office Graph, can be seen as an underlying intelligence layer that leverages machine learning to surface information and content that is relevant to a user’s project, role and responsibilities within an organization.
Delve is powered by Office Graph (built on top of it), but what’s about to use this Office Graph layer and build an app that you can customize the way you want? You can build an App much like the Delve interface but from you own needs!
The following example will get a list of Items viewed by a actor (in this case the logged in user) the last three months, sort by ranking. You can turn around the information through the GQL in many different ways and combinations and even combine this with SharePoint search. Heres a few example of what you can get:

  • Object related to a specific person or current user
  • trending items
  • Related items
  • Recently viewed items

The following example will get a list of Items viewed by a actor (in this case the current user) the last three months, sort by ranking.

Download all the code here, including CSS. Just paste the code in a txt file and upload this in a document library in your SharePoint Online intranet and add a content editor web part onto a page in SharePoint, a add a reference to the .txt file for testing this out.

var actorId = 'ME' 
var actorGQL = "ACTOR(" + actorId + "\\, action\\:1001)";

  var searchQuery = _spPageContextInfo.webAbsoluteUrl + "/_api/search/query?Querytext='*'&Properties='GraphQuery:" + actorGQL + "'&RowLimit=10&SelectProperties='Path,Title,Rank,ViewsLifeTime,FileType,LastModifiedTime'"
	$.ajax({
		url: searchQuery,
		method: "GET",
		headers: {"Accept": "application/json; odata=verbose"},
		success: onQuerySuccess,
		error: onQueryFail
	});

   	function onQuerySuccess(data) {
  
		var items = [];
			items.push("<ul id='listContainer'>");
	        items.push("<div id='listHeader'>" + 'Delve says..' + "</div>");

		    if (data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results.length == 0) {
		        $("#listResult").append('No results..');
		    }
		    else{
			$(data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results).each(function(){

			var path = keyValue(this, 'Path');
			var title = keyValue(this, 'Title');
			var FileType = keyValue(this, 'FileType');	
			

	
			// get the file extension 
				var iconUrl =  "/_layouts/15/images/";
				var filename = path.substring(path.lastIndexOf('.')+1);
				
				if (filename == 'pdf') {
					var iconPath = iconUrl + 'ic' + filename + '.png';
				}
				else if (filename == 'PDF'){
					var iconPath = iconUrl + 'ic' + filename + '.png';
				}
				else{
					var iconPath = iconUrl + 'ic' + filename + '.png';
				}
				
				
				
			// convert date
			var modified = moment(keyValue(this, 'LastModifiedTime')).format("YYYY-MM-DD");
				if (!moment(modified,'YYYY-MM-DD').isValid()) {
					var modified = 'Date is not applicable..';
				} 
				else {
					var modified = moment(keyValue(this, 'LastModifiedTime')).format("YYYY-MM-DD");
				}		

				items.push('<li id="' + 'listContent' + '">' +     		
				    			'<span id="' + 'listContentInner' + '">' + 
					    			'<img src="' +  iconPath + '">' + ' <a href="' + path + '">' +  title + '</a>' +
					        	'</span>' + 
					        	'<span id="' + 'listContentInnerTime' + '">' + 
					        		' - ' + modified +
					        	'</span>' + 
				    		'</li>');
				    		
					});

				items.push("</ul>");
			
			$("#listResult").html(items.join(''));

   			} 
   		}

    function keyValue(row, fldName) {
        var ret = null;
        $.each(row.Cells.results, function () {
            if (this.Key == fldName) {
                ret = this.Value;
            }
        });
        return ret;
    } 

    function onQueryFail(sender, args) {
		$("#listResult").append('Query failed. Error:' + args.get_message());
    }

Read more about GQL and search REST API at MSDN
http://msdn.microsoft.com/en-us/office/office365/howto/query-Office-graph-using-gql-with-search-rest-api

Don’t use this in production yet, it could be some changes in the API. The Office Graph are in the time of writing in preview status.

Stay in tune for more posts!
/ Christian