How to Ad Html Elements to Canvas

How to I add html element controls to canvas… ex. textarea, dropdown list checkbox etc??

Saola Animate version:



So, far, I think i have the right idea…

  • Add html widget
  • select resource
  • link to an html file that has my html element controls code

But, when i run it… the controls don’t show.
And when I save and close, and try to re-open, I get error saying cannot load resource and the widget is gone when the page loads

What gives?

Okay… didn’t realize that you also have to go down in the properties and hook up the resource again.

That worked.

But, do we have to hook up the resources twice… whey not just once.
When you hook up the resource in the Html Widget dialog box, why not when we click okay it fills in the resource field in the properties window. Seems redundant.

I am still getting the “cannot load resources” error when I open the project. Why?

It works in the IDE, I save it. The external html is where is supposed to be.

What am I missing??

Here is my screen to prove It in the project.
Plus, I works fine when I run it.

But When i open it… I get the error and my canvas loads all blank… then i have to re-import my html resource. Surely this is not correct.

You don’t have to attach it to a resource. Add the widget, but leave the resource field blank and select okay. Then with the widget selected, there is an ‘Edit HTML’ button in the Embedded panel - use that to add your code.

You can also in some circumstances simply add a text box and use the HTML option to add code directly to the text box. There is a post somewhere that shows this with a Text Input Box.

It’s also worth remembering that you can create much more interesting controls with Saola for drop-down menus and select boxes without having to use the standard HTML form options.

That is fine, but what about WHY the resource doesn’t load when i open a project??

No idea. It works fine on my system.

If you post the linked resource file, I’ll check it works on my system.

Here is the test project (46.1 KB)

Hi Frank,

Your project file name (Controls), and your HTML file name (controls) are case-insensitive identical so this issue occurs.
We’ll fix it in the next update.
In the meantime, please rename your HTML file before importing it into Saola Animate as a resource.
I’m sorry for this inconvenience.


No problem… at least I know now.
Maybe add a comment about uppercase in docs or in the error message itself.
All is good now.