In reply to: Jarosław Kommisarczyk
Hi Everyone,
Great post from Daniel! However, do you see a potential workaround for this "sanitization" done by WEBCON? It was not explicitly reported in the changelog, so it is really annoying. We are stuck with deployment of the new application versions because updating PROD system will break our application.
I could imagine the following "trick":
1. The data row fields should return initially "safe" DOM elements like <div>. It is possible to assign id's to such DOM elements.
2. Create a form rule (JavaScript) that will cycle through such DOM elements and alter the innerHTML content with the original active content we want
3. Put the form rule from point 2 into Behavior tab of your form
I tested it for a single list item line and it seems to work - see example JavaScript function. But it is really tricky and ugly
setTimeout(function () {
elem = document.getElementById( 'AA' + GetPairID(G_WFELEM) );
console.log( elem );
if ( elem != null )
{
elem.innerHTML = '<button onclick="alert(\'I was clicked!\');">My button</button>'
}
}, 10 );
Please note, that the delay can be set as small as 10ms or maybe less. The rendering looks correct.
Any better ideas so far?
Hi Jarosław,
I don't see any real option to work around it.
1) It would only help, if you could inject the workaround in all processes without touching them. If you need to modify them then you can also change the SQL so that you don't need a workaround.
2) The work around should also work when there are multiple item lists in tabs, when new rows are added/ switching to "edit all rows" and in single edit mode. While it would be feasible for item list in tabs, by using a HTML field below the item list, it will get ugly for new rows/edit all rows it would get even uglier for the single edit mode.
This is one example how we need to change it:
Before:
<button class="webcon-button webcon-button--padding-small standard-focus webcon-button--icon-button no-background th-hover" >
<i class='icon ms-Icon ms-Icon--Rename ms-Icon--standard' style='font-size: 15px' title="Rename" onClick="ccls.renameRelatedAttachment.rename(this)"></i>
</button>
After:
<a class="webcon-button webcon-button--padding-small standard-focus webcon-button--icon-button no-background th-hover" onClick="ccls.renameRelatedAttachment.rename(this)"> <i class='icon ms-Icon ms-Icon--Rename ms-Icon--standard' style='font-size: 15px' title="Rename"></i>
</a>
While implementing this I noticed that not only HTML elements are checked but also the attributes of those. If you still see the HTML instead of the supported element then you need to remove attributes. For whatever reason, we had the onClick on the i element.
Best regards,
Daniel
15.07.2024
10:02
