I need the abiility to create custom HTML (data-) attributes from UI Builder on an element to set the element’s data source.
It’s quite redundant to have to set a classname on an element just to have some JS code add the HTML attribute and remove the classname at run-time.
Something like this: (borrowed from Webflow) 
I would like this issue reopened and considered for future Backendless implementation.
This is pretty basic functionality, to be able to add simple HTML attributes to elements, and is a necessity for working with HTMX.
Is there a particular reason why this can’t be implemented in the Backendless UIBuilder console in the near future?
Hello @Michael_Kadron
Thanks for informing us about your need. We will discuss about it again and let you know if it will be declined or when it will be implemented.
Regards, Dima.
Hello @Dima,
Thank you for your response.
I have an upcoming project where they want HTMX implemented.
If I could actually get HTMX working in Backendless using JS, I would, but I can’t get it to work.
The HTML attributes are being written correctly, but the actions are being blocked for some reason.
Do you have any experience with HTMX and how it needs to be done while using Backendless?
Mike
Did you try using a Custom UI Component, as Vladimir Upirov suggested?
If that didn’t work, I’m curious to know why it didn’t.
Hello @Michael_Kadron
Please help me understand your cases, for now, I am not sure what the main goal is to add some custom HTML attributes to components. UI Builder component basically is a complex component which contains several HTML dom elements inside and has its own logic on how to render it, so injecting any HTML or JS into such a component might lead to issues.
In case you need to create a few simple components you can create your own custom components and then add any properties and handlers you need. Do you have any problems with creating components?
No, we do not have experience with HTML, it sounds like some kind of framework to build web apps. UI Builder produces a React app and in my opinion, mixing several frameworks in the same is not a good idea. Or maybe I misunderstood you, could you please provide your vision of how it might work together?
Regards,
Vlad
Hello @vladimir-upirov
Well, the problem is, I cancelled my 14 year love affair and subscription with Webflow years ago when I decided to move full-force over to Backendless. I develop both websites and webapps using Backendless now, and hadn’t (until now) encounted problems doing what I need to do to get the job done correctly.
I think what’s happening is the Backendless JS is using the preventDefault on the native click event of an element and preventing the click event from triggering on an element with HTMX attributes on it.) …but that’s just my guess. I only use Javascript when I absolutely have to
The reason that I need to use HTMX is because I have a client that wants me to implement it, and for future flexibility.
Here’s a simple example trying to implement HTMX: https://app.ganet.us/HTMX_Playground/index.html
And here’s working example that’s just a static HTML page with HTMX attributes: HTML Test (which is working correctly)
Notice that it’s being initialized properly, but it’s not being able to intercept the element click event.
Do you have any ideas about how I could get this to work properly?
Thanks!
Mike
Hello @Causality
I’m able to inject the HTML attributes just fine, the problem is being able to get the HTMX code and actions to work properly.
Mike
well, we do not have onClick listeners inside the button component which might contain any prevent default
I guess it doesn’t work because this is a react app and HTML content renders in runtime while the HTMx library activates on the index.html page (which is almost empty)
take a look at the topic
Thanks @vladimir-upirov !!!
That pointed me in the right direction.
All I had to do to get it to work was add the following custom code to the page’s onLoad event:
htmx.process(document.body);
Original post considered, it still would be GREAT to have the functionality of adding HTML attributes to elements within UIBuilder! (like at the end of the “Settings” heading right before “General”) 