This is a general question and is not actually regarding a specific application.
I briefly chatted with Mark about this issue and he suggested that I post it to the support forum for further help.
I need to interface an application built using UI-Builder with V(lang) on the backend.
The problems that I’m running into are regarding using the individual HTML files from a project.
I understand that before the application is “built” (bundled and minified) that the individual HTML files are available inside the UI-Builder containers, the problems being that these files are certainly not optimized and are very inefficient.
Also, there is also the problem of the LESS files not being compiled to CSS yet, and the source files obviously do not use CSS files at this point – so the source files at this stage don’t even work properly as far as I can tell.
What is the best way to get access to the individual pages’ HTML files for manually adding script tags for V(lang)?
I mentioned to Mark that Webflow has the ability to add source code to a “Embed” block. With Webflow, the source code that’s added is not checked to be sure that it’s “valid” – so this works correctly with adding custom code directly inside the embedded HTML “Embed”. But it does not appear that B.E. is able to do this. I certainly don’t want to have to re-add the code manually every time the site is changed!
Here’s an example of how the HTML would need to be exported for a viable V code snippet.
<h1 class="title">Hi, ${user.username} you are now online!!!</h1>
<div>@include 'header.html'</div> <!-- imports header.html located in the same directory inside the DIV -->
@css 'src/templates/stuff.css' <!-- imports the local CSS file -->
Test <b>app</b>
<br>
<h1>@hello</h1> <!-- <<< this accesses V-ariables (hello) passed into the template HTML file from the V-code -->
<hr>
Code demo: <br>
@if admin { <div><p> Secret admin Div here </p></div> } <!-- If admin is True, then this DIV is displayed -->
For-loop demo: <br>
@for product in user.products
<tr>
<td>${product.id}</td>
<td>${product.name}</td>
<td>${product.created_at}</td>
</tr>
@end
@include 'footer.html'
I’ve tried adding in the V-code manually to the individual pages’ HTML files from within the B.E. file manager (Does not work – the code is put inside double-quotes in the outputted HTML.)
Any ideas on how to get the V-code to work properly from within B.E.?
I’ve tried adding in the V-code manually to the individual pages’ HTML files from within the B.E. file manager (Does not work – the code is put inside double-quotes in the outputted HTML.)
Any ideas on how to get the V-code to work properly from within B.E.?
Please clarify, where the V-code will be processed. I need help understanding how and where you transform your V-code into HTML.
But the V-code added into UI-Builder needs to be persistent so it doesn’t have to be added manually after every build.
I forgot to mention that Mark already had me try the custom HTML component – but I couldn’t get it to work correctly with the added code. It just added double-quotes before and after the added code like this:
“@if admin”
do you want to use custom HTML in your UIBuilder app to be able to modify the app using the UIBuilder designer => build it using Backendless => and run it as SinglePageApplication (SPA) ?
or, do you want to get sources of the UIBuilder => modify it => and run it on your server?
#2: Run the B.E. app on our server. The local V-code is connecting to a local SQLite DB that handles local project settings along with an in-memory database. So yes, we need source code to the bundled, optimized app with the .less already compiled to .css.
The B.E. API would house/handle the main BDB for record details and data paging operations.
We are trying to keep the B.E. API calls to an absolute minimum.
Since the UI-Builder produces Single Page Apps (SPA) which run on ReactJS and our UI-SDK, and we do not have composed HTML pages, instead, it consists of
layouts UI described with XML
js code Logic which connects to its particular UI Component
styles CSS (in preview mode it is LESS and converts to CSS on the client in runtime)
in addition, it contains Custom and Reusable components which render UI in runtime
So, as you can see, there is no easy way to get source files HTML/CSS because nobody knows what each React component looks like in the real browser DOM in runtime because it might depend on many factors.
However, you can try to
build your app (to get optimized CSS) and open in the browser
then open the browser dev tool and copy the entire DOM
insert the copied content in an HTML file and open the file in the browser
And pay attention the JS won’t work correctly or it probably won’t work at all because starting the UI-SDK expects to render the app from scratch, but removing all JS links from the HTML might render non-interactive HTML
I have it working utilizing the bundled, optimized exported source.
The problem is being able to enter V-code into UI-Builder, and having it show up in the source file(s) (without the added double-quotes) and having it persist across different builds.
That’s why I mentioned something like the Webflow “Embed” container. Something like this should do the trick because it doesn’t “correct” the source – it only embeds it as-is.
Mark had me try the custom HTML component, but it seems to “correct” the added source and puts double-quotes around any code. What are your thoughts on this?
Mike
From “Vladimir Upirov via Backendless Support” <support-forum@backendlessmail.com>
To “Michael Kadron” <mike@hyperpixels.net>
Date 10/23/2023 9:25:43 AM
Subject [Backendless Support] [UI Builder] Getting individual HTML files from a project
No, I said that it looked like the custom HTML component was ADDING the double-quotes where there were none.
Do you think it’s possible in the future for B.E. to incorporate something like the Webflow Embed component that does not “correct” the added code?
Mike
From “Vladimir Upirov via Backendless Support” <support-forum@backendlessmail.com>
To “Michael Kadron” <mike@hyperpixels.net>
Date 10/23/2023 10:15:58 AM
Subject [Backendless Support] [UI Builder] Getting individual HTML files from a project
No, I said that it looked like the custom HTML component was ADDING the double-quotes where there were none.
could you please a file where you the custom HTML
Do you think it’s possible in the future for B.E. to incorporate something like the Webflow Embed component that does not “correct” the added code?
I’m not familiar with how “Webflow Embed” works under the hood, so I’m not sure I can answer the question, I can only assist you with our UI-Builder and explain how our UI-SDK engine works.
Theoretically, we can implement a brand-new component for inserting any Text into it and skip parsing and validating the content.
However, it would be great to get the main idea, because it’s still not clear to me the following points:
doesn’t the CustomHTML component work as expected? if you insert any HTML it should render it without any issue
what’s the reason for inserting V-code (which is not a real HTML) as a custom HTML into the Custom HTML component, it won’t work because the browser won’t be able to recognize the V-code syntax?
even if you insert the V-Code into a UI-Builder source file do you expect that the page is still valid for editing in the UI-Builder designer?
how do you plan to interact/modify the V-code?
perhaps you can send us your project (with minimum code) and step-by-step instructions to describe your case
From “Vladimir Upirov via Backendless Support” <support-forum@backendlessmail.com>
To “Michael Kadron” <mike@hyperpixels.net>
Date 10/23/2023 1:00:22 PM
Subject [Backendless Support] [UI Builder] Getting individual HTML files from a project
