Skip to content

UIStructures

With the 'UIStructures' section, you will be able to build pre-defined ui structures. A UiStructure represents a set of interoperable components, whose can be used to build visual interfaces. Each UIStructure results in a set of reusable UI components as pieces of the features-component library.

Fields

A uistructure contains the following fields to be defined:

Name

The name/identifier of uistructure, which can be used to reference this element at business model (e.g.: Menu), and is used by Beatrix engine to compose the class and file names of component set.

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

Example: 

1
2
UIStructures:
- Name: My_First_UIStructure

Note:

This sample uistructure for type 'Crud' will result in a component set and folders in feature-library as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
my-First-UIStructure // lib. main folder
|-- my-First-UIStructure-list
|   |-- my-First-UIStructure-list-container
|   |   |-- ...component files
|   |-- my-First-UIStructure-filter
|   |   |-- ...component files
|   |-- my-First-UIStructure-grid
|       |-- ...component files
|-- my-First-UIStructure-edit
    |-- my-First-UIStructure-edit-container
    |   |-- ...component files
    |-- my-First-UIStructure-form
        |-- ...component files

Entity

The name of business entity linked to this uistructure.

Requirements Rules:

  • Is Required;
  • The name must exist in Entities list in the current model;
    • See Entity section for more details.

Example: 

1
2
3
UIStructures:
- Name: My_First_UIStructure
  Entity: My_Entity

Type

The type of UiStructure to be built.

Possible types are:

  • Crud: Creates a set of components composed by:

    • List Structure (Container component + Filter component + Grid component);
    • Edit Structure (Container component + Edit form component);

  • Chart: Creates a chart component composed by:

    • Chart Structure (Container component);

  • Dashboard: Creates a dashboard component composed by:

    • Dashboard Structure (Container component);

Requirements Rules:

  • Is Required;
  • Must be an Allowed valid type, according to the types informed above

Example: 

1
2
3
4
UIStructures:
- Name: My_First_UIStructure
  Entity: My_Entity
  Type: Crud

Service

The name of business uiservice linked to this uistructure.

Requirements Rules:

  • Is Required;
  • The name must exist in UIServices list in the current model;
  • The name of Entity used in this UIStructure must match with the Entity name referenced at UIService;

Example: 

1
2
3
4
5
UIStructures:
- Name: My_First_UIStructure
  Entity: My_Entity
  Type: Crud
  Service: My_UIService

CrudParams

The params to build Crud components for UiStructure. Required to configure Crud type UiStructure.

Requirements Rules:

  • Must be filled out only for the Crud type;
  • Each item on list must follows rules as specified in CrudParams

Example: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
UIStructures:
- Name: My_First_UIStructure
  Entity: My_Entity
  Type: Crud
  Service: My_UIService
  CrudParams:
    Controls:
    ...
    Filter:
    ...
    Grid:
    ...
    EditForm:
    ...

ChartParams

The params to build Chart components for UiStructure. Required to configure Chart type UiStructure.

Requirements Rules:

  • Must be filled out only for the Chart type;
  • Each item on list must follows rules as specified in ChartParams

Example: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
UIStructures:
- Name: My_First_UIStructure
  Entity: My_Entity
  Type: Chart
  Service: My_UIService
  ChartParams:
    Title:
    ...
    Series:
    ...

DashboardParams

The params to build Dashboard components for UiStructure. Required to configure Dashboard type UiStructure.

Requirements Rules:

  • Must be filled out only for the Dashboard type;
  • Each item on list must follows rules as specified in DashboardParams

Example: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
UIStructures:
- Name: My_First_UIStructure
  Entity: My_Entity
  Type: Crud
  Service: My_UIService
  DashboardParams:
    Title:
    ...
    Kpis:
    ...

Complete Example

See below for a complete example for Crud type, 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
UIStructures:
- Name: My_Crud_UIStructure
  Entity: My_Entity_1
  Type: Crud
  Service: My_Entity_1_UIService
  CrudParams:
    Controls:
    - Property: Name
      Label: My name
      Hint: Inform a valid name
      Placeholder: Sample name
      Type: text
    - Property: BirthDate
      Label: Birth Date
      Type: date

    Filter:
      FormControls: [Name, BirthDate]
      SubmitButtonLabel: 'Search by name'
      SubmitButtonStyle: accent
      AsAdditionalFields: [BirthDate]

    Grid:
      QueryOrderFields:
      - Property: Id
        Type: asc
      QueryRegistersLimit: 30
      PageSizes: [5, 10, 15]
      Fields:
      - Property: Id
        Title: '#Id'
        IsOrdered: false
      - Property: Name
        Title: My name
      - Property: BirthDate
        Title: Birth date

    EditForm:
      FormControls: [Name, BirthDate]
      SubmitButtonLabel: Save register
      SubmitButtonStyle: primary
      Validations:
      - My_Entity_1_Validation

- Name: My_Chart_UIStructure
  Entity: My_Entity_1
  Type: Chart
  Service: My_Entity_1_UIService
  ChartParams:
    Title: Data Items Kpi
    Description: Items per status
    RenderAsSpark: false
    Series:
    - PropertyName: Id
      Operator: Count
      Label: Total
      Type: donut
      AggregatePropertyName: My_Prop_StatusId
      AggregatePropertyLabel: My_Status_Entity.Name

- Name: My_Dashboard_UIStructure
  Entity: My_Entity_1
  Type: Dashboard
  Service: My_Entity_1_UIService
  DashboardParams:
    Title: Main Dashboard
    Kpis: [My_Chart_UIStructure]
Back to top