Show/Hide Property pane component based on another component’s value 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.

Enable Toogle Button
Scenario : Show hide property pane based on another component value

So Let’s start with creating 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

  1. We will import required property pane controls
    import {
      IPropertyPaneConfiguration,
      PropertyPaneChoiceGroup,
      PropertyPaneToggle,
      PropertyPaneTextField
    } from '@microsoft/sp-property-pane';
    

  2. Declare properties in the generated interface I[webpartName]WebPartProps
    export interface ICPPWebPartProps {
      simpleText: string;
      textOrImageType: string;
      imageUrl: string;
      enableToggle: boolean;
    }

  3. Now we will create Toggle Button

    groups: [
                {
                  groupName: strings.BasicGroupName,
                  groupFields: [
                    PropertyPaneToggle('enableToggle', {
                      key: 'Enable Toggle',
                      label: 'Enable Toggle',
                      checked: true
                    }),
                  ]
                }
              ]
  4. 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;
        }
      

GitHub Repository

https://github.com/chandaniprajapati/spfx-custom-property-pane

If you like this project, mark a ⭐ on GitHub Repository

Output

Show Hide Component Final Output

Sharing is Caring.
Happy Coding 🙂

5 1 vote
Article Rating
Subscribe
Notify of
guest
4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
kuldeep
1 year ago

great, thanks for example

Sam
Sam
1 year ago

Exactly what I was looking for! Thanks for much for the great content and a link to the code!!