Contact us Create app

Add-on Directory

← Back

ChipField Addon

Vaadin Flow integration of Paper Chip as a Field

Author

Contributors

Rating

Links

Popularity

300+

This is a Vaadin Flow wrapper built based on this excellent component implementation..

Provides a simple API for using it as an alternative multi-select field, with some features like restricting the allowed characters from the server side.

It also allows using it with Binder.

Found a bug or have a suggestion? Report it on GitHub

For bug reports, feature suggestions, or questions, please open an issue on GitHub. This makes it easier for us to track and respond efficiently, ensuring you get the best possible support. Your input helps us improve—thank you!

Sample code

	ChipField<String> chf = new ChipField<>("Select some planets", "Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune");
	Button b = new Button("Obtain selected planets");
	b.addClickListener(event->Notification.show("Planets: " + chf.getValue().stream().collect(Collectors.joining(",")));
    ChipField<String> chf5 = new ChipField<>("Choose planet features (Binder demo, try with: 'Rings', 'Moons', 'Water', etc.)");
    chf5.setWidth("500px");
    chf5.setItems(Arrays.asList("Rings", "Moons", "Water", "Rocks", "Lava", "Ice", "Cold", "Heat", "Atmosphere"));
    Binder<Planet> binder = new Binder<>();
    binder.bind(chf5,Planet::getConfiguration,Planet::setConfiguration);
    binder.setBean(p);

Compatibility

(Loading compatibility data...)

Last updated: 2023-04-10

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Bug fixes:

  • fix: update chips label when itemLabelGenerator is updated (#31)
Released
2023-04-10
Maturity
TESTED
License
Apache License 2.0

Compatibility

Framework
Vaadin 14
Vaadin 22
Vaadin 23
Vaadin 24
Vaadin 14+ in 2.6.0
Vaadin 13 in 1.0.0
Vaadin 12 in 1.0.0
Vaadin 11 in 1.0.0
Vaadin 10 in 1.0.0
Browser
Firefox
Safari
Google Chrome
iOS Browser
Android Browser
Internet Explorer

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