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.
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);