How to setup new layout/system UI for items?

I’m running OpenHab 3.4 on Ubuntu for sometime, and have been using Sitemaps UI on Browser and Android to control and view all my items.
I did attempt to convert a while back but got a bit frustrated about the best way to setup.
is there a step-by-step method to create a modern UI layout?
and I assume this is a better than Sitemaps.

Better is a manner of opinion. It depends on what you are after in your UI.

Not really a step-by-step because everyone’s steps are different. But the Getting Started Tutorial walks though creating the semantic model with your items, shows how that is used to populate the Overview page tabs, and the basics of how to customize that through custom widgets. It also shows a bit how to create a page with custom widgets.

Under the UI section in the docs there is a bunch of reference information for how to use, customize, and create custom widgets.

Finally, why create when you can just install? There are a ton of widgets you can install like an add-on available on the marketplace.

Without more information about what you want it’s hard to show more than just generalities.

As a general approach, building a solid semantic model, defining and using some custom list item widgets too use, and adding a few of the most commonly accessed controls to the Overview tab of the Overview page results in a pretty great UI with relatively little effort.

thanks for the reply I was only going off the sitemap doc which seems to indicate MainUI is better to start for beginners .
it if the new UI is more flexible and is going to be supported in the longer term I should start.

When you use MainUI and put your items into a semantic model, the Locations, Equipment and Properties tabs of the overview page get generated automatically. From a beginner’s perspective doing nothing is easier than doing something I would guess. MainUI also has an extensive and growing library of widgets you can install and use meaning you can get quite complex and capable widgets without looking at a line of code.

Only when you want to customize or create a widget that doesn’t already exist do you need to start messing with looking at code and things get complex.