Step 1: For simplifying the backend integration, go to your project, settings tab and set the static folder, The folder where you place the CSS & JS files. If you use a template engine, you might need to set a code wrapper to avoid conflicts.
Step 2: On the Production Code Replacements tab, you can auto replace parts of code that you need to do to connect the UI to your backend. An example here for python how we receive the items list data in the template.
Step 3: Two other examples are replacing the header and the footer, so every time you download the templates, you will not have to do it manually. This is done once per project.
Step 4: On each table, set the Backend URL, to what page, view, or URL the post request should go.
Step 5: On the templates page, click on the download button next to your template.
Step 6: Unzip the downloaded folder.
Step 7: Copy JS & CSS files from the downloaded UI to your project's static folder.
Step 8: If the project settings are set to use download files not CDNs, there will be extra files to add to your static folder.
Step 9: Copy the HTML file to your template folder.
Step 10: If you open the HTML file, you will notice the code you added to the project’s production code replacement.
Step 11: In your backend code, you need to pass the database data to the template when receiving a get request, here is an example how pass the database records as a variable called “items”.
Step 12: The template will be sending post requests, here is an example code of how we receive the request and execute the SQL statements for CRUD operations, remember to do your backend validation.
