sp-dev-fx-webparts/samples/react-comparer/README.md

9.8 KiB

Image Comparer with File Picker

The web part in action

Summary

Allows users to compare Before and After pictures, with a draggable slider. Implements a custom file picker.

Background

The Microsoft UI Fabric team (formerly Office UI Fabric) recently released a web site that allows you to compare the current version of the Office UI Fabric components side by side with their upcoming Fluent versions, using a cool image slider.

Microsoft Ui Fabric slider in action

I wanted to re-create a version of the slider that would allow a user to compare two images, side by side.

Re-creating the slider was pretty easy (they use react-draggable to handle dragging); I wanted to make it possible for users to select the Before and After pictures to use the SharePoint File Picker dialog.

After a lot of digging around, I decided to re-create my own.

After all, one of the premises of SPFx is that SPFx gives us -- the SharePoint developer community -- a framework to build the same web parts that Microsoft's own developers do. Right?

This sample re-creates the SharePoint file picker (or, more accurately, the SharePoint image picker) that is used by out-of-the-box web parts such as the Image and Hero web parts. My goal was to create something that would be re-usable, and would be as close as possible from the out-of-the-box picker. In fact, as I was testing the app, I found myself testing the out-of-the-box picker when I thought I was testing my own file picker.

After building this sample, I can confirm that it is possible to build web parts that look and feel like the out-of-the-box web parts using SPFx.

The file picker includes the following tabs:

Recent

Recent tab

Web search tab

NOTE: Requires a Bing API key, see below

OneDrive

OneDrive tab

Site

Site tab

Upload

Upload tab

From a link tab

Compatibility

⚠️ Important
Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.
Refer to https://aka.ms/spfx-matrix for more information on SPFx compatibility.

SPFx 1.7.1 Node.js v8 Compatible with SharePoint Online Does not work with SharePoint 2019 Does not work with SharePoint 2016 (Feature Pack 2) Local Workbench Compatible Hosted Workbench Compatible Compatible with Remote Containers

Applies to

Solution

Solution Author(s)
react-comparer Hugo Bernier (Tahoe Ninjas, @bernierh)

Version history

Version Date Comments
1.0 January 27, 2019 Initial release

Minimal Path to Awesome

This sample can also be opened with VS Code Remote Development. Visit https://aka.ms/spfx-devcontainer for further instructions.

The sample PropertyPanelFilePicker is designed to mimic the standard SharePoint file picker dialog. As such, it includes a Web search which uses Bing to return search results.

Web search with a Bing API key

However, the feature requires a Bing API key in order to work. If you do not have a Bing API key, the PropertyPanelFilePicker will display a message indicating that the Bing API key is missing.

Web search without a Bing API key

To Configure a Bing API key (Optional)

This sample uses SharePoint Online Tenant Properties to store the API key. The idea is that if you get an API key for your organization to use, you want to store it in one place -- the Tenant Properties -- instead of having to re-enter the API key in every web part that needs it.

To configure your API key, use the following steps:

  1. If you don't already have a Bing Web Search API key, go to the Bing Web Search API page and request a key.
  2. To set the API key, you'll need to use the Office 365 CLI. If you haven't installed it yet, you can get it from here.
  3. Using Office 365 CLI, enter the following command, making sure to change value with your actual Bing API key, and appCatalogUrl with your tenant's app catalog (e.g.: https://contoso.sharepoint.com/sites/apps).
spo storageentity set --appCatalogUrl <appCatalogUrl> --key BingApi --value <value>
  1. If you want to verify that your API key is stored, use the following command to list all your tenant properties:
spo storageentity list --appCatalogUrl <appCatalogUrl>

If all goes well, you should see an entry called BingApi containing your Bing API key.

To hide the Web search tab

If you want to use this web part without the Web search tab, you can simply disable it from the code. To do so, use the following steps:

  1. In the solution, open the ComparerWebPart.ts file.
  2. Look for a line at the top of the file that looks like this:
const DISABLE_WEB_SEARCH_TAB: boolean = false;
  1. Change the false to true
  2. Save and rebuild/redeploy the web part.

This constant will be applied to both PropertyPaneFilePicker controls used in the web part.

You can also simply set each PropertyPaneFilePicker's disableWebSearchTab property to true.

Features

  • Using Tenant property
  • Using of Office UI Fabric React Selection control
  • Using of Office UI Fabric React Selection control
  • Making CORS calls within an SPFx component

Resources

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.