I'm developing a SharePoint Framework (SPFx) list Extension (Command Set). After clicking on my custom action/Command I would very much like to open a side panel like in this nice demo. I haven't found any "official side panel" component, is there any?

To use the demo code linked above, I need to access some DOM element or a page placeholder. In the demo, which is a web part, they can access the DOM element.

export default class SidePanelWebPart extends 
BaseClientSideWebPart<ISidePanelWebPartProps> {

public render(): void {
  const element: React.ReactElement<ISidePanelProps > = React.createElement(
      panelPosition: this.properties.panelPosition

  ReactDom.render(element, this.domElement);

However my Command Set list extension is a BaseListViewCommandSet, and I cannot find any domElement or any other element reference in this, this.context or this.context.pageContext.

Following this Microsoft guide it should be possible to get a reference to a page holder via the context.placeholderProvider property.

this.context.placeholderProvider.tryCreateContent(        PlaceholderName.Bottom)

Again my Command Set list extension is a BaseListViewCommandSet, and this.context does not contain a property placeholderProvider, neither does this.context.pageContext.

So I've just reverted to getting any element via plain javascript, e.g. via document.body:

ReactDom.render(element, document.body);

And it seems to work. But it feels hackish to open the side panel in this manner. But this is the best I've found so far. Any suggestions of improvements?

Edit 2018-03-27 To further explain. The "side panel" experience should be the same as when you use the "Copy to" and "Move to" custom actions: enter image description here

  • what exactly do you want to do ? sorry didnt get your question :( , do you want to open a panel whenever a button in ribbon/command bar is clicked ? Mar 26, 2018 at 11:11
  • Yes, the same as happens when you use "Copy to" for an example. See the edit above with the new image.
    – Gil Roitto
    Mar 27, 2018 at 14:25

1 Answer 1


The trick I found out was to open it inside a modal.

Inside your webpart typescript file, add the below import statement:

import MyCustomPanel from './MyCustomPanel';

Now, in your onExecuteMethod, use the code mentioned below:

  public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
    switch (event.itemId) {      
      case 'COMMAND_2':
      const dialog: MyCustomPanel = new MyCustomPanel();

Now, create a component file name MyCustomPanel.tsx and add the below code:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BaseDialog, IDialogConfiguration } from '@microsoft/sp-dialog';
import {    
} from 'office-ui-fabric-react';

export default class MyCustomPanel extends BaseDialog {

  public render(): void {
      isLightDismiss={ false }
      isOpen={ true }
      onDismissed={ () => this.close()}
    >Hello there from my custom Panel</Panel>, this.domElement);

End result - i have a custom button named Command Two. See what happens when I click on it:

enter image description here

  • hey @gilroitto, did you try this in your command set ? Just for demo purpose, have kept the panel size as large using the type={PanelType.large} attribute. You can control the panel size with small, medium etc values as well. Mar 29, 2018 at 11:01
  • I am sorry, I've been busy with other work. But I tried your solution now and it works perfectlt! Thank you. My old bount expired, but I started a new one now to award you. I have to wait 24 hours apparently before I can do so however.
    – Gil Roitto
    Apr 12, 2018 at 11:13
  • whoa, no worries mate, you can simply accept the answer by ticking the checkmark against the answer and SO will do the needful. By accepting an answer, it will also get removed from the unanswered section. Happy to help :) Cheers - Gautam. Apr 12, 2018 at 12:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.