0

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.

For example, the Hero Property Panel 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.

0

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:

2
  • This is EXACTLY what I was looking for! Thank you so much for your very thorough answer! – ijones Feb 1 at 19:16
  • I'm glad my answer helped you! Happy coding! – Radityo Ardi Feb 3 at 4:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.