Upgrade to bootstrap v5

Core Development Feature Requests
1

I know that Node-red purpose a lot of inputs elements (input, list, select, tabs, etc...) to put into the node interface form. These settings node interface could be more effective with other components, like collapsing, dropdown, progress bar.

I've seen a lot of parts of bootstrap 2 and 3 into the source code. Is it possible to upgrade to bootstrap 5 in order to improve user experience?
I could be more easier to develop nodes with these bootstrap components.

If you're agree with that I'm be able to put a PR with this kind of feature.

2 Likes
2

Node-RED hasn't used bootstrap for a very long time. I've just searched through the code base, just to check I'm not forgetting anything, and I don't find any forgotten trace of it.

Where are you seeing references to bootstrap?

3

this part is an extract of bootstrap 2.3 ?

4

I can see some old V2 boostrap classes (like row-fluid and input-append) in forms.scss but if you search the node-red core, they are not used.

Possibly left overs?

5

Do you will provide in the future any other elements from other framework?

6

We have no plans to introduce other UI frameworks.

Are there particular things you're looking for?

7

I'm please to use material UI normally but actually I'll need component like accordion because I have a lot of settings group by block.

An other component that we be great to have is a inteligent table like data-grid or something indentical in any framework.

Create each component will be a huge work and need to be maintain.
However add a UI framework for any node developers could help.

I could suggest to test an implementation of integration and makes some pretty node form to introduce what I am thinking about.

8

I think that you are really referring to Dashboard aren't you? Rather than Node-RED itself?

Dashboard is an add-on to Node-RED. Node-RED itself doesn't really need such components because it isn't a dashboard.

1 Like
9

No I'm not referring to dashboards. I'm talk about node settings that extract industrial data.

These nodes have a lot of settings. To maintain the Node-red User experience I'll need these extra components to classifies and collapse the rigth setting and It's why I'm asking you about it.

10

The Editor settings panel for nodes already has jQuery and (I think) jQuery UI available and extensive CSS. They also have a number of dedicated controls. You can already do a lot therefore. Including collapsible sections, tabs and more. Bootstrap would be overkill I think and would add unnecessary bloat.

11

Ok I'll try with Jquery UI (if it's available) but the list of available component are limited but should cover my needs for now.

12

It is, of course, possible to load others yourself because you have a full html file to work with but everything you add makes the Editor heavier to load. Not necessarily an issue but worth remembering.

13

So It's seems to work for now. Thx for your help.

14

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