How to Customize just the property pane without building webpart

Question

Does anyone know how can I show the property pane without creating webpart?

I want to show the property pane after clicking the User Management icon, which is created with extension

Answer 1

Taken from this repo which has some of the official samples from the SPFx extensions model and depicts a pretty close use-case to the one that you are searching, there is an element in Fluent UI called Panel.

As it is written in the documentation:

Panels are overlays that contain supplementary content and are used for complex creation, edit, or management experiences. For example, viewing details about an item in a list or editing settings.

Furthermore, scouring the repo we can see that the panel is triggered:

...
import { Panel, PanelType } from "office-ui-fabric-react/lib/Panel";
...
class GraphBot extends React.Component<IGraphBotProps, IGraphBotState> {

....
    public render() {
    // Be careful, the user Id is mandatory to be able to use the bot state service (i.e privateConversationData)
    return (
        <div className={ styles.banner }>
            <ActionButton onClick= { this._login } checked={ true } iconProps={ { iconName: "Robot", className: styles.banner__chatButtonIcon } } className={ styles.banner__chatButton}>     
                { strings.GraphBotButtonLabel }              
            </ActionButton>
            <Panel
                isOpen={ this.state.showPanel }
                type={ PanelType.medium}
                isLightDismiss={ true }
                onDismiss={ () => this.setState({ showPanel: false }) }
            >
                { this.state.isBotInitializing ? 
                ....                    
                }                    
            </Panel>
        </div>
    );
}

There is an <ActionButton> with an OnClick Eventhandler to execute the below function :

private async _login()  {

    this.setState({
        isBotInitializing :true,
        showPanel: true,
    });
....

The above function sets the showPanel prop to true and this prop is used in the Panel Component, where it checks when set to true to open the Panel and move on with the Business Logic of the application extension.

The same can be seen in the Fluent UI Documentation here, in the basic example.

import * as React from 'react';
import { DefaultButton } from '@fluentui/react/lib/Button';
import { Panel } from '@fluentui/react/lib/Panel';
import { useBoolean } from '@fluentui/react-hooks';

export const PanelBasicExample: React.FunctionComponent = () => {
  const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);

  return (
    <div>
      <DefaultButton text="Open panel" onClick={openPanel} />
      <Panel
        headerText="Sample panel"
        isOpen={isOpen}
        onDismiss={dismissPanel}
        // You MUST provide this prop! Otherwise screen readers will just say "button" with no label.
        closeButtonAriaLabel="Close"
      >
        <p>Content goes here.</p>
      </Panel>
    </div>
  );
};