I have an opencore form, that consists of an html component, an edit grid, and couple of buttons.
What I’m trying to accomplish, is to pass some html content of an email to the html component, so that it renders inside the form.
If manually populated, the html component displays the email nicely. But when I’m trying to pre-populate this form via node-red, it doesn’t get populated.
Here is the working json from the forms builder. I actually need to target the “content” property of this object. The API key was set to htmlEmail
This was way harder than it should have been. And no, it’s not because OpenCore is complicated - it’s just Form.io being… special. Posting here since I couldn’t find this documented anywhere and it turns out to be ridiculously simple once you know about Form.io’s lovely little quirks.
In Form.io: Add an HTML component to your form. Here’s the important part - set the HTML tag to div. This is crucial and not obvious at all. I wasted 4 hours because I left it as the default and it just wouldn’t work. Has to be div or the dynamic population fails silently.
In the Content section, put your placeholder like {{data.htmlContent}}. You can call it whatever you want instead of htmlContent, just needs to be under the data object and match what you send from Node-RED.
In Node-RED: Just make sure your payload includes the HTML content under the same name. So if you used htmlContent in the form, your msg.payload needs to have htmlContent in it with your HTML string.
You basically don’t have to target any field, you just dynamically populate html content into the html component, and it will parse properly.
Hope this saves someone else the debugging time!
