Add-on Directory

← Back

Crud UI Add-on

Automatically generate Create, Read, Update, and Delete (CRUD) UIs with grids and forms for your entities/beans/POJOs at runtime

Author

Contributors

Rating

Popularity

<100

Published on Vaadin  Directory Stars on Vaadin Directory Latest version on vaadin.com/directory

For questions on usage, please use the forum.

Crud UI Add-on provides an API to automatically generate CRUD-like UIs with grids and forms for any Java Bean at runtime.

The API is defined through 4 interfaces and their implementations:

  • Crud: A Vaadin UI component that can be added to any ComponentContainer. This is the actual CRUD final users will see in the browser. Implementations:

    • GridCrud: A CRUD UI based on Vaadin's standard Grid component.
    • TreeGridCrud: A CRUD UI based on Vaadin's standard TreeGrid component.
  • CrudLayout: Defines CRUD layouts and related behaviors. Implementations:

    • WindowBasedCrudLayout: Shows forms in pop-up windows.
    • HorizontalSplitCrudLayout: Grid on the left, form on the right in a split layout.
    • VerticalSplitCrudLayout: Grid on the top, form on the bottom in a draggable split layout.
    • VerticalCrudLayout: Grid on the top, form on the bottom in a vertical layout (no draggable split).
  • CrudFormFactory: Builds required UI forms for new, update, delete operations. Implementations:

    • DefaultCrudFormFactory: Java Reflection-based autogenerated UI forms customizable through FieldProvider implementations.
  • CrudListener: Connects the CRUD to your backend operations. You must implement this interface or call the equivalent methods defined in the Crud interface.

Basic usage

Let's say, you have the following domain/entity/Java Bean class:

public class User {

    private Long id;
    private String name;
    private Date birthDate;
    private String email;
    private String password;

    ... getters & setters ...
}

You can create a new CRUD component and add it into any Vaadin layout as follows:

GridCrud<User> crud = new GridCrud<>(User.class);
someLayout.addComponent(crud);

Then use lambda expressions or method references to delegate CRUD operations to your backend implemented for example with JPA/Hibernate, Spring Data, MyBatis, and others:

crud.setFindAllOperation(() -> backend.findAll());
crud.setAddOperation(backend::add);
crud.setUpdateOperation(backend::update);
crud.setDeleteOperation(backend::delete);

Advanced usage

