2

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(
    SidePanel,
    {
      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 ? – Gautam Sheth Mar 26 '18 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 '18 at 14:25
3
+100

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:

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

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 {    
  Panel,
  PanelType
} from 'office-ui-fabric-react';

export default class MyCustomPanel extends BaseDialog {

  public render(): void {
    ReactDOM.render(<Panel
      isLightDismiss={ false }
      isOpen={ true }
      type={PanelType.large}
      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. – Gautam Sheth Mar 29 '18 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 '18 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. – Gautam Sheth Apr 12 '18 at 12:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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