CRUD
- Usage
- Styling
- Columns
- Editor
- Grid Replacement
- Toolbar
- Sorting & Filtering
- Item Initialization
- Localization
- Related Components
|
Note
|
Commercial Feature
A commercial Vaadin subscription is required to use CRUD in your project. |
CRUD is a component for managing a dataset. It allows for easy displaying, editing, creating, and deleting of items.
new tab
crud = new Crud<>(Person.class, createEditor());
setupGrid();
setupDataProvider();
add(crud);Columns
CRUD automatically generates columns for each field in the provided dataset. You can add columns with it and configure or remove existing ones.
new tab
crud = new Crud<>(Person.class, createEditor());
setupGrid();
setupDataProvider();
add(crud);
// Only show these columns (all columns shown by default):
List<String> visibleColumns = Arrays.asList(FIRST_NAME, EMAIL,
PROFESSION, BIRTHDAY, EDIT_COLUMN);
grid.getColumns().forEach(column -> {
String key = column.getKey();
if (!visibleColumns.contains(key)) {
grid.removeColumn(column);
}
});Editor
Data is edited using CRUD’s editor UI. By default, the editor is opened by clicking the edit Button in the last column. However, this button column can be removed if you want to provide an alternative way to engage the editor. For example, you set it to open using a double-click like so:
new tab
Grid<Person> grid = crud.getGrid();
// Remove edit column
Crud.removeEditColumn(grid);
// grid.removeColumnByKey(EDIT_COLUMN);
// grid.removeColumn(grid.getColumnByKey(EDIT_COLUMN));
// Open editor on double click
grid.addItemDoubleClickListener(event -> crud.edit(event.getItem(),
Crud.EditMode.EXISTING_ITEM));Editor Position
The editor can be positioned in an overlay, on the side or at the bottom.
Overlay
The overlay position renders the editor in a modal overlay. This is the default position. Overlays aren’t constrained to the CRUD’s size. This makes them ideal for complex forms. However, they do block the user from viewing and interacting with the Grid beneath.
Aside
The aside position displays the editor as an overlay next to the grid. Use this position when there is sufficient horizontal space to accommodate both the grid and the editor. Also, use it when it’s beneficial for the user to be able to view and interact with the grid while the editor is open. Aside positioning is also a good fit for single-column forms.
|
Note
|
Grid Width
The opening and closing of an aside editor affect the grid’s width. Fixed-width columns are recommended to prevent them from resizing each time.
|
Bottom
The bottom position can be useful when the user needs to see as many columns in the grid as possible while editing, when horizontal space is limited, or when a wider editor form is desired.
When using a bottom-positioned editor, make sure there’s enough vertical space to fit comfortably both the grid and the editor. Incidentally, a bottom-positioned editor is generally an inappropriate option for longer forms.
|
Note
|
Small Viewports
On small viewports like mobile phones, the editor always opens as a full-screen overlay, regardless of this configuration.
|
Editor Content
The editor’s content is fully configurable, except for the header and footer.
new tab
crud = new Crud<>(Person.class, createEditor());
...
private CrudEditor<Person> createEditor() {
TextField firstName = new TextField("First name");
TextField lastName = new TextField("Last name");
EmailField email = new EmailField("Email");
ComboBox<String> profession = new ComboBox<>("Profession");
profession.setItems(professions);
FormLayout form = new FormLayout(firstName, lastName, email,
profession);
form.setColspan(email, 2);
form.setColspan(profession, 2);
form.setMaxWidth("480px");
form.setResponsiveSteps(new FormLayout.ResponsiveStep("0", 1),
new FormLayout.ResponsiveStep("30em", 2));
Binder<Person> binder = new Binder<>(Person.class);
binder.forField(firstName).asRequired().bind(Person::getFirstName,
Person::setFirstName);
binder.forField(lastName).asRequired().bind(Person::getLastName,
Person::setLastName);
binder.forField(email).asRequired().bind(Person::getEmail,
Person::setEmail);
binder.forField(profession).asRequired().bind(Person::getProfession,
Person::setProfession);
return new BinderCrudEditor<>(binder, form);
}Editor Actions
The editor contains three Buttons: Delete, Cancel, and Save. The Delete shows a confirmation dialog asking the user to verify whether they wish to delete the item. Whereas the Cancel closes the editor unless there are unsaved changes. If so, a confirmation dialog is shown and the user can either discard the changes or go back to editing. The Save button, when clicked, saves the changes and closes the editor. This is disabled until a change is made.
Grid Replacement
CRUD’s default Grid is replaceable, which is useful when you wish to customize the Grid. An example of this might be if you want to place the edit Button in the first column, or to apply tooltips. See Grid documentation for details on configuring grids.
new tab
crud = new Crud<>(Person.class, createGrid(), createEditor());
...
private Grid<Person> createGrid() {
Grid<Person> grid = new Grid<>();
Crud.addEditColumn(grid);
grid.addColumn(Person::getFirstName).setHeader("First name");
grid.addColumn(Person::getLastName).setHeader("Last name");
grid.addColumn(Person::getEmail).setHeader("Email");
grid.addColumn(Person::getProfession).setHeader("Profession");
return grid;
}|
Note
|
Edit Column
You need to add explicitly an edit column to the replacement Grid to be able to edit items. Additionally, Grid doesn’t have sorting and filtering enabled by default.
|
Toolbar
Creating new items is done via the “New Item” Button in CRUD’s toolbar. Both the toolbar and its Button are customizable. For example, you can use the toolbar to display statistics such as the size of the dataset or the number of search results.
new tab
Html total = new Html("<span>Total: <b>" + dataProvider.DATABASE.size()
+ "</b> employees</span>");
Button button = new Button("New employee", VaadinIcon.PLUS.create());
button.addClickListener(event -> {
crud.edit(new Person(), Crud.EditMode.NEW_ITEM);
});
button.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
crud.setNewButton(button);
HorizontalLayout toolbar = new HorizontalLayout(total);
toolbar.setAlignItems(FlexComponent.Alignment.CENTER);
toolbar.setFlexGrow(1, toolbar);
toolbar.setSpacing(false);
crud.setToolbar(toolbar);Sorting & Filtering
By default, CRUD allows sorting and filtering of any column. For more information about sorting and filtering, see the Grid documentation.
Disabling Sorting & Filtering
Sorting and filtering can be disabled.
new tab
crud = new Crud<>(Person.class, createGrid(), createEditor());
...
private CrudGrid<Person> createGrid() {
// Create a new CrudGrid to disable filtering (last boolean parameter)
CrudGrid<Person> grid = new CrudGrid<>(Person.class, false);
// Disable sorting
grid.setSortableColumns();
...
return grid;
}Item Initialization
Newly created items can be initialized with data.
new tab
crud = new Crud<>(Person.class, createEditor());
crud.addNewListener(event -> {
Person person = event.getItem();
person.setEmail("@vaadin.com");
person.setProfession("Developer");
crud.getEditor().setItem(person);
});Localization
CRUD supports full localization through customizable labels for its buttons and the title of the editor.
new tab
CrudI18n i18n = CrudI18n.createDefault();
i18n.setNewItem("Luo uusi");
i18n.setEditItem("Muuta tietoja");
i18n.setSaveItem("Tallenna");
i18n.setCancel("Peruuta");
i18n.setDeleteItem("Poista...");
i18n.setEditLabel("Muokkaa");
CrudI18n.Confirmations.Confirmation delete = i18n.getConfirm()
.getDelete();
delete.setTitle("Poista kohde");
delete.setContent(
"Haluatko varmasti poistaa tämän kohteen? Poistoa ei voi perua.");
delete.getButton().setConfirm("Poista");
delete.getButton().setDismiss("Peruuta");
CrudI18n.Confirmations.Confirmation cancel = i18n.getConfirm()
.getCancel();
cancel.setTitle("Hylkää muutokset");
cancel.setContent("Kohteessa on tallentamattomia muutoksia.");
cancel.getButton().setConfirm("Hylkää");
cancel.getButton().setDismiss("Peruuta");
crud.setI18n(i18n);