Office 365 – SharePoint Online – Dirty form protection with SPFx

Within an SPFx web part I’ve got a form that is completed by a user. To make sure that the user can’t navigate away from the form unless they cancel, save or close the form I’m adding a div that spans across the whole page. This is all great and quite easy to implement. Similar to the out of the box new item form in SharePoint online.

I noticed however that that when I simply type a different URL in the address bar of my browser that there is no way of protecting the dirty form.

To take this a step further I went to a modern page in SharePoint online. put this page in edit mode and then types a different URL in the browser. The browser now doesn’t give me any warning whatsoever and therefore my change made to a page are also not kept.

Then I tried the same with a new News pages ( a new feature that has just been added today!)

When I now try to type a different address I do get the expected warning:

So news pages protect themselves, but the out of the box web parts pages don’t

This is a big difference between the modern and traditional pages. So is there a way to protect your forms and or web part pages?

If the new pages that I just created has the protection then maybe there is something on that page. Maybe I can download the News Post.

But there is no download link available:


So I’m opening my library in SharePoint Designer. I never thought I would say this but this time I’m going to like SharePoint Designer. First of all I can’t open the site by using the site url. I’m simply getting for Forbidden messages, but when I use the https:/ / URL my site opens without any problem!


Then using the export file, I’m getting my aspx file.

For my home page I’ve now found:


For my news article page I’m finding:


So it could be that the check of the page being dirty vs not dirty is controlled by a page layout as there isn’t much of a difference in the page otherwise.


Please leave a comment or feedback

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.