With AutoCrud, Vaadin has a powerful React component that simplifies creating a full CRUD for a Java entity in just a few steps. The acronym CRUD stands for Create, Read, Update, and Delete database operations—basic functions for editing data in a form. The AutoCrud component provides the following out-of-the-box functionality:
- Listing of existing records
- Filtering and sorting of all columns
- Lazy loading of records
- Displaying, creating, modifying, and deleting records in a form
The AutoCrud component combines the features of AutoGrid and AutoForm in a seamless integration. AutoGrid dynamically displays data in a list format, while AutoForm automatically generates intuitive forms for editing, updating, and deleting items. Both components, along with AutoCrud, work with the same Java backend.
In this article, I’ll describe the programming steps needed to use AutoCrud with a simple example. I’ll rely on generic interfaces from Spring Data JPA to simplify implementation. For a customized approach, please read the separate section below.
Backend setup
We’ll start by creating backend interfaces to access the database with the necessary operations. The repository extends interfaces from the Spring Data JPA framework, which provides essential operations for a JPA backend in a generic manner.
public interface PersonRepository extends
JpaRepository<Person, Long>,
JpaSpecificationExecutor<Person> {
}
To access the backend interfaces from frontend code, I’ll use an essential feature of Hilla, the TypeScript generation for Java Service APIs. The code generation is done by the Vaadin-Maven-Plugin and enables type-safe communication between server and client while also supporting the developer with code completion in the IDE.
To allow the Vaadin Maven plugin to find the respective interfaces and generate the client-side code, the corresponding service class must provide the annotation @BrowserCallable. Additionally, @AnonymousAllowed must be added to make the service accessible. The plugin generates the code during build time.
@BrowserCallable
@AnonymousAllowed
public class PersonService
extends CrudRepositoryService
<Person, Long, PersonRepository> {
}
To handle all list and CRUD operations, the service class must extend the abstract class CrudRepositoryService, specifying the entity type, the identifier type, and the corresponding repository. Vaadin integrates with Spring Data JPA to provide all the necessary operations.
Entity and DTO configuration
The Java Entity can be any Entity Bean from the database or a custom DTO. Each entity must include an identifier property for the items. For custom entities, POJOs, or DTOs, the service must implement the CrudService interface to provide the required functionality and call the appropriate backend operations.
Frontend integration
The AutoCrud element can be used in a React or Lit template. The underlying data structure and backend interfaces are configured using the model and service property in the element. The PersonModel and the PersonService are the generated client-side equivalents of the Java Entity and the Service class in TypeScript.
<AutoCrud service={PersonService} model={PersonModel}/>
With these few steps, you can create a CRUD view in Vaadin and view, filter, sort, and edit the data. Additionally, you can customize the grid or form in AutoCrud. For instance, you can hide certain columns in the grid, adjust the column order, modify display formats, and much more. Please see the documentation for AutoCrud, AutoGrid, and AutoForm.
You can find the source code of this example in my GitHub repository. Feel free to check it out. Feedback and pull requests are always welcome! 😊