Azure / Office 365 / SharePoint Development / Search

Trigger the edit page experience from your SharePoint Framework solution

January 26, 2018

This is a quick article to show you how you can open the edit page experience from your SharePoint Framework solution. Such a trigger could be useful so that you can trigger the page its edit mode from within your web part, footer, …

Nothing more to say about it, so here is the code:

Here is an example of what you could expect:

Trigger edit page

Trigger edit page

When the page is checked out to someone else, you SharePoint lets you know who is editing it:

Page is already checked out

Page is already checked out

Other actions

Other actions like saving, publishing and discarding are also availble:

  • _api/sitepages/pages({id})/SavePageAsDraft
  • _api/sitepages/pages({id})/DiscardPage
  • _api/sitepages/pages({id})/SavePage

Comments

  • Jonas Engdahl

    Is there a way from an SPFx Extension to know if the page is in edit mode? I would like an event. SharePoint can set the page in edit mode without navigating. (Probably using the history.pushstate() for updating the window.location.href) I could check window.location.href at a regular interval but that does not seam right.

    • In the context of a web part you have this.displayMode to cover this, but in an extension can only check it on URL level at the moment.

      Behind the covers they indeed use the history.pushState method to open the edit experience. One problem, you browser only has an event handler for onpopstate which we can bind to. Of course, we could write our own handler which binds to the pushState event.

      Here is the code snippet for it:

      // Binding to page mode changes
      const _pushState = () => {
        const _defaultPushState = history["pushState"];
        const _self = this;
        return function (data: any, title: string, url?: string | null) {
          // We need to call the in context of the component
          _self.setState({
            showEditLink: url.indexOf('Mode=Edit') !== -1 // Check if the URL has changed to edit mode
          });
      
          // Call the original function with the provided arguments
          // This context is necessary for the context of the history change
          const pushCall = _defaultPushState.apply(this, [data, title, url]);
          // Return the original method
          return pushCall;
        };
      };
      history.pushState = _pushState();

      Here is the result in my footer:

      https://uploads.disquscdn.com/images/d9a8eefbb1ec013ecab5645cfcef910bdb459b8c3a097829be5907f20e8c5d30.gif

  • Pingback: Office 365 Security Enhancements; Get External Data in to SharePoint; Office 2019 Will Require Windows 10()

  • Pingback: Check the page mode from within your SharePoint Framework extensions - @eliostruyf()