Skip to content

UIs

With the 'UIs' section you will be able to specify each user interface project/application that should be included in solution.

NOTE: Each UI project includes the base configuration to operate with Beatrix generated backend, and also all structures binded to the UI at Model YAML, providing a solid base ready to be extended.

Diagrams

The generated frontend projects for type 'Crud', including its pieces, can be demonstrated as follows:

UI Diagram - Crud List

This diagram represents the structure of a UI project including a UI Structure of type 'Crud'. All UI projects includes a 'Menu' (Sidebar + Topbar) as configured in the business Model, and the UI Structures linked to this menu are served from a library (Component-Features Library).

These feature-components can be used across multiple UI projects and even extended in case of need. So the UIStructure represents a set of components which are created inside a feature-components library, and the UIService represents a service class which is created inside a domain-services library.

Fields

A ui contains the following fields to be defined:

Name

The name of project/application to be created. Used for Front-End project name and also for related BFF project.

Requirements Rules:

  • Is Required;
  • Must not be a Reserved Keyword;
  • Must start with a letter;
  • Must contains only letters, numbers and the underline char ('_');
  • Max length of 50 chars;
  • Must be exclusive between other Ui's or Service's or even Ui Routes

Example: 

1
2
UIs:
- Name: My_First_UI

Route

The route on which the front-end application is served.

Requirements Rules:

  • Is Required;
  • Must be a valid url part (Only letters, numbers, underline (_) and trace (-));
  • Max length of 50 chars;
  • Must not be used at others Ui's or Service's or even as Ui Names

Example: 

1
2
3
UIs:
- Name: My_First_UI
  Route: my_first_ui

The list of menu items to be rendered as main application menu.

Requirements Rules:

  • Is Required;
  • Each menu on list must follows rules as specified in Menu

Example: 

1
2
3
4
5
6
7
8
UIs:
- Name: My_First_UI
  Route: my_first_ui
  Menus:
  - Path: my_first_path
  ...
  - Path: my_second_path
  ...

Complete Example

See below for a complete example, containing all the properties for the Ui section.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
UIs:
# First UI sample
- Name: My_First_UI
  Route: my_first_ui
  Menus:
  - Path: my_first_path
    Label: My first menu
    Description: First menu option included at my first UI
    UiStructure: my_crud_ui_structure
    RouteGroups:
    - Type: List
      Label: Crud list structure
      Roles: ['admin','user']
    - Type: Edit
      Label: Edit list structure
      Roles: ['admin']
  - Path: my_second_path
  ...

# Second UI
- Name: My_Second_UI
  Route: my_second_ui
  Menus:
  - Path: my_first_path
  ...
  - Path: my_second_path
  ...
Back to top