How to set Apply button and make the component full width in SharePoint SPFx

How to Set Apply Button in SPFx Property Pane - Step-by-Step Guide

Author: Vishal Thakur

Published: August 2021

The SharePoint Framework (SPFx) offers a rich UI and flexibility for creating dynamic and responsive web parts. One of the powerful features is the ability to add an Apply button in the SPFx property pane. This button allows you to apply changes made in the property pane asynchronously, eliminating the need to refresh the page to see updates. In this guide, we'll walk you through the steps to implement this feature.

Introduction

The SPFx framework is packed with rich UI capabilities, allowing developers to create dynamic and responsive web parts. One such feature is the Apply button in the property pane. This button enables asynchronous updates, so you can see changes without refreshing the page. Let's dive into how you can implement this in your SPFx solution.

Step-by-Step Guide

Step 1: Create an SPFx Solution

First, create an SPFx solution using the following command in PowerShell or Visual Studio Code:

yo @microsoft/sharepoint

Name your solution (e.g., dynamic-property) and select the web part options as needed.

Step 2: Build the Solution

After creating the solution, run the build command:

gulp build

Step 3: Modify the WebPart File

Open the DynamicControlWebPart.ts file and add the following code to enable the Apply button:

protected get disableReactivePropertyChanges(): boolean { return true; } protected onAfterPropertyPaneChangesApplied(): void { ReactDom.unmountComponentAtNode(this.domElement); this.render(); }

This code disables reactive property changes and ensures the web part re-renders after applying changes.

Step 4: Add Property Pane Configuration

Next, configure the property pane with fields and buttons. Here's an example:

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { return { pages: [ { header: { description: "Configure your web part" }, groups: [ { groupFields: [ PropertyPaneTextField('description', { label: "Description" }), PropertyPaneButton('btn', { text: "Apply", onClick: this.onApplyButtonClick }) ] } ] } ] }; }

Step 5: Deploy and Test

Once the code is added, build and deploy your solution. You can test it locally or deploy it to a SharePoint environment. The Apply button will now appear in the property pane, allowing you to apply changes without refreshing the page.

How to Make SPFx WebPart Full Width

To make your SPFx web part full width, follow these steps:

Step 1: Modify the Manifest File

Open the DynamicControlWebPart.manifest.json file and add the following property:

"supportsFullBleed": true

Step 2: Build and Deploy

After adding the property, rebuild your solution and deploy it. The web part will now support full-width rendering.

Conclusion

By following these steps, you can easily add an Apply button to your SPFx property pane and make your web part full width. These features enhance the user experience by providing dynamic content updates and responsive design. If you found this guide helpful, feel free to leave a comment below!

Download the Source Code: Click here

Related Articles:

• SPFX Interview Questions
• Carousel in SPFX
• Add Control Dynamically in SPFx Property Panel

Thank you for reading! If you have any questions or feedback, please leave a comment below.