Using external theme with Cuba

Is it possible to implement a completely different set of UI’s with existing Entity and related artifcats generated by Cuba? For instance, if there is possibility to use Metrnoic or other popular HTML5 Responsive themes in Cuba platform when it comes to UI implementation or does it have to always be the same UI layer which is generated by Cuba.

Specially my concern is on the Menu and Navigation around the application. If I look it from End user experience I would like to make it more rich and easy to handle from end user perspective when it comes to Large enterprise applicaitons where you have 100 of menus, sub-menus and grouping of those menus as such in dashboard.

For example, have a look at this template http://www.keenthemes.com/preview/metronic/theme/admin_1/
This is quiet user friendly when it comes to applicaiton navigation through menus/sub-menus as applications grows over time and become tough for end user during navigation having only Horizontal or Vertical menu as the option.

Could it be possible to have a mix of both horizontal & vertical menus? Or something like a dashboard which groups all operations related to some master entity as icons and from there it takes to applicaiton section where it have it’s own menus like a portal with multiple sites integrated together?

1 Like

Hi,
you can’t use third-party CSS themes (e.g. Twitter Bootstrap) for standard CUBA Web UI since CUBA components have its own HTML layout and CSS class names and you can’t change a layout of a component without rework of its code. For now, you can either create CSS theme from scratch or adapt one of existing themes of Vaadin framework. You can find a tutorial on creating custom themes based on Halo theme here: [url=https://doc.cuba-platform.com/manual-6.1/web_theme_extension.html]https://doc.cuba-platform.com/manual-6.1/web_theme_extension.html[/url].

If you want to create completely different UI for an application based on CUBA you can use features of the Portal module aimed to create custom websites for CUBA applications. In this case, you have to create UI of the application from scratch and CUBA Studio can’t create screens for this application. An example of this approach is described in this article: [url=https://www.road-to-cuba-and-beyond.com/custom-frontends-for-your-cuba-app/]https://www.road-to-cuba-and-beyond.com/custom-frontends-for-your-cuba-app/[/url]. Moreover, you can use CUBA REST-API to build an application on JavaScript that will be able to use entities, services and data from the main system. [url=https://doc.cuba-platform.com/manual-6.1/rest_api.html]https://doc.cuba-platform.com/manual-6.1/rest_api.html[/url]

Vertical menus are not yet implemented in CUBA, but you can use buttons and Accordion component stylized with CSS. Demo of Accordion you can find here: [url=https://demo.cuba-platform.com/sampler/open?screen=simple-accordion]https://demo.cuba-platform.com/sampler/open?screen=simple-accordion[/url].

To simplify navigation of an application you can customize Main screen using CUBA Studio as described here: [url=https://doc.cuba-platform.com/manual-6.1/main_window_layout.html]https://doc.cuba-platform.com/manual-6.1/main_window_layout.html[/url]. An example of such a custom Dashboard you can see in a demo application Taxi Company Dashboard: [url=https://demo.cuba-platform.com/dashboard/]https://demo.cuba-platform.com/dashboard/[/url].

Hope this will help you choose the proper way to build your application.