Customizing the user interface
The user interface of Hubleto has three layers. Knowing which layer you need to touch saves a lot of time.
| Layer | Technology | Customize it with | Page |
|---|---|---|---|
| The page shell (desktop, sidebar) | Twig + PHP | Controllers, views, renderSecondSidebar(), configuration |
View, Sidebar |
| Tables, forms and inputs | React (@hubleto/react-ui) |
The model's describe*() methods, components in Loader.tsx |
Component, Forms, Special inputs |
| Look and feel | Tailwind CSS themes | The theme setting, Main.twcss |
Skin |
Layers of the UI.
Start with the model. Most of what you see in a table or a form (columns, titles, filters, required fields, default values, which input is used) is defined by describeColumns(), describeTable() and describeForm() and needs no React code. See the Description API.
Pages
- Component — your own React component and how it gets into the page
- Forms — props, tabs and buttons of a form,
FormCustomizer - Special inputs — built-in inputs and your own input component
- View — Twig views and where they are looked up
- Customizing the sidebar — groups, order and the second sidebar
- Skin — themes, dark mode and Tailwind
- Custom document and invoice templates
- Third-party React libraries