Creating an Edit Mode Panel for a Sharepoint Online web part

Question

I have created a part that adds css and JS to my page.

I would like to have the part be visible from the editor mode, right now its invisible unless you happen to mouse over it.

I've found this documentation: https://docs.microsoft.com/en-us/sharepoint/dev/general-development/how-to-add-an-edit-mode-panel-snippet-in-sharepoint

The issue is that the documentation's context is limited to inserting snippets. I am building my web part through code. I have attempted to insert the snippet from that document into my part but it doesn't work. The element is always visible even when not editing.

How do I add an element to my web part that only appears in edit mode?

Answer 1

In the BaseWebPart class you can access the displayMode property to see if a page is in edit mode or not.

Reference: https://docs.microsoft.com/en-us/javascript/api/sp-webpart-base/basewebpart?view=sp-typescript-latest#displaymode

 if (this.displayMode === DisplayMode.Edit) {
   this.domElement.innerHTML = `<div>Edit mode</div>`;
 } 
 else {
   // code for read mode
 }

Optionally, you can test against the URL. In modern pages this will have ?Mode=Edit when you are editing a page.