SPSSYD 2013 and special thanks to Brian Farnhill

I wanted to thank Brian Farnhill for organizing SharePoint Saturday (SPS) events in Australia faithfully for the last few years.  SharePoint Saturday Sydney 2013 was the last one where he is the official organizer, chief, keynoter, label-printer, sponsor-chaser, etc. etc.

The event had a lot of highlights for me:

  • A lot of people showed up early and was ready at the keynote. 
  • Coffee Cart showed up on time in the morning
  • The Clifton venue (they moved since last year) was amazing - I really liked the layout of the sofa and the meal table-benches were great for conversation
  • Lunch was hopefully just enough - I think right at the end we might have just ran out of sandwiches
  • Adam got rick rolled'
  • Ross' session had a memory moment (I heard second hand)
  • My session had a major projector fail (more on this later)

 

Presentation - Typescript PowerPoint and demo project

 

Explanation - What happened to the projector / your laptop?!

 

I was using a USB-3 display link adapter for the last month.  But I didn't realize it would behave very badly with the HDMI-VGA dongle for the projector at the event.  A quick fumbling got the display to work.  But it was black and white but I was going to run out of time so I just ran with it.

I'm glad you guys had laughs at my expense.  It made me feel a little bit less miserable.

Love you guys.

InfoPath - binding Linked Picture Display Text for dynamic tooltips

InfoPath is an ideal tool for XML forms.  Whenever you have forms, invariably, you have little helper icons to suggest text to your users regarding how to fill out a form.

In InfoPath, the Picture control allows you to have alt text.  But this is hard coded and you can't easily change this without modifying your form template.  If you are using the icons in a repeating section, there is also no way to make them different, and display different tooltip based on different rows in the sections.

 

That's all about to change.  :-)

The Linked Picture Schema

I was experimenting with a different control in InfoPath: the Linked Picture control.

http://msdn.microsoft.com/en-us/library/dd959291.aspx

<img hideFocus="1" class="xdLinkedPicture" xd:boundProp="src" xd:binding="my:field1" 
xd:boundPropSecondary="displaytext" xd:binding_secondary="my:field1/@my:field2"
tabStop="true" tabIndex="0" xd:xctname="LinkedImage" xd:CtrlId="CTRL2"> <xsl:attribute name="src"> <xsl:value-of select="my:field1"/> </xsl:attribute> <xsl:attribute name="displaytext"> <xsl:value-of select="my:field1/@my:field2"/> </xsl:attribute> <xsl:attribute name="alt"> <xsl:choose> <xsl:when test="string-length(my:field1) &gt; 0"> <xsl:value-of select="my:field1/@my:field2"/> </xsl:when> <xsl:otherwise>Click here to insert a picture</xsl:otherwise> </xsl:choose> </xsl:attribute> </img>

My highlights in the above XML:  the Linked Picture control, at the schema level, supports two level binding - both the image's SRC attribute as well as the DISPLAYTEXT attribute.  Which is then translated to the alt attribute in the XSLT.

Very interesting.

 

Hmm...  It has always been there!  Since 2010.  Why didn't anyone tell me this

I thought I might need to resort to XSLT hacking in order to get this to work, but I decided to look at the Ribbon controls for the Linked Picture control in InfoPath.  Behold!

clip_image002[5]

There are two sections of binding on the Control Tools ribbon for a Linked Picture control.  The left one, controlling the main binding, is for the SRC.  The right is actually for the Display Text!

 

Prepare a file to bind to

The XML file you can bind to:

<?xml version="1.0" encoding="utf-8"?>
<html>
    <img-info>http://server/Style Library/Images/info.png</img-info>
    <tooltip1>These guys are cool!</tooltip1>
</html>

Add this as a secondary data source, and bind the two properties to fields on this XML file.

 

Store the XML on SharePoint server

image

I suggest storing this file on the SharePoint server.  And then configure InfoPath to obtain the XML from the source server.  This way, each time you open the Form, it will read the most up-to-date version.

 

Content is now dynamic

This means you can update the image src or title attribute in the XML file dynamically.

You can also update the image without having to redeploy the form.

If you want to change an icon in your form - now they are all stored within SharePoint.  If you want to change the display text, change it in the XML file in SharePoint.  No template re-deployment required.

Your business analyst wants to tweak the words used in the tooltip?  Get him to update the XML file directly in SharePoint.  As long as he doesn't break the XML encoding it's very simple.  No need to update InfoPath.

 

Image is dynamic.  Form template just got smaller

A bonus of this technique is that the image isn't stored inside the template file.  So your template is now smaller.

 

 

Two independent bindings

The two binding are independent, and don't have to come from the same node in a XML source.

This means, you can have a repeating section showing tooltip icons.  Each image's SRC is bound to the same image URL.  But each tooltip can be bound to a repeating field in the repeating section. 

 

Example

Tooltip working - now works by binding:

  • In this case here, the Picture is bound to the URL from the static XML file.
  • The tooltip text is bound to the database field returned from the service call.

clip_image002[7]

 

Works in both Web Forms and InfoPath client forms

Works in InfoPath client as well as web forms*

 

* Web Forms has an issue where sometimes Javascript will overlay on top of your Linked Picture, preventing the tooltip from showing up.  You'll need to add a small bit of Javascript to cancel this when the Linked Picture control is read-only.

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