Show Hide Property Pane Component based on other component in SPFx

Recently I was working on application where I need to show/hide property pane component based on another component’s value in SPFx. I want to make it conditional. I have implemented this and thought to write a blog on same which can help who want to implement this functionality.

So In this article we will see how to Show/hide component based on another component’s value:

Scenario:

We will create SPFx webpart. In this webpart, We will add a toggle button. On the selection of the toggle button, we want show or hide the radio button group. Radio button group have two radio button choices : Text and Image, If I select Text then it should show text of that input and if I select image than it should show image of that input URL.

So Let’s start with creating SPFx Webpart.

Create SPFx Webpart

To create SPFx webpart , refer below link:

https://sharepointcorner.tech/spfx-development-step-by-step

We will create No JavaScript Framework Webpart.

Move to the file [webpartName]WebPart.ts file

We will import required property pane controls

import {
  IPropertyPaneConfiguration,
  PropertyPaneChoiceGroup,
  PropertyPaneToggle,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';

Declare properties in the generated interface I[webpartName]WebPartProps

export interface ICPPWebPartProps {
  simpleText: string;
  textOrImageType: string;
  imageUrl: string;
  enableToggle: boolean;
}

Now we will create Toggle Button

groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneToggle('enableToggle', {
                  key: 'Enable Toggle',
                  label: 'Enable Toggle',
                  checked: true
                }),
              ]
            }
          ]

Now we will create controls (Radio button and Text Input) based on condition

First, we will declare variables in getPropertyPaneConfiguration method

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    //create a variable for choice control
    let textOrImageType: any = [];

    //create a variable for image control
    let imageSourceControl: any = [];

    //create a variable for text control
    let simpleTextControl: any = [];
}

Now we will show/hide controls based on conditions. this code will be after the above declarations.

 if (this.properties.enableToggle) {
      textOrImageType = PropertyPaneChoiceGroup('textOrImageType', {
        label: 'Image/Text',
        options: [{
          key: 'Text',
          text: 'Text',
          checked: true
        },
        {
          key: 'Image',
          text: 'Image',
        }
        ]
      });

      if (this.properties.textOrImageType === "Text") {
        simpleTextControl = PropertyPaneTextField('simpleText', {
          label: "Text",
          placeholder: "Enter Text"
        });
      }
      else {
        imageSourceControl = PropertyPaneTextField('imageUrl', {
          label: "Image URL",
          placeholder: "Enter Image URL"
        });
      }
    }

Now we will use above declared variables in return statement after the toggle button declaration.

    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneToggle('enableToggle', {
                  key: 'Enable Toggle',
                  label: 'Enable Toggle',
                  checked: true
                }),
                textOrImageType,
                simpleTextControl,
                imageSourceControl
              ]
            }
          ]
        }
      ]
    };

Now we will update render method as below code.

 public render(): void {
    let renderHtml = `<div>
                        <div><b>Enable Toggle:</b> ${this.properties.enableToggle}</div>`;

    if (this.properties.enableToggle) {
      renderHtml += `<div><b>Link Type:</b> ${this.properties.textOrImageType}</div>`;

      if (this.properties.textOrImageType != undefined) {
        if (this.properties.textOrImageType === "Text") {
          renderHtml += `<div><b>Text:</b> ${this.properties.simpleText}</div>`;

        }
        if (this.properties.textOrImageType === "Image") {
          renderHtml += `<div><img src =${this.properties.imageUrl} height="150" width="150" alt="Image"</div>`;
        }
      }
    }
    renderHtml += `</div></div></div></div>`;
    this.domElement.innerHTML = renderHtml;
  }