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

image

 

Open... TypeScript!

So now you can open TypeScript directly from File > Open

image
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.

image
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:

image

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.

image

 

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.

image

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.

image

 

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.

image

 

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/

image

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

image

 

Fixed.

 

Now Facebook will pick the right picture all the time!

image

SharePoint Saturday Canberra 2013

/

SharePoint Saturday Melbourne 2013

/

It's that time again!  I'm down in Melbourne for SharePoint Saturday later today on July 27. 

I'm presenting TypeScript and SharePoint, with updated notes as I have been working with TypeScript since Feburary.  It's been just awesome.

The SharePoint Saturday version of the presentation will be more developer focused, and I'm hoping my audience will come with their dev hat on and ready to play with JavaScript and TypeScript.

I'll update this post later to include the download files for the presentation.

See you at SharePoint Saturday.  Early night and early morning for me later.

 

Update

 

Again, I had a lot of fun in Melbourne, had a lot of fun discussions and talked to a number of you guys about TypeScript in the real world.  Drop me a line as you start to play with TypeScript in your own environment.

Happy Birthday shout out to Elaine van Bergen!

 

Downloads: