Add lists to an HTML Snippet Container causes the editor to come blank on subsequent page loads

[CherPoint]

Having an issue where when I go into configuration after using tabs. Page says 'Initializing form..' and then display a big white page with nothing on it. Behavior exists in Chrome, IE, Safari. Reload does nothing. Clicking views does nothing.
Using:
Latest SPEasyForms
Lastest IE, Chrome, Safari
SharePoint Online (2013 Team Sites)

[mcsheaj]

It sounds like your configuration for the list has become corrupted somehow, but without seeing that file it's impossible to speculate further.

You can always delete or rename the configuration file in the Site Assets folder. It will be named spef-layout-{GUID}.txt, where GUID is id list that you've configured. If it is indeed corrupted, that should get you into the editor again, but of course you're starting over from scratch.

If you want to send me the file, I can take a look and see if there is anything obviously malformed in it.

Joe

[CherPoint]

thanks for the response! I was able to work around the blank screen. I basically added a new container (tabs) and the page displays. then I delete the newly added tabs container. However; this must be done every time I want to modify the form.
spef-layout-a2b7162d-65a4-48fb-a904-280ea467abdb.txt

[mcsheaj]

Ow! I'll see if I can reproduce. How did you add a tabs container if the editor was coming up blank?

Joe

[CherPoint]

Worked until I added a Tabs Container & a HTMLSnippet. Shortly after, the page start rendering blank. The container order on the left is 1-HTMLSnippet, 2-DefaultForm, 3-Tabs. Maybe the order of containers might be causing some anomalies?

[mcsheaj]

With your configuration, I was able to reproduce this. And it looks like a simple enough configuration. I don't see anything obviously wrong with it. I'll try to debug it and see what's going on as soon as I can.

Joe

[CherPoint]

No worries. We really like the functionality SPEasyForms gives us! Kudos and thanks.
Mac

[mcsheaj]

This kind of problem generally means that something got stored in the configuration that cause JSON.parse to barf on it. But in your case, the new/edit/display forms work correctly with this configuration, and that wouldn't happen if I can't parse the configuration.

So the most obvious potential culprit is your HTML Snippet container, just because it has a lot of stuff in it and it's the only thing even slightly "complicated" about the configuration. And you can definitely shoot yourself in the foot with HTML snippets. i.e. if you put in some invalid HTML (like an un-terminated quote for instance), that would effectively break the DOM (document object model), causing the JavaScript to error out or even just silently fail (in this case it's the latter, no exceptions occur in the JavaScript).

So I manually removed all of the content from that container, and the editor came up just fine. I don't see anything obviously wrong with your HTML, but I'll keep looking. Worst case is I'll just add your HTML back one line at a time until it stops working to narrow down where the problem lies.

This isn't really a bug, as there is no way on the client side to look at an HTML snippet and validate that it won't cause undesirable side effects. But I'll keep looking and let you know what I find.

Joe

BTW - I accidentally closed this issue when I submitted my last comment, I have reopened it now.

[mcsheaj]

The order of containers shouldn't matter, but I did think of that too, so I tried changing the order to no effect.

Joe

[mcsheaj]

Ok, there is a bug, and technically it's not my bug. It's in a 3rd party library I'm using to allow drag and drop of nested containers called nestedSortable jQuery plugin. It may not even be fair to call it a bug; the author may consider it a known limitation, but it's not documented as far as I can see.

Anyway what it comes down to is that the nested sortable library uses lists (ordered by default) and list items for it's implementation, and crashes if there are embedded list items that are not part of the sortable structure. What that means is that the HTML snippet container cannot contain any lists or it crashes. You have an unordered list with four list items and that won't currently work.

For starters, I'm attaching a configuration that has a snippet that looks much like what you already had but doesn't contain any lists or list items:

spef-layout-c31ee3c6-09e8-450c-aa89-b4ae4053a794.txt

This obviously is just a hack to work around the issue for you right now.

As for long term, I'll try downloading the latest version of the library and see if it's been fixed. If not, I'll try to contact the author to see if they have any interest in fixing the issue. If not, I may try to tackle it myself, but it's a pretty complicated piece of functionality and I don't have a ton of time to spend on it at the moment.

Short term, it's a new known limitation of SPEasyForms that HTML snippets cannot contain list items ;)

Joe

[mcsheaj]

This is fixed in 2018.01.