SPFx - How to create a custom WebPart Property for a selectable link

sharepoint.stackexchange https://sharepoint.stackexchange.com/questions/289286

Question

I am very new to creating web parts and property panels in spfx. I have gone through hello world, all the MS documentation, but the thing that is missing is the ability to link/upload to a file/folder in SharePoint Online.

Hero Panel (image)

For example, the Hero Property Panel (above) contains a property to show the currently selected link and has a change button which takes you to another panel which then shows you Options:

Options

I am attempting find that control and use it. However I only see the link control, which seems to allow you to set a link on the property panel, not choose a link to show in the web part.

My goal is to create a web part that contains a header and an image aligned horizontally. This seems super trivial but without that connection (and the dummy proofing it would provide), it's going to be recreating the wheel which seems like overkill.

Thanks in advance.

Was it helpful?

Solution

Is PropertyFieldFilePicker the one you're looking for? enter image description here

Note: I used PnP controls a lot, both for PropertyPane and the web part itself. The usage is quite easy and simple.

Run this command to install the controls.

npm install @pnp/spfx-property-controls

Add this to your main webpart code.

import { PropertyFieldFilePicker, IPropertyFieldFilePickerProps, IFilePickerResult } from "@pnp/spfx-property-controls/lib/PropertyFieldFilePicker";

Add a new property to your web part interface props.

filePickerResult: IFilePickerResult;

then add into the getPropertyPaneConfiguration() function in your webpart under groupFields.

 PropertyFieldFilePicker('filePicker', {
      context: this.context,
      filePickerResult: this.properties.filePickerResult,
      properties: this.properties,
      onSave: (e: IFilePickerResult) => {
           console.log(e);
           this.properties.filePickerResult = e;
      },
      onChanged: (e: IFilePickerResult) => {
           console.log(e);
           this.properties.filePickerResult = e;
      },
      key: "filePickerId",
      buttonLabel: "File Picker",
      label: "File Picker"
 })

Read the following to learn more:

Licensed under: CC-BY-SA with attribution
Not affiliated with sharepoint.stackexchange
scroll top