You can enable Java Bean Validation as follows (don't forget to add the corresponding Java Validation API dependency to your project):

crud.getCrudFormFactory().setUseBeanValidation(true);

As an alternative to method references and lambda expressions, you can implement the CrudListener interface to connect the CRUD UI to your backend:

crud.setCrudListener(new CrudListener<User>() {

    @Override
    public Collection<User> findAll() {
        return backend.findAllUsers();
    }

    @Override
    public User add(User user) {
        return backend.add(user);
    }

    @Override
    public User update(User user) {
        return backend.update(user);
    }

    @Override
    public void delete(User user) {
        backend.remove(user);
    }
});

To enable lazy loading implement LazyCrudListener and use the Vaadin's DataProvider interface:

crud.setCrudListener(new LazyCrudListener<>() {
	@Override
	public DataProvider<User, Void> getDataProvider() {
		return DataProvider.fromCallbacks(
			query -> userService.findAll(query.getPage(), query.getPageSize()).stream(),
			query -> (int) userService.countAll()
		);
	}

	... other CRUD methods ...

});

Customization

To change the general layout, use an alternative CrudLayout implementation (defaults to WindowBasedCrudLayout):

GridCrud<User> crud = new GridCrud<>(User.class, new HorizontalSplitCrudLayout());

To configure form behavior or override related functionality, define a CrudFormFactory:

CustomCrudFormFactory<User> formFactory = new CustomCrudFormFactory<>(User.class);
crud.setCrudFormFactory(formFactory);

To configure form fields visibility:

formFactory.setVisibleProperties(CrudOperation.READ, "name", "birthDate", "email", "groups", "mainGroup", "active");
formFactory.setVisibleProperties(CrudOperation.ADD, "name", "birthDate", "email", "password", "groups", "mainGroup", "active");
formFactory.setVisibleProperties(CrudOperation.UPDATE, "name", "birthDate", "email", "groups", "mainGroup", "active");
formFactory.setVisibleProperties(CrudOperation.DELETE, "name", "email");

To configure field captions in the same order as you defined the set of visible properties:

formFactory.setFieldCaptions("The name", "The birthdate", "The e-mail");

To add columns as nested properties in the Crud component of GridCrud instances:

crud.getGrid().addColumn(user -> user.getMainGroup().getName()).setHeader("Main group").setKey("key");

To configure the type of UI component to use for a specific field:

formFactory.setFieldType("password", PasswordField.class);

To further customize fields after their creation:

formFactory.setFieldCreationListener("birthDate", field -> ... your own logic here ...);

To manually create input fields, define a FieldProvider:

formFactory.setFieldProvider("groups", user -> {
    CheckboxGroup<Group> checkboxes = new CheckboxGroup<>();
    checkboxes.setItems(groups);
    checkboxes.setItemLabelGenerator(Group::getName);
    return checkboxes;
});

Or use an included or custom FieldProvider implementation:

formFactory.setFieldProvider("groups",
        new CheckBoxGroupProvider<>("Groups", GroupRepository.findAll(), Group::getName));

To set a Converter:

formFactory.setConverter("salary", new Converter<String, BigDecimal>() {
    @Override
    public Result<BigDecimal> convertToModel(String value, ValueContext valueContext) {
        return Result.ok(new BigDecimal(value)); // error handling omitted
    }

    @Override
    public String convertToPresentation(BigDecimal value, ValueContext valueContext) {
        return value.toPlainString();
    }
});

To customize button captions:

formFactory.setButtonCaption(CrudOperation.ADD, "Add new user");
crud.setRowCountCaption("%d user(s) found");

To customize form titles:

crud.getCrudFormFactory().setCaption(CrudOperation.ADD, "Create new User");
crud.getCrudFormFactory().setCaption(CrudOperation.UPDATE, "Modify User");

Discussion

Open Vaadin Forum

Give feedback, share tips and ask questions.

Total 0 posts

Crud UI Add-on - Vaadin Add-on Directory

Automatically generate Create, Read, Update, and Delete (CRUD) UIs with grids and forms for your entities/beans/POJOs at runtime Crud UI Add-on - Vaadin Add-on Directory
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/crud-ui-add-on) [![Stars on Vaadin Directory](https://img.shields.io/vaadin-directory/star/crud-ui-add-on.svg)](https://vaadin.com/directory/component/crud-ui-add-on) [![Latest version on vaadin.com/directory](https://img.shields.io/vaadin-directory/v/crud-ui-add-on.svg)](https://img.shields.io/vaadin-directory/v/crud-ui-add-on.svg) _For questions on usage, please [use the forum](https://vaadin.com/forum/t/crud-ui-add-on/156634/1)._ Crud UI Add-on provides an API to automatically generate CRUD-like UIs with grids and forms for any Java Bean at runtime. The API is defined through 4 interfaces and their implementations: * **`Crud`**: A Vaadin UI component that can be added to any `ComponentContainer`. This is the actual CRUD final users will see in the browser. Implementations: * `GridCrud`: A CRUD UI based on Vaadin's standard `Grid` component. * `TreeGridCrud`: A CRUD UI based on Vaadin's standard `TreeGrid` component. * **`CrudLayout`**: Defines CRUD layouts and related behaviors. Implementations: * `WindowBasedCrudLayout`: Shows forms in pop-up windows. * `HorizontalSplitCrudLayout`: Grid on the left, form on the right in a split layout. * `VerticalSplitCrudLayout`: Grid on the top, form on the bottom in a draggable split layout. * `VerticalCrudLayout`: Grid on the top, form on the bottom in a vertical layout (no draggable split). * **`CrudFormFactory`**: Builds required UI forms for new, update, delete operations. Implementations: * `DefaultCrudFormFactory`: Java Reflection-based autogenerated UI forms customizable through `FieldProvider` implementations. * **`CrudListener`**: Connects the CRUD to your backend operations. You must implement this interface or call the equivalent methods defined in the `Crud` interface. # Basic usage Let's say, you have the following domain/entity/Java Bean class: ```java public class User { private Long id; private String name; private Date birthDate; private String email; private String password; ... getters & setters ... } ``` You can create a new CRUD component and add it into any Vaadin layout as follows: ```java GridCrud crud = new GridCrud<>(User.class); someLayout.addComponent(crud); ``` Then use lambda expressions or method references to delegate CRUD operations to your backend implemented for example with JPA/Hibernate, Spring Data, MyBatis, and others: ```java crud.setFindAllOperation(() -> backend.findAll()); crud.setAddOperation(backend::add); crud.setUpdateOperation(backend::update); crud.setDeleteOperation(backend::delete); ``` # Advanced usage You can enable _Java Bean Validation_ as follows (don't forget to add the corresponding Java Validation API dependency to your project): ```java crud.getCrudFormFactory().setUseBeanValidation(true); ``` As an alternative to method references and lambda expressions, you can implement the `CrudListener` interface to connect the CRUD UI to your backend: ```java crud.setCrudListener(new CrudListener() { @Override public Collection findAll() { return backend.findAllUsers(); } @Override public User add(User user) { return backend.add(user); } @Override public User update(User user) { return backend.update(user); } @Override public void delete(User user) { backend.remove(user); } }); ``` To enable lazy loading implement `LazyCrudListener` and use the Vaadin's `DataProvider` interface: ```java crud.setCrudListener(new LazyCrudListener<>() { @Override public DataProvider getDataProvider() { return DataProvider.fromCallbacks( query -> userService.findAll(query.getPage(), query.getPageSize()).stream(), query -> (int) userService.countAll() ); } ... other CRUD methods ... }); ``` # Customization To change the general layout, use an alternative `CrudLayout` implementation (defaults to `WindowBasedCrudLayout`): ```java GridCrud crud = new GridCrud<>(User.class, new HorizontalSplitCrudLayout()); ```` To configure form behavior or override related functionality, define a `CrudFormFactory`: ```java CustomCrudFormFactory formFactory = new CustomCrudFormFactory<>(User.class); crud.setCrudFormFactory(formFactory); ``` To configure form fields visibility: ```java formFactory.setVisibleProperties(CrudOperation.READ, "name", "birthDate", "email", "groups", "mainGroup", "active"); formFactory.setVisibleProperties(CrudOperation.ADD, "name", "birthDate", "email", "password", "groups", "mainGroup", "active"); formFactory.setVisibleProperties(CrudOperation.UPDATE, "name", "birthDate", "email", "groups", "mainGroup", "active"); formFactory.setVisibleProperties(CrudOperation.DELETE, "name", "email"); ```` To configure field captions in the same order as you defined the set of visible properties: ```java formFactory.setFieldCaptions("The name", "The birthdate", "The e-mail"); ``` To add columns as nested properties in the `Crud` component of `GridCrud` instances: ```java crud.getGrid().addColumn(user -> user.getMainGroup().getName()).setHeader("Main group").setKey("key"); ``` To configure the type of UI component to use for a specific field: ```java formFactory.setFieldType("password", PasswordField.class); ``` To further customize fields after their creation: ```java formFactory.setFieldCreationListener("birthDate", field -> ... your own logic here ...); ``` To manually create input fields, define a `FieldProvider`: ```java formFactory.setFieldProvider("groups", user -> { CheckboxGroup checkboxes = new CheckboxGroup<>(); checkboxes.setItems(groups); checkboxes.setItemLabelGenerator(Group::getName); return checkboxes; }); ``` Or use an included or custom `FieldProvider` implementation: ```java formFactory.setFieldProvider("groups", new CheckBoxGroupProvider<>("Groups", GroupRepository.findAll(), Group::getName)); ``` To set a `Converter`: ```java formFactory.setConverter("salary", new Converter() { @Override public Result convertToModel(String value, ValueContext valueContext) { return Result.ok(new BigDecimal(value)); // error handling omitted } @Override public String convertToPresentation(BigDecimal value, ValueContext valueContext) { return value.toPlainString(); } }); ``` To customize button captions: ```java formFactory.setButtonCaption(CrudOperation.ADD, "Add new user"); crud.setRowCountCaption("%d user(s) found"); ``` To customize form titles: ```java crud.getCrudFormFactory().setCaption(CrudOperation.ADD, "Create new User"); crud.getCrudFormFactory().setCaption(CrudOperation.UPDATE, "Modify User"); ```
View on GitHub
Author Homepage
Crud UI Add-on API
Discussion Forum (ask questions here)
Online Demo
Issue tracker

Crud UI Add-on version 1.2
null

Crud UI Add-on version 1.3
null

Crud UI Add-on version 1.4
null

Crud UI Add-on version 1.5
null

Crud UI Add-on version 1.5.1
null

Crud UI Add-on version 1.6.0
null

Crud UI Add-on version 2.0.0
Compiled with Vaadin 8 compatibility packages

Crud UI Add-on version 2.1.0
Upgraded to Vaadin 8.1.4

Crud UI Add-on version 2.1.1
Small fixes and enhancements

Crud UI Add-on version 2.1.2
Several bug fixes and enhancements.

Crud UI Add-on version 2.1.3
Added VerticalSplitCrudLayout implementation.

Crud UI Add-on version 2.1.4
Added VerticalCrudLayout implementation Added Grid.setClickRowToUpdate(boolean) method

Crud UI Add-on version 2.1.5
Fixed cancel button when used with Grid.setClickRowToUpdate(true) Fixed form caption in VerticalCrudLayout

Crud UI Add-on version 2.3.0
Compiled with Vaadin Framework 8.2.0 (fixes NoSuchMethodError: com.vaadin.ui.Notification.show(Ljava/lang/String;)V)

Crud UI Add-on version 3.0
Added Vaadin 10 support. Thanks to Johannes Häyry for the contributions.

Crud UI Add-on version 3.1
Bug fixes.

Crud UI Add-on version 3.1.0

Crud UI Add-on version 3.2.0
Added lazy loading support

Crud UI Add-on version 3.3.0

Crud UI Add-on version 3.4.0
Fixed NPE. Added Renderer support in FieldProviders. Changed from Grid-based CheckBoxProvider to CheckboxGroup from Directory

Crud UI Add-on version 3.5.0
Added OffsetBasedPageRequest for Spring Data.

Crud UI Add-on version 3.6.0
Updated checkbox-group-java (which fixes a bug related to the slf4j-simple dependency).

Crud UI Add-on version 3.7.0

Crud UI Add-on version 3.7.1
Fixed strange bug when hiding forms. Fixed VerticalCrudLayout.

Crud UI Add-on version 2.3.1
Updated to Vaadin 8.6.4

Crud UI Add-on version 3.7.2
External notifications in GridCrud.

Crud UI Add-on version 3.7.3
Fixed #44 Needless scrollbars appear (w/ fix)

Crud UI Add-on version 3.8.0
Updated to Vaadin 13.0.1. Use vaadin-core dependency. Use Vaadin Flow's CheckboxGroup. Allow domain-object specific captions using CrudFormFactory.

Crud UI Add-on version 3.8.1
Allow setting values in FieldCreationListeners

Crud UI Add-on version 3.9.0

Crud UI Add-on version 4.0.0
- Updated to Vaadin 14.0.2 - Fixes #34 Method to set a Converter for a specific field

Crud UI Add-on version 4.0.1
Fixes #56 flow-build-info.json shoudn't be included in JAR

Crud UI Add-on version 4.1.0
* The Grid component in is no longer size full. * OffsetBasedPageRequest now uses Vaadin's QuerySortOrder (Spring Data).

Crud UI Add-on version 4.2.0
Loosen generic to allow use of TreeDataProvider Bumps up Vaadin version 14.1.25

Crud UI Add-on version 4.3.0
Fixes #67 this.domainType.newInstance(); Does not work with no public constructor.

Crud UI Add-on version 4.3.1
Fixes #59 Custom converter is not working in CrudFormFactory

Crud UI Add-on version 4.3.2
* Fixes #72 setFindAllOperationVisible always sets visibility to false, ignoring the passed value * Uses serializable versions of Producer and Consumer

Crud UI Add-on version 4.4.0
Updates to Vaadin 14.5.3 Fixes #82 Exceptions in CRUD operations show success message

Crud UI Add-on version 4.4.1
Fixes #92 Issue with dialog buttons in some use cases

Crud UI Add-on version 4.5.0
Updated to Vaadin 19.

Crud UI Add-on version 4.6.0
Fixes #94 Add support for colspan in DefaultCrudFormFactory Updated to Vaadin 20

Crud UI Add-on version 5.0.0
Updated to Vaadin 21.0.3.

Crud UI Add-on version 5.1.0
Adds TreeGridCRUD implementation which uses TreeGrid (contributed by Boniface Chacha).

Crud UI Add-on version 6.0.0
Vaadin 23 support. FieldProvider (PR #102, thanks XakepSDK for the contribution)

Crud UI Add-on version 6.1.0
- Show error messages from CrudOperationException when relevant - Provide ENTER shortcut for operation button on the form - New method on Grid to add an optional Update button column - New method on form factory to enable/disable notifications, cf. the existing method on Grid (All features contributed by Paul Parlett. Thanks a lot, Paul!)

Crud UI Add-on version 6.2.0
Requires Java 11 and Vaadin 23.1.3. Fixes base FieldProvider generics Thanks to Boniface Chacha for the contributions.

Crud UI Add-on version 7.0.0
Supports Vaadin 24

Crud UI Add-on version 7.1.0
- Bump several dependencies for Vaadin 24.0.5 (by Francisco A. Lozano) - Allow overriding behaviors in `AbstractAutoGeneratedCrudFormFactory` (by Francisco A. Lozano)

Crud UI Add-on version 7.1.2
Fixes #51 - Prevent form from closing if add/edit operation fails with exception. Scroll to added/updated item in GridCrud. Updated to Java 21 and Vaadin 24.4.4

Crud UI Add-on version 7.2.0
- Fixes [#127](https://github.com/alejandro-du/crudui/issues/127) (and [#136](https://github.com/alejandro-du/crudui/issues/136)) Binding Exception with Double type in GridCrud using NumberField (thanks Matti Tahvonen!) - Fixes [#125](https://github.com/alejandro-du/crudui/issues/125) - Not support LocalDateTime type (thanks Matti Tahvonen!) - Fixes exception when using TreeGrid - Fixes [#133](https://github.com/alejandro-du/crudui/issues/133) - Translated captions (form titles) - Fixes [#135](https://github.com/alejandro-du/crudui/issues/135) - NullPointerException if all operations are sent null (thanks duclad!)

Online