Custom HTML Tool Blocks?

Would it be possible to have custom HTML blocks in the Tool palette?

In fact this would be reusable HTML blocks in a separate Custom group in the Tool palette. Creating such a block could be as easy as adding a custom function. I see the following advantages:

1. Faster building via drag and drop, while reusing often used HTML components.

2. A good way to push the functionality of AB by community contributions. Just the same like the custom plugins, but easier to create.

What do you think?

Hello Harald,

I think the idea can be good, of course. However, I am not quite sure about their possible implementation. If we are talking about to share HTML markup, certainly, just to copy that markup into the clipboard, and then paste it into the AB designer, causes the creation of a new HTML Content control with the clipboard's HTML markup.

On the other hand, an HTML Content control can also contains events and may the right code placed in that events. When we copy an HTML Content control to the clipboard from AB, what we copy is a XML piece which include both, the HTML markup and the possible events and code of that control. So, I am not sure if you refer to share only the HTML markup or may also the code.

What do you think about? Any idea after the above? I will insists that the idea appear good to me, but, maybe we must think about twice before try any possible implementation.

I appreciate the idea to drive this further, including events. Such control could include events, CSS code and JavaScript code as well. All dependencies encapsulated in a single control.

Depending on their skills, users could use this to create plain, simple HTML building blocks (the same as copy/paste HTML code) or highly complex controls with events, JS and CSS.

Hello Harald,

Sound good, but, probably we are talking about something beyond "just" custom HTML blocks... In fact, a Javascript plugin for App Builder can perfectly require an HTML control, so, they can act or do something with that. Another kind of plugins in addition to the Javascript ones? Let me to think about... and please, post here if you have any idea that you consider that can be good on this topic.

Yes, this goes far beyond simple HTML building block.

The user could have multiple tabs in the custom control's editor:

1. HTML: For all the HTML stuff.

2. CSS: For all the CSS-Code. This is compiled to a separate file and linked to the header during the build process. E.g. component-name.css

3. Javascript: For all the JS-Code. This is compiled to a separate file and linked to the header during the build process, too. E.g. component-name.js

Maybe a 4th tab for resources, as images etc. Here could be also a field for a small icon, displayed for the custom component itself in the Tools palette.

The event stuff could go to the JS-Tab, either as visual components, or hand-coded by the end user as JS-code.

One more thing: Properties.

Custom HTML code should allow placeholders like {property-name} which generates a string property in the inspector.

This would allow e.g. variable icons, colors etc. in a menu HTML custom block, changeable via the inspector palette

I think simple HTML with {}-variables and editable properties in the inspector would be a good starting point. The more complex stuff could be added later. Experienced users can add styles and JS code in the HTML editor itself to get a component working.

Plus an export as XML (or ZIP file?) button, to allow sharing of components among users.

That is all which came to my mind so far. Maybe some other ideas from other users here?

Hello Harald,

Thanks for your ideas. There is a lot of work and the time is limited, but, I will look into this for sure. I think the Javascript plugins can be useful... and in fact there are various of them working like a charm. But anyway I will look into this and hope that can get something good.