I am rewriting a single page application that will be hosted "inside a SharePoint web part" as part of a rework/redesign project on a pre-existing SharePoint solution and as a part of this I am switching from a server side controls + Update Panel Hell based solution to an AngularJS based one.
One of the view I am redesigning is basically a table (with some added complications like dynamic columns and such that aren't really the focus here) with inline edit support. Looking at the available technologies, I have considered using the Angularjs port of the X-Editable library.
After some initial test, I have identified a possible solution using what X-Editable calls "Form based Editing": basically, a group of controls can be grouped in a "Form" and that form cam be controlled by an single set of Edit/Cancel/Save buttons. By putting that in a ng-repeater, I could easily achieve the desired results - inline editing for my table rows.
Sadly, there seems to be two mayor problems with this approach:
- X-Editable requires the control to be wrapped in a "form". That is conflicting with the common SharePoint page structure that often wraps all the page content in a form too.
- X-Editable seems to require that the "Save" button on a form is an actual
type="submit"button. This agains conflicts with SharePoint own page level
formtag: if I use a
type="button"button, X-Editable won't recognize the save event, if I use the submit one, SharePoint will try to submit the main form. Trying to use a
return false;trick on the button onclick handler won't work either - X-Editable won't recognize the button click that way.
I am currently searching for a solution to this problem that won't require editing the SharePoint master page / page layout (I can't control those). Documentation on the matter from the X-Editable site seems still lacking this specific use-case... probably because no one had to work with an unwanted outer form tag on the page he didn't need in the first place...