Using VSNET 2013 and write TypeScript directly to any SharePoint via WebDAV

Disclaimer:  This is not the recommended workflow.  As a developer you should use VS.NET 2013 and build SharePoint projects.  You can then use TypeScript in your solution.

This is just a REALLY nice way to be super productive while working on Javascript in SharePoint.  Additionally, it works with Office 365, SharePoint 2007, 2010, 2013.  Does not require you to have a SharePoint development environment with Visual Studio .NET installed.

What do you need:

• A windows machine, with Visual Studio .NET 2013 (TypeScript is better with VSNET 2013)
• You don't need SharePoint installed in this machine.  You also don't need to have the VS.NET SharePoint extensions installed.
• You need TypeScript though, grab it from: http://www.typescriptlang.org/#Download

Change your VS.NET settings:

We will be opening TypeScript and Javascript files directly from SharePoint via WebDAV.  These files are not part of a VSNET project.  So we need to flick on an option within VS.NET to automatically compile TypeScript files which are not part of a project

Open... TypeScript!

So now you can open TypeScript directly from File > Open

Figure: VS.NET Open File Dialog

And as you work in VS.NET and save the TypeScript file, the Javascript is generated and populated next to the TypeScript file on SharePoint.

Figure: SharePoint TypeScript and Javascript files kept in sync by VS.NET

Similarly, you can create new TypeScript files in VS.NET and save it to SharePoint.

Your master page references the Javascript file.  So you can go back to the pages that is using the new function and just F5 to refresh it and see the new results.

Why is this cool?

• You can use VS.NET 2013 on your client machine, and use the latest version of TypeScript regardless of what SharePoint server you are talking to.  You aren't restricted by SharePoint 2010 and needing VS.NET 2010, or using VS.NET 2008 with SharePoint 2007.  You don't need SharePoint installed locally and you don't need to have the SharePoint extensions installed for VS.NET 2013.  As a consultant this is a life saver - I can now use TypeScript on old 2010/2007 environments.
• You get the productivity of being able to save (in VS.NET), refresh (in browser) and immediately see changes in your Javascript.  You don't have to package / deploy / update-spsolution etc
• You get all the benefits of TypeScript, including reference paths (as long as you put the definition files in SharePoint too, in a relative location).
• When you are ready to package and deploy, take the TypeScript file out and put it into a proper SharePoint solution.

InfoPath - missing data connection files

Sometimes, your InfoPath doesn't show you all the data connection files available in your SharePoint data connections library:

In this screenshot, it is only showing 3. 
There is no way to navigate to see more.

Fix. 

Change the Item Limit in the default view for the Data Connection library in SharePoint.

Change that number.  The default is usually 30.  I had previously changed it down to 3 to take the earlier screenshot.  Let's bump it back to 300.

Now you can see all the data connections again.

Fixing Facebook preview picture of your SharePoint site

I have a lot of friends in the SharePoint community, and I see a lot of SharePoint related links shared in my social circles.  Sometimes, these links are hosted on a SharePoint site.  Universally, you know they are hosted on SharePoint because Facebook has picked a really bad picture as preview for the site.

Freebie referral: rules.ssw.com.au - SSW's Rules are some of the best I've seen documented in one place.  Check them out.  The site is beautiful.  It's just unfortunate that Facebook picks a really horrible picture asset for the preview.

Setting up the Preview Picture

Facebook publishes how to talk to its crawlers.  The specification that talks about the Open Graph API is Open Graph - Using Objects.

To specify a preview picture is actually very simple.

<meta property="og:image" content="/storage/JohnLiu.jpg" /> 

You can also use the pre-Open Graph syntax, if you don't provide og:image, Facebook can infer it from rel="image_src"

<link rel="image_src" href="/storage/JohnLiu.jpg" />

You need to have this inside your <head> tag.  Add this to your Master Page.  Easy!

Debugging

Facebook actually has a pretty nice debugging tool that will tell you how the scrapper is visiting your site.  And this can be very valuable to get insight into why the picture you've chosen isn't appearing.

https://developers.facebook.com/tools/debug/

Here, it's showing me the problem.  My picture is too small.

Fixed.

Now Facebook will pick the right picture all the time!

SharePoint Saturday Canberra 2013

This is a late (and extremely brief) update for the session TypeScript: JavaScript for the SharePoint Dev Guy that I presented at Canberra.

The updated slides and demo are here:

• https://static1.squarespace.com/static/5527bff2e4b0b430660b0d10/5527c30de4b030eeeef09715/5527c30ee4b030eeeef09be9/1406984438084/ts.demo.zip
• https://static1.squarespace.com/static/5527bff2e4b0b430660b0d10/5527c30de4b030eeeef09715/5527c30ee4b030eeeef09bea/1375076689257/TypeScript-SPS-melb.pptx

I'll be helping out with the Sydney SharePoint User group this month - September 11, 2013.  You can follow the news in either places:

• https://www.facebook.com/SharePoint.Sydney
• http://www.sharepointusers.org.au/Sydney/default.aspx

Introduce your drastic UI changes... slowly

We are in the middle of a somewhat sudden rebranding exercise.  One of the main colours that was used prominently in the previous theme of the website is now being retired as the UI is simplified.

So here is what we have right now:

And here is where we're going (currently in development).

Where's the Yellow?

In every case where we ask one of our existing users the first response is always: Where's the "Company Yellow"?

There's of course a marketing message that will go out with our latest release. 

But here's the secret developer compromise.

We can reduce the yellow, slowly, overtime

The old header background will remain.  But in the Javascript that's run on every page, we introduce a small piece of script that modifies the opacity of the background header.

var days = (new Date("2013-08-20") - new Date()) / (24*60*60*1000);  // remaining days until 2013-08-20
var opacity = (days > 0) ?  (0.5  * (days / 14)) : 0;   // starts from 0.5 opacity to 0
$(".header-banner").css("opacity", opacity);

What this does, is that over the course of two weeks, the yellow's opacity reduces from the original (50% at this next release) to 0%.  So as days go on, the yellow header begins to fade, and after two weeks, it will simply disappear!

I wonder what'd be the water cooler conversation.  Each person will wonder what happened to the yellow as it slowly faded out of our lives.