Post
Ask Question

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> web parts> web part> 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 > web parts > web part > {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 component'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 property 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

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!


Similar Articles