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.

Office 365 - SharePoint Online - Dirty form protection with SPFx 1

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!)

Office 365 - SharePoint Online - Dirty form protection with SPFx 2

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

Office 365 - SharePoint Online - Dirty form protection with SPFx 3

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.

Office 365 - SharePoint Online - Dirty form protection with SPFx 4

But there is no download link available:

 

Office 365 - SharePoint Online - Dirty form protection with SPFx 5

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:/ /mytenant.sharepoint.com/sites/CommSite/SitePages/ URL my site opens without any problem!

Office 365 - SharePoint Online - Dirty form protection with SPFx 6

 

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

For my home page I’ve now found:

[code lang=text]
Home
[/code]

For my news article page I’m finding:

[code lang=text]
Article
2.00000000000000
[/code]

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.

Leave a Reply

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

%d bloggers like this: