Show/Hide Property Pane Component Based On Another Component's Value In SPFX

Introduction

 

With SPFx webpart property pane configuration, many times we need to show/hide property pane control based on another property pane control's value.

 

Scenario 

 

For example, we have a radio button for Text and Image so on the selection of text we will show text input control and on the selection of the image, we will show image URL control.

 

 

Let's see the step-by-step implementation.

 

Implementation

• Open a command prompt
• Move to the path where you want to create a project
• Create a project directory using:

md SPFx-show-hide-component

Move to the above-created directory using:

cd SPFx-show-hide-component

Now execute the below command to create an SPFx solution:

yo @microsoft/sharepoint

It will ask some questions, as shown below:

 

 

After a successful installation, we can open a project in any source code tool. Here, I am using the VS code, so I will execute the command:

code .

Move to the src> webparts > webpart > components > I{webpartname}props.ts file and we will declare the properties as shown below:

export interface ISpfxShowHideComponentProps {
  description: string;
  textOrImageType: string;
  simpleText: string;
  imageUrl: string;
}

Now move to the src > webparts > webpart > {webaprtname}webpart.ts

 

Here, we need TextField and ChoiceGroup to add property pane controls. The import statement will be like this:

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

Now add webpart properties in I{webpartname}WebpartProps as shown below:      

export interface ISpfxShowHideComponentWebPartProps {
  description: string;
  textOrImageType: string;
  simpleText: string;
  imageUrl: string;
}

Move to the {webpartname}Webpart.manifest.json to set the default value in properties as shown below:

"properties": {
       "description": "spfx-show-hide-component",
       "simpleText": "SPFx show hide component based on another conponent's value",
       "imageUrl": "https://png.pngtree.com/png-clipart/20200401/original/pngtree-modern-flat-design-concept-of-programmers-at-work-concept-software-development-png-image_5332892.jpg"
     }

Now go to the render() method and set other properties as the description declaration:

public render(): void {
   const element: React.ReactElement<ISpfxShowHideComponentProps> = React.createElement(
     SpfxShowHideComponent,
     {
       description: this.properties.description,
       textOrImageType: this.properties.textOrImageType,
       simpleText: this.properties.simpleText,
       imageUrl: this.properties.imageUrl,
     }
   );

   ReactDom.render(element, this.domElement);
 }

Now go to the getPropertyPaneConfiguration() method and create a property pane choice control to select image/text as shown below:

PropertyPaneChoiceGroup('textOrImageType', {
    label: 'Image/Text',
    options: [
        {
            key: 'Text',
            text: 'Text',
            checked: true
        },
        {
            key: 'Image',
            text: 'Image',
        }
    ]
})

Here we will take two variables to declare propertypane configuration.

 

We have a property called textOrImageType as a choice group so we will check the conditions. If the selected value of textOrImageType is equal to text then we will create a control for text, otherwise, it will be an image so in the else condition, we will show image URL control.

let textControl: any = [];
let imageSourceControl: any = [];

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

Now move to the {webpartname}.tsx file to render data on the page. Here, we will show text if the text is selected otherwise we will show the image if the image will be selected.

import * as React from 'react';
import styles from './SpfxShowHideComponent.module.scss';
import { ISpfxShowHideComponentProps } from './ISpfxShowHideComponentProps';
import { escape } from '@microsoft/sp-lodash-subset';

export default class SpfxShowHideComponent extends React.Component<ISpfxShowHideComponentProps, {}> {
  public render(): React.ReactElement<ISpfxShowHideComponentProps> {
    return (
      <div className={styles.spfxShowHideComponent}>
        {this.props.textOrImageType == "Text" ? this.props.simpleText :
          (<img src={this.props.imageUrl} height="250px" width="250px" alt="No Image" />)
        }
      </div>
    );
  }
}

Output

 

 

Find the complete source code here.

 

Summary

 

In this article, we have seen how to show/hide property pane control based on another property pane control's value.

 

I hope this helps.

 

Sharing is caring!!