SPFx : Advanced Property Pane

First of all, navigate to your project folder and create your solution folder

MD SPFx_AdvPropertyPane

change the directory to that folder and create the skeleton solution

cd SPFx_AdvPropertyPane

yo @microsoft/sharepoint

Open the project in Visual Studio Code.

Code .

For the basics and some advanced items please refer to the Microsoft tutorial.

Integrate web part properties with SharePoint | Microsoft Learn

In the project (opened in VS Code), navigate to the src > webparts and open the AdvancedPropertyPaneWebPart.ts file.

First of all update the local workbench with your tenant url, in the serve.json file.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
  "port": 4321,
  "https": true,
  "initialPage": "https://contoso.sharepoint.com/_layouts/workbench.aspx"
}

Update the Import { type IPropertyPaneConfiguration section to look like this.

import {
  type IPropertyPaneConfiguration,
  PropertyPaneTextField,
    PropertyPaneCheckbox,
    PropertyPaneLabel,
    PropertyPaneLink,
    PropertyPaneSlider,
    PropertyPaneToggle,
    PropertyPaneButton,
    PropertyPaneButtonType,  
    PropertyPaneDropdown,
    IPropertyPaneGroup,
    PropertyPaneHorizontalRule
} from '@microsoft/sp-property-pane';

In the Interface Props section add the variables you want to use.

export interface IAdvancePropertyPaneWebPartProps {
  description: string;

  name: string;
  slider: number;

  dropdown1:string;
  linkChk1:boolean;
  textChk1:boolean;
  colour1:string;
  url1:string;
  text1:string;

  dropdown2:string;
  linkChk2:boolean;
  textChk2:boolean;
  colour2:string;
  url2:string;
  text2:string;

  dropdown3:string;
  linkChk3:boolean;
  textChk3:boolean;
  colour3:string;
  url3:string;
  text3:string;

  dropdown4:string;
  linkChk4:boolean;
  textChk4:boolean;
  colour4:string;
  url4:string;
  text4:string;

  dropdown5:string;
  linkChk5:boolean;
  textChk5:boolean;
  colour5:string;
  url5:string;
  text5:string;
}

Finally, we now setup the Property Pane Configuration section.

First of all setup the object arrays for each Group that you require.

Note: each group requires a new page.

 protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

    const page2Obj : IPropertyPaneGroup["groupFields"] = [];
    const page3Obj : IPropertyPaneGroup["groupFields"] = [];

or you can apply an item to a variable like this:

(this way you can only show each variable option based on other selections, than using a whole page)

 let firstLabel : any={};
    let dropDown : any={};
    let secondLabel : any={};

      firstLabel = PropertyPaneLabel('',{
                    text: "Enter an option"
                  });
                
      dropDown = PropertyPaneDropdown('dropdown',{
                    label:"Please Choose an Option",
                    options:[
                      { key : '1', text : 'Assessments'},
                      { key : '2', text : 'Option 1'},
                      { key : '3', text : 'Option 2'},
                      { key : '3', text : 'Option 3'},
                      { key : '4', text : 'Option 4'},
                    ]
      });
    
      teamLabel = PropertyPaneLabel('',{
                    text: "please choose your team on page 2"
                  });

Then in the return function use them like this…

 return {
      pages: [
        {
          //Page 1
          header: {
            description: "Page 1 - Setup",
          },
          groups: [
            {
              groupName: "Section 1",
              groupFields: [
                PropertyPaneLabel('',{
                  text: "Data Options"
                }),
                PropertyPaneLabel('',{
                  text: "Your text goes here..."
                }),
                PropertyPaneChoiceGroup("choiceGroup1", {
                  label: "Please Choose",
                  options: [
                    { key: "All", text: "All Options" },
                    { key: "1", text: "Option 1 Only" },
                    { key: "2", text: "Option 2 Only" },
                    { key: "3", text: "Option 3 Only" },
                    { key: "4", text: "Option 4 Only" },
                    { key: "5", text: "Option 5 Only" },
                  ],
                }),
                divisionLabel,
                divisionDropdown,
                teamLabel,
              ],
            },
          ],
        },

Setup the options for Page 2.

This will add a number of DropDowns and Checkboxes based on what number is shown in the slider from Page 1.

 // *** setup page 2 
    if(this.properties.slider>=1){
      for(let num=1;num<=this.properties.slider;num++){
        page2Obj.push(PropertyPaneHorizontalRule(),
          PropertyPaneLabel('',{
            text:"Section "+num
          }),    
          PropertyPaneDropdown('dropdown'+num, {
            label:'Please choose shape type',
            options: [
              { key: 'square', text: 'Square' },
              { key: 'circle', text: 'Circle' }
            ]
          }), 
          PropertyPaneCheckbox('linkChk'+num, {
            text: 'Add URL link section?'
          }),     
          PropertyPaneCheckbox('textChk'+num, { 
            text: 'Add text to section?'
          })           
        )
      }
    }

Setup your options for page 3.

This is based on previous selections from page 1 for the number selected in the slider. The switch statement will apply values to variables based on what was selected on Page 2

 // *** page 3 setup
    if(this.properties.slider>1){
      for(let num=1;num<=this.properties.slider;num++){
        let dropdownSelect : string = "";
        let linkCheck : boolean = false;
        let textCheck : boolean = false;

        switch(num){
          case 1:
            dropdownSelect = this.properties.dropdown1;;
            linkCheck = this.properties.linkChk1;
            textCheck = this.properties.textChk1;
            break;
          case 2:
            dropdownSelect = this.properties.dropdown2;
            linkCheck = this.properties.linkChk2;
            textCheck = this.properties.textChk2;
            break;
          case 3:
            dropdownSelect = this.properties.dropdown3;
            linkCheck = this.properties.linkChk3;
            textCheck = this.properties.textChk3;
            break;
          case 4:
            dropdownSelect = this.properties.dropdown4;
            linkCheck = this.properties.linkChk4;
            textCheck = this.properties.textChk4;
            break;
          case 5:
            dropdownSelect = this.properties.dropdown5;
            linkCheck = this.properties.linkChk5;
            textCheck = this.properties.textChk5;
            break;          
        }

        page3Obj.push(PropertyPaneHorizontalRule(),
          PropertyPaneLabel('',{
            text:this.properties.dropdown1+" Section "+num
          }),            
        );
        
        if(linkCheck){
          page3Obj.push(PropertyPaneTextField('url'+num,{
              label: "Please provide URL link for section"
            }),
          )
        }
        if(textCheck){
          page3Obj.push(PropertyPaneTextField('text'+num, {
              label: "Section Text",
              multiline: true,
              placeholder: "Please enter some text","description": "text property field"
            }),
          )        
        }  
      }
    }
      if(this.properties.linkChk1){
        page3Obj.push(PropertyPaneTextField('url1',{
            label: "Please provide URL link for area"
          }),
        )
      }   
    }

Lastly, we add the options to the return function.

 return {
      pages: [
        { //Page 1
          header: {
            description: "Test Property Pane"
          },
          groups: [
            {
              groupName: "Page 1 - Initial Setup",
              groupFields: [
                PropertyPaneTextField('name', {
                  label: "App Name",
                  multiline: false,
                  resizable: false,
                  placeholder: "Please enter an app name","description": "Name property field"
                }),        
                PropertyPaneSlider('slider', {
                  label:'How Many Sections?',min:1,max:5
                })       
              ]
            }
          ]
        },
        { //Page 2
          header: {
            description: "Page 2 - Section Setup"
          },
          groups: [
            {
              groupName: "Sections",
              groupFields: page2Obj
            }
          ]
        },
        { //Page 3
          header: {
            description: "Page 3"
          },
          groups: [
            {
              groupName: "Links",
              groupFields: page3Obj
            }
          ]
        }
      ]
    };
  }
}

In the TextBox section you can add a text validation, as show in the Microsoft Article.

 onGetErrorMessage: this.textBoxValidationMethod,
                  errorMessage: "This is the error message",
                  deferredValidationTime: 5000,

When the app is run on the local workbench, using Gulp -server nobrowser

Page 1 will look like this. I have selected 2 sections from the slider.