Inserting jQuery into jslink easily

Set it first, separate with | bar

~site/js/jquery-1.11.1.min.js|~site/js/somefile.js

Quick & Dirty JSON Web Service call with jQuery

Use this little snippet to make a nice little async call using jquery and "promises"!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

var url = SOME_URL_THAT_RETURNS_JSON;

var promise = $.getJSON(url); 

promise.then(successFunc);

function successFunc(data)

{

alert("$.getJSON returns  " + data.SOMEDATA);

}

UPDATE: Discovered that there is a difference between SharePoint online and on-premise concerning ajax.

online supports minimal json (which is what you get with getJSON and on-premise does not!

for on-premise you must explicity set json-verbose, something like so:

$.ajax({ url: Url, method: 'GET', beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "application/json; odata=verbose"); },
cache: true, error: function (data) { ////failure },
success: function (data) { ////success } });

Creating Custom Display Templates

At first this seems pretty hard but there's only 3 areas you have to worry about

1. Map your Managed Properties
2. Do some Javascript on your value from #1
3. Display some value in the HTML

For #1 locate the <mso:ManagedPropertyMapping msdt:dt="string">. If for instance you need the ListItemId of the item in question add it to the end of the list after a comma. Here's what it looks like with the single quotes escaped:

,&#39;ListItemID&#39;:&#39;ListItemID&#39;

You will now have access to this like this:var itemID = $getItemValue(ctx, "ListItemID");

For #2 just stick your javascript after the <!--#_. 

If you want to use jQuery include it after the 

        $includeLanguageScript(this.url,...

enter this:

        $includeScript(this.url, "https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.0.min.js");

with jQuery that inserts into the HTML (DOM) put all your jQuery code within this:

AddPostRenderCallback(ctx, function () {

// code here

});

For #3 just insert your javascript variable like this:

<div>_#= itemID =#_</div>

Update: After doing several Display Templates that have to display custom properties I think the best approach is to simply grab the ListItemId and maybe some other fields that are OOTB. Going through the effort of creating new Managed Properties and such might not be worth it when you can simply use a REST call to get the rest of the info you need like this

$.getJSON( "REST API CALL URL", function(data) {



  alert( data.SOMEFIELD );



})

Getting a users Profile Picture from a Display Template

This took quite a while to figure out, since it requires a combination of queries to get. Finally decided the best approach was to get the ID of the list item that has a User field. In this case I have a list with an "AssignedTo" field. I want to create a custom Display Template that would display the photo of the person that the item was "AssignedTo". I couldn't find a single article that covered this specific task.

Make sure your Display Template gets the needed Managed Properties like this:
&#39;ListItemID&#39;:&#39;ListItemID&#39;,&#39;SPSiteUrl&#39;:&#39;SPSiteUrl&#39;

First, get the list item that has the AssignedTo field:
var myUrl = mySite + "/_api/web/lists/getByTitle('HighFives')/items("+ itemID +")"


$.getJSON( myUrl, function( data ) {

We are withing the "success" handler here.
Next, now that we have the User ID (AssignedToId, a number) we can query for some useful user data. In this example I really want the "EMail" property since this is all I need to get the photo. Took a while to get this, since Email fails :/
  var url2 = "siteUrl + "/_api/Web/SiteUserInfoList/Items("+ data.AssignedToId +")?$select=Name,Picture,UserName,EMail";
  $.getJSON( url2, function( data ) {
  
  var uName = data.EMail;

Here's the part to get the photo. another option is to use the Picture setting, but using this URL seems simpler and will return a placeholder if nothing found. size can be S,M,L

    var imageLink =siteUrl + "/_layouts/15/userphoto.aspx?size=S&accountname="+ uName +"&url=";

Using jQuery to insert the picture on the page.

$("#userPictureDiv_" + itemID).html("<img style='width:100%;max-width:48px' src='"+ imageLink +"'/> abc " + imageLink);
  }); 

  });

Since this is in a Display template you can't just set the contents of the DOM within a document.ready, this all has to be contained within this:

AddPostRenderCallback(ctx, function () {

// code here

});

Setting up Powershell to Work With SharePoint o365

Hey, automation is the way to go. At my day job we do a lot of work with Powershell scripts. Attempting the same with SPo365 is pretty limited... at least the standard OOTB API is.

Problem: You can't do much

Solution: Use the SharePoint Client API! Just load it into Powershell and away you go. Pretty slick that you can use your knowledge of the client api in Powershell.

1. Get your hands on the SharePoint Client Components installer. Install it.
2. It should install to the default location at "". If not make changes to the code below.
3. Insert this at the top of your script

Add-Type -Path "C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\ISAPI\Microsoft.SharePoint.Client.dll"

Add-Type -Path "C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\ISAPI\Microsoft.SharePoint.Client.Runtime.dll"

* If you can't run scripts, try running as admin and maybe set your Powershell policy to "Set-Executionpolicy -ExecutionPolicy Unrestricted"

Here's a sample script to create a sub-site:

$siteUrl = "https://YOUR SPO365 URL HERE"

$password = Read-Host -Prompt "Enter password" -AsSecureString

$ctx = New-Object Microsoft.SharePoint.Client.ClientContext($siteUrl)

$credentials = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials("Your@email.here", $password)

$ctx.Credentials = $credentials

$webCreationInformation = New-Object Microsoft.SharePoint.Client.WebCreationInformation

$webCreationInformation.Url = "demo01site"

$webCreationInformation.Title = "Demo 01 Site"

$webCreationInformation.WebTemplate = "PROJECTSITE#0"

$newWeb = $ctx.Web.Webs.Add($webCreationInformation)

$ctx.Load($newWeb)

$ctx.ExecuteQuery()

Write-Host "Title" $newWeb.Url " Created"

Creating searchable custom Managed Properties. Part 1

One of the best things about SP is the Searching capabilities. Whenever people ask "what's so great about SP?" I always include Search in the answer somewhere.

Anyone can build a quick and dirty document management system and actually be able to FIND things with search.

This post is about putting in a little extra effect to search by some custom metadata you have on a list or library in spo365.

Scenario:

You create a new content type (create them in spo365 the same way as on-premise). You use this content type on several different sites. Let's say this content type is for projects in which your store the Customer and ProjectType.

You want to list all items with a certain Customer.

Solution:

Create a new managed property called MyCustomer (or whatever you like).
Throw a Content Search Web part on a page. Customize the query to use your new Managed Property.

Sounds easy, but there are some gotchas I learned. 

1. You need to crawl your site before anything works
2. Don't use dashes (-) in your Managed Property name even though it lets you. It just won't work in the CSWP. You can use a dash and create an alias that is only text chars though.

Step by Step

Create new Managed Property

• Site Settings:Site Collection Administration: Search Schema
• Click "New Managed Property"
• Enter a name that only uses a-Z chars to make your life easier. For this exampe "MyCustomer"
• You can only use Text or Yes/No. For others, reuse the "refinablNNN" props that already exist.
• Click on Queryable and Retrievable
• Enter an alias is you like.
• Click the "Add a Mapping". 
• This will open a form for you to search for your field. It will be prefixed with "ows_". Here is mine:

• If you can't find your property, crawl your site. Instructions below.
• Click OK to close the form then OK again.
• Search for your new Managed Property! Here's mine:

• You've now created the Managed Property that you can use in a Content Search Web Part. Nice!

To be continued in Part 2...

Welcome!

What is this blog about?

I'm starting this blog to document my journey into SharePoint o365 online. I'm not even sure what the proper name is. SharePoint online? SharePoint o365? I'll just be calling it SharePoint o365 or SPo365/spo365.

I'll try to write about differences I see between spo365 and on-premise if I happen to notice a difference.

I intend to take my career into more of a freelance spo365 guy. I think Microsoft is really pushing the cloud in a big way... and successfully. More and more companies will subscribe to Office 365 and discover they've got access to SharePoint and need someone to show them how to use it.

I've already used spo365 on a limited basis and am working on it currently, so I'm not exactly clueless. My goal is to post at least once a month. I'll try to post whenever I discover something useful.