Use a template engine in uibuilder

Dashboard
1

Hello
is there a way to use a for example a main.html which is the "base" of every webpage. And inside the main.html you can include other html templates, for example a navbar which is on every page the same.

I previously used CodeIgniter to build a webpage and there you can use things like

<?= $this->include('templates/navbar')?>
<?= $this->renderSection('content') ?>
<?= $this->include('templates/footer')?>

in your main.html

Instead of the includes the navbar.html or footer.html gets loaded and instead of renderSecton('content') the actual webpage gets loaded. In the html-file for the actual webpage there are the following lines

<?= $this->extend('layouts/main')?>
<?= $this->section('content')?>
<!-- Here come the HTML Code of the actual webpage -->
<?= $this->endSection()?>

So all the HTML of the actual webpage gets embedded into the main.html.
I hope it is understandable what I mean, and I would be really glad if there would be a possibility to do this with uibuilder.

2

Do you specifically want this templating engine you speak of or just the ability to use and reuse portions of HTML?

I ask because Vue (which is the default) works kinda like this.

In Vue you write components and include them wherever you need them.

3

I only want the ability to reuse HTML code.
Currently I try to figure out how to use components in Vue.

Thx for your anwser!

4

You absolutely can do this since uibuilder simply uses standard web code.

Normally though, the way to do this is to have a "build" step using a 3rd-party tool such as webpack or snowpack. You can use this in uibuilder and there is information on the WIKI. You will also find some more information in the online version of the technical docs.

One thing that isn't yet available in uibuilder (though it is on the backlog) is to have a button in the Editor that lets you run your build step. Also, the majority of build tools have a development server to help speed up incremental development (hot reloading), most of these do not work with Node-RED. The only one I've discovered so far is the one included with the Svelte framework. Svelte is a great framework to use if you know web development and want high performance code.

5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.