Auto generated CRUD UI - cuba-platform/sample-workshop GitHub Wiki

Under CRUD or standard UI we understand screens that allow you to browse the list of records (browser) and create/edit one record (editor).

4.1 SparePart CRUD UI

Now let’s create the standard browser and editor screens for the SparePart entity.

Open the DATA MODEL section of the left-hand side navigation panel and select the SparePart entity
Click New
Click Generic UI screen

Create screens for SparePart CRUD

GENERIC UI TEMPLATES screen appears. It allows you to specify where to place the screens in the project, what menu item to be used to access the browser screen, should it be a single combined screen for all operations or two separate screens to read the list and create, update and delete an instance.
Select Entity browser, keep the default values and click Create.
Select Entity editor, keep the default values and click Create.

Standard screens for SparePart CRUD

The studio has generated separate screens: browser and editor. You can pick one of them and click Edit in the GENERIC UI section of the navigation panel. Screen designer has WYSIWYG editor, XML and Controller tab to be able to see screen declaration and its Java controller.

Standard screens for SparePart CRUD

Visual components that tightly work with data (tables, dropdowns, etc) are data-aware and connect to the database through datasources. Taking SparePart browser as an example, let’s have a look at data binding. Select the sparepart-browse.xml screen, click Edit and open the Datasources tab. Datasources use standard JPQL queries to load data. In our example the result list of this query will be automatically shown in the main table of the screen, as sparePartsDs is set to the datasoure property of the table.

SparePart Datasources tab

Then let’s generate the screens for the Client entity.

Open the DATA MODEL section of the navigation panel and select the Client entity
Click New -> Generic UI screen
Select Entity browser, keep the default values and click Create.
Select Entity editor, keep the default values and click Create.

Client CRUD UI

Similarly, let’s generate the screens for Mechanic.

Open the DATA MODEL section of the navigation panel and select the Mechanic entity
Click New -> Generic UI screen
Mechanic differs from the entities we have just created UI for. It has relation to the system User entity, which is used in CUBA for security reasons. So, our datasource should load the user field along with the simple fields of the mechanic entity. For that purpose CUBA uses views - an XML description of what entity attributes should be loaded from the database. Click the plus button to create a new view and the View designer screen will appear

Mechanic CRUD UI

Studio has automatically generated the Name: mechanic-view, keep it as we will use it for both browser and editor
Our view extends the _local one, which is the system view that includes all the simple (local) attributes. By default all screens use _local view for standard screen generation. It means that references to other entities will not be loaded and shown by default.
Select user attribute and specify the _minimal system view for it; _minimal view includes only attributes, that are specified in the Instance Name of an entity. This view will give us enough information to show an entity in the browser’s table and editor’s field group
Click OK to save the view

Mechanic view

Create Mechanic editor

Now we need to create screens for the Order entity

Open the DATA MODEL section of the navigation panel and select the Order entity
Click New -> Generic UI screen
Similarly to what we did for the Mechanic entity, click the plus button to create an extended view for the Order entity
Keep the name order-view
Select client and mechanic attributes and specify the _minimal view for both of them
Select the parts attribute, which contains a collection of the SpareParts instances. Adding parts to an order we would like to see only title and description attributes, so tick them
Click OK

Order UI