Displaying Notifications and Status Messages from a SharePoint-based AngularJS Application ...


Assume the following requirements: We should create a Single Page Application( SPA) (no SharePoint App!) that reads data from SharePointusing the JavaScriptclient object model, allows the user to edit the values, displays if a field value was changed (if it is “dirty” vs. “pristine”), performs data validations (if it is “valid” vs. “invalid”) and lets the user to save the changes. AngularJSwas selected as the presentation framework for the SPA. On data save, we should give the users feedback on the progress (like “ Saving changes…”, “ Save completed” or “ Error during the save operation”) via standard SharePointnotifications and status messages.

Challenge 1:The FormController of the AngularJSframework is based on the form HTMLelement. That means, if we would like to use the features of the FormController, like dirty / pristine, validation, etc., we should include a formelement in our HTMLapplication. However, our SharePointpage is an ASP.NETpage, that already contains a formelement, and it does not like to include multiple ones.

Solution 1:Although there are tricks to bypass this limitation (like thisor this one), I chose another way to go. I’ve included a Page Viewer Web Partthat displays a “pure” HTMLpage that is stored in a document library in SharePoint, as well as any other non-standard artifacts of the application ( .jsand .cssfiles, etc.). This HTMLpage – displayed in an IFRAMEby the Page Viewer Web Part– contains the formelement, that does not interfere with the form element on the ASP.NETpage.

You can display a notification by calling the SP.UI.Notify.addNotification method, similarly a status message is displayed via the SP.UI.Status.addStatus method. Both of these Notifyand Statusclasses are defined in the SP.UInamespace in the sp.js(and its debug version in sp.debug.js). This JavaScript file is typically referenced in the standard SharePointpages, however you should add a reference to it in your custom pages, like in the case of our HTMLpage. If you forget to add the reference, you will get an error like this one:

TypeError: Unable to get property ‘addNotification’ of undefined or null reference

Challenge 2:There is no notification / status message displayed, even if you add the reference to the sp.js. The reason of the problem is, that the HTMLelements required by these methods are defined in the master page of the standard SharePointsites. Obviously, these elements are not found in our custom page in the IFRAME, so the messages are not displayed.

Solution 2:I’ve found two similar blog posts ( this oneand this one) describing a similar issue with IFRAMEand notification messages in the case of Client App Parts. The first of this two posts states that the problem is the IFRAMEitself, that prohibits the communication between the parent page and the IFRAME. Of course, that is wrong. The real reason is the different domain names in the URLof the app part ( IFRAME) and the host page, as correctly stated in the second post. If we have the same domain name (and we do have in this case), we do not need the rather complex approach described by the posts(that is still valid for the Client App Parts). Displaying a notification / status message from the script included in the HTMLpage in the IFRAMEin our case is so simple as to prepend the text ‘ parent.’ before the method invocation, for example:

var notifyId = parent.SP.UI.Notify.addNotification("Saving…", true);

Of course, in this case you are using the JavaScriptand HTMLobjects on the parent page, so you don’t need to reference the sp.jsin your HTMLpage.