Lessons Learned from the #SPShire Project

I’m thrilled to be part of an early adopter project building a new intranet for Shire Pharmaceuticals based on the forthcoming SharePoint Communication Sites. Shire is an exciting and innovative company, and the team includes a number of my fellow Microsoft MVP’s as well as teammates from BlueMetal. Last week Microsoft broadcast a webinar from the Boston MTC featuring a cross-section of the development team. Microsoft’s Mark Kashman promised we’d post some of the lessons learned in the project, and this is one of those postings.

The lessons in this blog series are:

1. Previewing and Opening Office Documents from the SharePoint Framework
   (this article)
2. Using the OneDrive File Picker in SharePoint Framework Solutions
3. Creating Reusable React Components for SharePoint Framework Solutions

This project on github contains the sample solution for all three articles.

The Sample Web Part

The sample web part is a simplified version that borrows from the web parts we built for the Shire Hub. It allows you to choose a hyperlink and display an image, document, or simple link in the web part body. When editing the web part, the user opens a fully featured file browser to find a document, image, or page in SharePoint.

The web part displays document previews and links to Office Online Server document views. That’s covered in this article.

Editing the web part uses the OneDrive link picker to choose a document, image, or page in SharePoint. That’s covered in the next article.

The link picker code can be reused across many web parts. That’s covered in the third article.

Previewing and Opening Office Documents from the SharePoint Framework

This is the simplest of the three lessons, because it really just some link manipulation. It would be nice if Microsoft would document this stuff; if there is documentation I missed please let me know in the comments and I’ll thank you and update the article accordingly!

In a recent article, I explained how to call the SharePoint API to get a link that opens a document in the browser instead of just downloading it. While the real point of the article is how to call SharePoint from an Azure function, the use case is silly in retrospect, because it turns out all you need to do is add ?web=1 to the end of any document URL to open it in the browser.

You can see this in action on line 6 in the listing below, from the LinkPickerSample.tsx module in the sample. This module implements the user interface for the Link Picker Sample web part.

let previewUrl = this.props.webAbsUrl +
  "/_layouts/15/getpreview.ashx?resolution=0&clientMode=modernWebPart&path=" +
  this.props.url +
  "&width=252&height=200";
<div>
<div>linkDisplay =
<a href={this.props.url + "?web=1"} target="_blank">
        <img src={previewUrl} />
      </a></div>
</div>
;

This same snippet also shows how to get the preview URL. It’s pretty simple! Who knows what other clientMode options there might be, but the rest of the options are pretty obvious. It’s sweet that you can dial in the width and height you desire.

In the next article, explain how to get the OneDrive link picker working.