Vaadin and Hilla

https://github.com/vaadin/docs
Admin
Official documentation and code examples for Vaadin, a web framework for building modern web...
Tokens:1,526,994
Snippets:13,136
Trust Score:9.8
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Start the documentation project server

Source: https://github.com/vaadin/docs/blob/main/articles/contributing/docs/dspublisher/production.adoc

Starts the documentation project server, which is required for live Java examples. By default, the server responds on port 8080.

```terminal
java -jar docs.jar
```

--------------------------------

### Standalone setup with two-argument install

Source: https://github.com/vaadin/docs/blob/main/articles/tools/observability/getting-started.adoc

Installs the ObservabilityKit with a MeterRegistry and default settings. This creates an ObservationRegistry and wires it to the meter registry, but does not register a tracing handler.

```java
@WebListener
public class ObservabilitySetup implements ServletContextListener {

    @Override
    public void contextInitialized(ServletContextEvent event) {
        MeterRegistry registry = new SimpleMeterRegistry();
        ObservabilityKit.install(registry,
                ObservabilitySettings.builder().build());
    }
}
```

--------------------------------

### Standalone setup with three-argument install

Source: https://github.com/vaadin/docs/blob/main/articles/tools/observability/getting-started.adoc

Creates an ObservationRegistry with meter and tracing handlers, then passes it to the three-argument install overload. The kit registers no handlers of its own, so the registry needs at least DefaultMeterObservationHandler for timers.

```java
MeterRegistry registry = new SimpleMeterRegistry();

ObservationRegistry observationRegistry = ObservationRegistry.create();
observationRegistry.observationConfig()
        // Produces the timers from the kit's observations.
        .observationHandler(new DefaultMeterObservationHandler(registry))
        // Exports the spans; tracer comes from your tracing bridge.
        .observationHandler(new DefaultTracingObservationHandler(tracer));

ObservabilityKit.install(registry, observationRegistry,
        ObservabilitySettings.builder().build());
```

--------------------------------

### Full Maven configuration for load testing

Source: https://github.com/vaadin/docs/blob/main/articles/flow/testing/load-testing/index.adoc

A complete example showing how to start the application server and record TestBench scenarios as part of a Maven build.

```xml
<properties>
    <serverPort>8081</serverPort>
    <applicationJar>my-app.jar</applicationJar>
    <managementPort>8082</managementPort>
</properties>

<build>
    <plugins>
        <plugin>
            <groupId>com.vaadin</groupId>
            <artifactId>testbench-converter-plugin</artifactId>
            <version>${vaadin.version}</version>
            <executions>
                <!-- Start the application server -->
                <execution>
                    <id>start-server</id>
                    <goals>
                        <goal>start-server</goal>
                    </goals>
                    <configuration>
                        <serverJar>${project.build.directory}/${applicationJar}</serverJar>
                        <serverPort>${serverPort}</serverPort>
                        <managementPort>${managementPort}</managementPort>
                    </configuration>
                </execution>

                <!-- Record TestBench scenarios -->
                <execution>
                    <id>record-scenarios</id>
                    <phase>integration-test</phase>
                    <goals>
                        <goal>record</goal>
                    </goals>
                    <configuration>
                        <testClasses>
                            <testClass>HelloWorldIT</testClass>
                            <testClass>CrudExampleIT</testClass>
                        </testClasses>
                        <appPort>${serverPort}</appPort>
                    </configuration>
                </execution>
```

--------------------------------

### Run Local Development Build with npm run dspublisher:start

Source: https://github.com/vaadin/docs/blob/main/README.md

Use this command to start the local development build of the documentation. It requires npm and the project dependencies to be installed.

```sh
npm run dspublisher:start
```

--------------------------------

### Install Linux dependencies for Design System Publisher

Source: https://github.com/vaadin/docs/blob/main/articles/flow/kb/index.adoc

Install necessary dependencies on Linux when the application won't start. Run this command at the command-line.

```terminal
sudo apt install build-essential autoconf automake libtool pkg-config libpng-dev nasm zlib1g-dev
```

--------------------------------

### Build and start the application

Source: https://github.com/vaadin/docs/blob/main/articles/building-apps/production/build.adoc

Run these commands to build the application and start it in production mode. The first command compiles the application, runs tests, and prepares the frontend bundle. The second starts the JAR.

```terminal
./mvnw clean package
java -jar target/*.jar
```

--------------------------------

### Java example folder structure

Source: https://github.com/vaadin/docs/blob/main/articles/contributing/docs/dspublisher/editing.adoc

Place Java-based examples in sub-folders inside the `src/main/java/` folder. Each example needs to be in its own file. For a new component, create a new folder inside the `component` folder with a Java file inside it.

```text
my-docs
└── src/main
    └── java/com/vaadin
        └── demo
            └── component
                ├── accordion
                ⋮   ├── AccordionBasic.java
                ⋮   ├── AccordionDisabledPanels.java
                ⋮   ⋮
                ├── mycomponent
                ⋮   ├── MyComponentExample.java
                ⋮   ⋮
```

--------------------------------

### Create a simple TestBench test with JUnit 5

Source: https://github.com/vaadin/docs/blob/main/articles/flow/testing/end-to-end/getting-started.adoc

Example test class SimpleIT extending BrowserTestBase. It uses JUnit 5 annotations and opens the application in the setup method. The test logic is not shown in this snippet, but it follows the same pattern as the JUnit 4 example.

```java
<source-info group="JUnit 5"></source-info>
import org.junit.jupiter.api.AfterEach;
import org.junit.jupiter.api.Assertions;
import org.junit.jupiter.api.BeforeEach;

import com.vaadin.testbench.BrowserTest;
import com.vaadin.testbench.BrowserTestBase;

public class SimpleIT extends BrowserTestBase {

    @BeforeEach
    public void setup() throws Exception {
        // Open the application
        getDriver().get("http://localhost:8080/");
    }
```

--------------------------------

### Install SSO Kit client for Lit

Source: https://github.com/vaadin/docs/blob/main/articles/tools/sso/getting-started/hilla.adoc

Install the @hilla/sso-kit-client-lit package for Hilla Lit applications.

```bash
npm install --save @hilla/sso-kit-client-lit
```

--------------------------------

### Check and start the dev loop

Source: https://github.com/vaadin/docs/blob/main/articles/building-apps/agentic-development/dev-loop-tutorial.adoc

Commands to check the status of the dev loop and start it. The status command is fast, while start takes about 30 seconds and blocks until the app is serving or fails.

```bash
.vaadin/vaadin-dev status
.vaadin/vaadin-dev start
```

--------------------------------

### Combined Java Code Examples in Open Block

Source: https://github.com/vaadin/docs/blob/main/articles/contributing/docs/dspublisher/editing.adoc

Combine multiple code examples in an .example style open block. The example shows a VirtualList example, a Person class, and an Address class.

```java
List<Person> people = DataService.`getPeople(); // See Person.java`
VirtualList<Person> list = new VirtualList<>();
list.setItems(people);
```

```java
public class Person {
  // The source of the Person object
}
```

```java
public class Address {
  // The source of the Address object
}
```

--------------------------------

### Install SSO Kit client for React

Source: https://github.com/vaadin/docs/blob/main/articles/tools/sso/getting-started/hilla.adoc

Install the @vaadin/sso-kit-client-react package for Hilla React applications.

```bash
npm install --save @vaadin/sso-kit-client-react
```

--------------------------------

### File size example (React)

Source: https://github.com/vaadin/docs/blob/main/articles/components/upload/index.adoc

React example for limiting file size in Upload.

```TSX
include::{root}/frontend/demo/component/upload/react/upload-file-size.tsx[render=frame,tags=snippet,indent=0,group=React]
```

--------------------------------

### Error message when Xcode Command Line Tools are missing

Source: https://github.com/vaadin/docs/blob/main/articles/flow/kb/index.adoc

Example error message on macOS when Xcode Command Line Tools are not installed, causing the development server to fail during start up.

```text
dsp@[version]:start ████████████████████ Initializing
npx,concurrently,--kill-others,--raw,"npx @vaadin/dspublisher@[version] --develop","mvn -C" failed with code 1
```

--------------------------------

### Run the Docker hosting example

Source: https://github.com/vaadin/docs/blob/main/articles/contributing/docs/dspublisher/production.adoc

Runs the simplified hosting example using Docker. Run this command inside the dspublisher/deployment-example-docker directory after the build is complete. Open http://localhost:8080 to view the built site.

```terminal
docker-compose up
```

--------------------------------

### Chaining Queries with thenOn()

Source: https://github.com/vaadin/docs/blob/main/articles/flow/testing/browserless/component-query.adoc

Chain a new query starting from a component found by the current query. This example searches for VerticalLayouts, takes the second one, searches for TextFields, filters for disabled ones, and gets the last.

```java
// Search for all 'VerticalLayout's in the view
TextField textField = findInView(VerticalLayout.class)
        // take the second one and start searching for 'TextField's
        .thenOn(2, TextField.class)
        // filter for disabled 'TextField's
        .withCondition(tf -> !tf.isEnabled())
        // and get the last one
        .last();
```

--------------------------------

### Load all frontend resources with DOCS_IMPORT_EXAMPLE_RESOURCES

Source: https://github.com/vaadin/docs/blob/main/articles/contributing/docs/dspublisher/editing.adoc

Loads all frontend resources up front, so you can include only the Java example without a hidden TypeScript counterpart. Add this before the start-up or build command.

```terminal
DOCS_IMPORT_EXAMPLE_RESOURCES="true" npm run dspublisher:start
```

--------------------------------

### Complete Responsive AlignItems Example

Source: https://github.com/vaadin/docs/blob/main/articles/styling/themes/lumo/lumo-breakpoint.adoc

A complete Java class demonstrating responsive align-items with breakpoints. It creates a flex container with column direction, applies AlignItems.END by default, overrides to center on medium screens, and start on large screens. Includes buttons as content.

```java
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.H3;
import com.vaadin.flow.theme.lumo.LumoUtility;

public class ResponsiveAlignItemsExample extends Div {

    public ResponsiveAlignItemsExample() {
        H3 title = new H3("Responsive Align Items Example");

        // Create a responsive flex container
        Div responsiveContainer = new Div();

        responsiveContainer.addClassNames(
             // Basic flex setup
            LumoUtility.Display.FLEX,
            LumoUtility.FlexDirection.COLUMN,
            LumoUtility.Padding.MEDIUM,

            // Responsive align-items

            // End on mobile
            LumoUtility.AlignItems.END,
            // Center on tablet
            LumoUtility.AlignItems.Breakpoint.Medium.CENTER,
            // Start on desktop
            LumoUtility.AlignItems.Breakpoint.Large.START
        );

        // Add content
        responsiveContainer.add(
            new Button("Button 1"),
            new Button("Button 2"),
            new Button("Button 3")
        );

        add(title, responsiveContainer);
    }
}
```

--------------------------------

### File format example (React)

Source: https://github.com/vaadin/docs/blob/main/articles/components/upload/index.adoc

React example demonstrating file format restrictions for Upload.

```TSX
include::{root}/frontend/demo/component/upload/react/upload-file-format.tsx[render,frame,tags=snippet,indent=0,group=React]
```

--------------------------------

### Date Picker basic example (Lit)

Source: https://github.com/vaadin/docs/blob/main/articles/components/date-picker/index.adoc

Basic Date Picker example for Lit. Includes import and component setup with a label.

```html
include::{root}/frontend/demo/component/datepicker/date-picker-basic.ts[render,tags=snippet,indent=0,group=Lit]
```

--------------------------------

### File size example (Lit)

Source: https://github.com/vaadin/docs/blob/main/articles/components/upload/index.adoc

Lit example for limiting file size in Upload.

```TypeScript
include::{root}/frontend/demo/component/upload/upload-file-size.ts[render=frame,tags=snippet,indent=0,group=Lit]
```

--------------------------------

### Format examples

Source: https://github.com/vaadin/docs/blob/main/articles/flow/testing/load-testing/response-checks.adoc

Examples of the string format for custom checks. The source shows a placeholder for format examples, but the actual content is not provided.

```plaintext

```

--------------------------------

### Create a new project with dsp-init

Source: https://github.com/vaadin/docs/blob/main/articles/contributing/docs/dspublisher/start.adoc

Run this command to create a new design system website project. The tool will prompt for the design system name and a folder name for the website project. The initialization script takes about a minute to finish and sets up the project with Git for version control.

```terminal
npx @vaadin/cli@2.7.0 dsp-init
```

--------------------------------

### Getting Cell Component with GridTester

Source: https://github.com/vaadin/docs/blob/main/articles/flow/testing/browserless/component-query.adoc

GridTester renders the cell on request. This example gets the Checkbox component from the cell at row 0, column 'subscriber' and clicks it.

```java
Checkbox checkbox = (Checkbox) test(grid).getCellComponent(0, "subscriber");
test(checkbox).click();
```

--------------------------------

### File count example (React)

Source: https://github.com/vaadin/docs/blob/main/articles/components/upload/index.adoc

React example for setting file count limits on Upload.

```TSX
include::{root}/frontend/demo/component/upload/react/upload-file-count.tsx[render,frame,tags=snippet,indent=0,group=React]
```

--------------------------------

### File format example (Lit)

Source: https://github.com/vaadin/docs/blob/main/articles/components/upload/index.adoc

Lit example demonstrating file format restrictions for Upload.

```TypeScript
include::{root}/frontend/demo/component/upload/upload-file-format.ts[render,frame,tags=snippet,indent=0,group=Lit]
```

--------------------------------

### Build JAR and run Docker image

Source: https://github.com/vaadin/docs/blob/main/articles/flow/production/docker.adoc

Make a production build of the JAR first, then build and run the image. The commands assume the Dockerfile from the previous example is in the project directory.

```terminal
mvn clean package
docker build -t my-app .
docker run -p 8080:8080 my-app
```

--------------------------------

### page-title front matter example

Source: https://github.com/vaadin/docs/blob/main/articles/contributing/docs/index.adoc

Example of a page-title front matter attribute. It should include the keyword Vaadin, be 50-60 characters long, use | as a divider, and start with 'How to' when fitting.

```text
page-title: How to contribute to Vaadin Documentation
```

--------------------------------

### Server startup output

Source: https://github.com/vaadin/docs/blob/main/articles/building-apps/agentic-development/mcp/self-hosting/index.adoc

The server prints this line when it starts successfully, indicating the license is valid until the specified date.

```text
ready. License valid until 2027-04-30.
```

--------------------------------

### Complete paginated grid example (PaginatedGridView.java)

Source: https://github.com/vaadin/docs/blob/main/articles/building-apps/forms-data/add-grid/paginated-data.adoc

Copy-paste this complete example to quickly try a paginated grid in your Vaadin application. It includes the view class with the grid setup, data provider, filtering, and sorting.

```java
include::{root}/src/main/java/com/vaadin/demo/buildingapps/grid/PaginatedGridView.java[tags=full,indent=0]
```

--------------------------------

### Install stdio Adapter Globally

Source: https://github.com/vaadin/docs/blob/main/articles/building-apps/agentic-development/mcp/supported-tools/other-tools.adoc

Command to install the stdio adapter globally. Requires Node.js 18 or later.

```bash
npm install -g @pyroprompts/mcp-stdio-to-streamable-http-adapter
```

--------------------------------

### Non-null signal example

Source: https://github.com/vaadin/docs/blob/main/articles/flow/advanced/nullability.adoc

Shows a ValueSignal with a non-null type argument, so get() never returns null.

```java
ValueSignal<String> nameSignal = new ValueSignal<>("John");
String name = nameSignal.get(); // Never null
```

--------------------------------

### Install ObservabilityKit in standalone (without Spring) application

Source: https://github.com/vaadin/docs/blob/main/articles/tools/observability/migrating-to-v5.adoc

Use the observability-kit-micrometer module and install the kit at servlet-context startup, before VaadinService initializes.

```java
ObservabilityKit.install(meterRegistry,
        ObservabilitySettings.builder().build());
```

--------------------------------

### Menu Bar Right Aligned Example (Lit)

Source: https://github.com/vaadin/docs/blob/main/articles/components/menu-bar/styling.adoc

Lit example showing how to align top-level menu items to the end of the menu bar using the 'end-aligned' theme variant. By default, items are aligned to the start.

```HTML
include::{root}/frontend/demo/component/menubar/menu-bar-right-aligned.ts[render,tags=snippet,indent=0,group=Lit]
```

--------------------------------

### Basic GridAIController setup with AIOrchestrator

Source: https://github.com/vaadin/docs/blob/main/articles/flow/ai-support/ai-powered-grid.adoc

Basic setup: create a Grid<AIDataRow>, a MessageInput, a DatabaseProvider (e.g., JdbcDatabaseProvider), and a GridAIController. Attach the controller to an AIOrchestrator and add the input and grid to the UI. A message list is not required; the grid is the output surface.

```java
Grid<AIDataRow> grid = new Grid<>();
MessageInput messageInput = new MessageInput();

DatabaseProvider databaseProvider = new JdbcDatabaseProvider(dataSource);
GridAIController controller = new GridAIController(grid, databaseProvider);

AIOrchestrator.builder(provider, systemPrompt)
        .withInput(messageInput)
        .withController(controller)
        .build();

add(messageInput, grid);
```

--------------------------------

### Add Product Button and Layout Setup

Source: https://github.com/vaadin/docs/blob/main/articles/getting-started/tutorial/add-data.adoc

Configures the main view with an 'Add Product' button that opens a dialog, saves product details, refreshes the grid, and selects the saved item. Also sets up the master-detail layout with a toolbar and grid.

```java
        var addButton = new Button("Add Product", e ->
                new AddProductDialog(
                        productDetails -> {
                            var saved = service.save(productDetails);
                            grid.getDataProvider().refreshAll();
                            service.findItemById(saved.getProductId())
                                   .ifPresent(grid::select);
                        },
                        this::handleException
                ).open()
        );

        // Layout view
        setSizeFull();
        setDetailSize("300px");
        setExpandMaster(true);

        var toolbar = new HorizontalLayout();
        toolbar.setWidthFull();
        toolbar.addToStart(searchField);
        toolbar.addToEnd(addButton);

        var listLayout = new VerticalLayout(toolbar, grid);
        listLayout.setSizeFull();
        grid.setSizeFull();

        setMaster(listLayout);
    }
```

--------------------------------

### Get UI instance before starting background thread

Source: https://github.com/vaadin/docs/blob/main/articles/building-apps/server-push/updates.adoc

Shows how to capture the UI instance in a button click listener before starting a background thread. UI.getCurrent() returns the UI in the request thread, but null in the background thread.

```java
button.addClickListener(clickEvent -> {
    var ui = UI.getCurrent(); // <1>
    taskExecutor.execute(() -> { // <2>
        // Do your work here
        ui.access(() -> {
            // Update your UI here
        });
    });
});
```

--------------------------------

### Menu Bar Right Aligned Example (React)

Source: https://github.com/vaadin/docs/blob/main/articles/components/menu-bar/styling.adoc

React (TSX) example showing how to align top-level menu items to the end of the menu bar using the 'end-aligned' theme variant. By default, items are aligned to the start.

```TSX
include::{root}/frontend/demo/component/menubar/react/menu-bar-right-aligned.tsx[render,tags=snippet,indent=0,group=React]
```

--------------------------------

### Deploy library with Maven

Source: https://github.com/vaadin/docs/blob/main/articles/building-apps/components/share-component.adoc

Run this command to build and deploy the library. Versions ending with -SNAPSHOT go to the snapshot repository; other versions go to the release repository.

```terminal
mvn clean deploy
```

--------------------------------

### Menu Bar Right Aligned Example (Flow)

Source: https://github.com/vaadin/docs/blob/main/articles/components/menu-bar/styling.adoc

Flow (Java) example showing how to align top-level menu items to the end of the menu bar using the 'end-aligned' theme variant. By default, items are aligned to the start.

```Java
include::{root}/src/main/java/com/vaadin/demo/component/menubar/MenuBarRightAligned.java[render,tags=snippet,indent=0,group=Flow]
```

--------------------------------

### Project structure from Vaadin Add-on Starter

Source: https://github.com/vaadin/docs/blob/main/articles/building-apps/components/package-component.adoc

Shows the directory layout of the starter project, including assembly files, frontend resources, Java sources, and a test demo view. The demo view is in test scope and not included in the published JAR.

```text
my-component/
├── src/
│   ├── main/
│   │   ├── assembly/           <1>
│   │   │   ├── assembly.xml
│   │   │   └── MANIFEST.MF
│   │   ├── frontend/           <2>
│   │   ├── java/
│   │   │   └── org/vaadin/addons/mygroup/
│   │   │       └── TheAddon.java
│   │   └── resources/
│   │       └── META-INF/
│   │           └── frontend/
│   └── test/
│       └── java/
│           └── org/vaadin/addons/mygroup/
│               └── AddonView.java  <3>
└── pom.xml
```

--------------------------------

### Launch plain Java Servlet application for testing

Source: https://github.com/vaadin/docs/blob/main/articles/flow/testing/end-to-end/getting-started.adoc

Use this command to start your application if you are using a plain Java Servlet starter.

```bash
mvn jetty:run
```

--------------------------------

### Install vaadin-agent-tools plugin in Codex

Source: https://github.com/vaadin/docs/blob/main/articles/building-apps/agentic-development/agent-tools.adoc

Adds the Vaadin Agent Marketplace and installs the vaadin-agent-tools plugin in Codex. Skip the first command if the marketplace is already added. The native binaries are committed, so no build step or PATH setup is needed.

```terminal
codex plugin marketplace add vaadin/agent-marketplace --ref main
codex plugin add vaadin-agent-tools@vaadin-marketplace
```

--------------------------------

### Build add-on JAR with mvn clean install

Source: https://github.com/vaadin/docs/blob/main/articles/building-apps/components/package-component.adoc

Build the add-on JAR with 'mvn clean install'.

```terminal
mvn clean install
```

--------------------------------

### Setup Grid and Form

Source: https://github.com/vaadin/docs/blob/main/articles/flow/ui-state/usage-examples/crud-editor.adoc

Initialize the Grid component and the Binder for form field management.

```java
Grid<Person> grid = new Grid<>(Person.class);
// ... grid configuration ...
```

```java
Binder<Person> binder = new Binder<>(Person.class);
TextField name = new TextField("Name");
binder.forField(name).bind(Person::getName, Person::setName);
// ... other fields ...
```

--------------------------------

### Enable TreeOnFailureExtension for CDI Test Class

Source: https://github.com/vaadin/docs/blob/main/articles/building-apps/testing/browserless/debug-tests.adoc

Add the same annotation to an AbstractCdiViewTest subclass to get the tree for failed tests in a CDI setup.

```java
@ExtendWith(TreeOnFailureExtension.class)
class CdiGreetingViewTest extends AbstractCdiViewTest {
    // Keep the test methods from the CDI guide.
}
```

--------------------------------

### Combined scenarios with ramp pattern

Source: https://github.com/vaadin/docs/blob/main/articles/flow/testing/load-testing/load-profiles.adoc

Run combined scenarios with a ramp pattern. Each scenario gets a proportional VU allocation based on weights, and all share the same load profile shape. The example shows two equally-weighted scenarios each getting 50 VUs.

```bash
mvn loadtest:run -Dk6.testDir=k6/tests -Dk6.combineScenarios=true \
    -Dk6.vus=100 -Dk6.duration=5m -Dk6.loadPattern=ramp -Dk6.rampUp=30s
```

```text
Scenario A:  0 ──30s──> 50 VUs ──sustain──> 50 VUs ──10s──> 0
Scenario B:  0 ──30s──> 50 VUs ──sustain──> 50 VUs ──10s──> 0
```

--------------------------------

### ProductCatalogView.java - Layout and Grid setup

Source: https://github.com/vaadin/docs/blob/main/articles/getting-started/tutorial/list-data.adoc

Sets up the view layout and grid sizing. The view takes the full browser window size, the grid takes the full view size, and the grid is added to the layout. This is part of the ProductCatalogView class.

```java
        // Layout view
        setSizeFull(); // <2>
        grid.setSizeFull(); // <3>
        add(grid); // <4>
```

--------------------------------

### Install vaadin-agent-tools plugin in Claude Code

Source: https://github.com/vaadin/docs/blob/main/articles/building-apps/agentic-development/agent-tools.adoc

Adds the Vaadin Agent Marketplace and installs the vaadin-agent-tools plugin in Claude Code. Skip the first command if the marketplace is already added. The native binaries are committed, so no build step or PATH setup is needed.

```terminal
/plugin marketplace add vaadin/agent-marketplace
/plugin install vaadin-agent-tools@vaadin-marketplace
```

--------------------------------

### Example correlation line output

Source: https://github.com/vaadin/docs/blob/main/articles/tools/modernization-toolkit/swing-bridge/logging.adoc

SwingBridge logs this correlation line at application start to link the run ID to the Vaadin session and user.

```text
Swing app run 7f3k2a: vaadinSession=57CA0DE6... app=com.example.crm.Main user=alice
```

--------------------------------

### Create a production build with Maven

Source: https://github.com/vaadin/docs/blob/main/articles/flow/production/production-build.adoc

Run this command to build a JAR or WAR file with all dependencies and bundled frontend resources. The output is placed in the target folder. If no add-ons or frontend files are used, a pre-compiled production bundle is used to avoid running frontend tools.

```terminal
mvn clean package
```

--------------------------------

### Minimal usage example for the component overview

Source: https://github.com/vaadin/docs/blob/main/articles/building-apps/components/publish-component.adoc

A short code snippet showing how to add the component to a view, as recommended for the directory listing overview.

```java
StatusBadge badge = new StatusBadge("Active", Status.SUCCESS);
add(badge);
```

--------------------------------

### Error message when npm ignores scripts

Source: https://github.com/vaadin/docs/blob/main/articles/flow/kb/index.adoc

Example error message when npm is configured with ignore-scripts=true, causing the development server to fail to start.

```text
Error in "/Users/[username]/.npm/_npx/c089b35bd0e8ac07/node_modules/@vaadin/dspublish
er/node_modules/gatsby-transformer-sharp/gatsby-node.js":
Something went wrong installing the "sharp" module

Cannot find module '../build/Release/sharp-darwin-arm64v8.node'
```

--------------------------------

### Clone and start Design System Publisher locally

Source: https://github.com/vaadin/docs/blob/main/articles/contributing/docs/index.adoc

First, clone the repository. Then, start Design System Publisher by entering the command in the docs folder. A commercial Vaadin subscription is required to run Design System Publisher.

```terminal
git clone https://github.com/vaadin/docs
```

```terminal
cd docs
npm run dspublisher:start
```

--------------------------------

### Responsive Display Example with LumoUtility.Display.Breakpoint

Source: https://github.com/vaadin/docs/blob/main/articles/styling/themes/lumo/lumo-breakpoint.adoc

Complete Java example showing how to use LumoUtility.Display and its Breakpoint variants to show/hide elements at different viewport sizes. Uses mobile-first approach: unprefixed utilities apply to all sizes, breakpoint variants apply from their minimum width upward.

```java
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.H3;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.theme.lumo.LumoUtility;

public class ResponsiveDisplayExample extends Div {

    public ResponsiveDisplayExample() {
        H3 title = new H3("Responsive Display Example");

        // Mobile-only message
        Div mobileMessage = createMessage(VaadinIcon.MOBILE, "Mobile view active",
                LumoUtility.Background.SUCCESS_10);
        mobileMessage.addClassNames(
                // Show on mobile
                LumoUtility.Display.FLEX,
                // Hide on tablet and up
                LumoUtility.Display.Breakpoint.Medium.HIDDEN,
                // Hide on desktop
                LumoUtility.Display.Breakpoint.Large.HIDDEN
        );

        // Tablet-only message
        Div tabletMessage = createMessage(VaadinIcon.TABLET, "Tablet view active",
                LumoUtility.Background.PRIMARY_10);
        tabletMessage.addClassNames(
                // Hide on mobile
                LumoUtility.Display.HIDDEN,
                // Show on tablet
                LumoUtility.Display.Breakpoint.Medium.FLEX,
                // Hide on desktop
                LumoUtility.Display.Breakpoint.Large.HIDDEN
        );

        // Desktop-only message
        Div desktopMessage = createMessage(VaadinIcon.DESKTOP, "Desktop view active",
                LumoUtility.Background.ERROR_10);
        desktopMessage.addClassNames(
                // Hide on mobile
                LumoUtility.Display.HIDDEN,
                // Hide on tablet
                LumoUtility.Display.Breakpoint.Medium.HIDDEN,
                // Show on desktop
                LumoUtility.Display.Breakpoint.Large.FLEX
        );

        add(title, mobileMessage, tabletMessage, desktopMessage);
    }

    private Div createMessage(VaadinIcon icon, String text, String background) {
        Div message = new Div(icon.create(), new Span(text));
        message.addClassNames(
                // Center the icon and text, with a gap between them
                LumoUtility.AlignItems.CENTER,
                LumoUtility.Gap.SMALL,
                background,
                LumoUtility.Padding.MEDIUM,
                LumoUtility.BorderRadius.MEDIUM
        );
        return message;
    }
}
```

--------------------------------

### Install Vaadin dev loop CLI without HotswapAgent

Source: https://github.com/vaadin/docs/blob/main/articles/flow/configuration/live-reload/dev-loop-cli.adoc

Use this Maven command to install the project files for the Vaadin dev loop CLI without downloading HotswapAgent. This is for machines without network access, but the first 'start' will then need the network to download the agent.

```bash
mvn vaadin:install-dev-cli -Dvaadin.devcli.skipHotswapAgent=true
```

--------------------------------

### gcloud init configuration selection snippet

Source: https://github.com/vaadin/docs/blob/main/articles/flow/production/cloud-providers/google/index.adoc

Example output from gcloud init showing the configuration selection prompt. Choose '1' to use the default configuration.

```text
Settings from your current configuration [default] are:
accessibility:
  screen_reader: 'False'
core:
  account: john.doe@gmail.com
  disable_usage_reporting: 'True'

Pick configuration to use:
 [1] Re-initialize this configuration [default] with new settings
 [2] Create a new configuration
Please enter your numeric choice:  1
```

--------------------------------

### Complete Responsive Grid Example with LumoUtility.Grid

Source: https://github.com/vaadin/docs/blob/main/articles/styling/themes/lumo/lumo-breakpoint.adoc

A complete Java example showing a responsive grid container with breakpoint-specific column classes (COLUMNS_1, Medium.COLUMNS_2, Large.COLUMNS_3, XLarge.COLUMNS_4, XXLarge.COLUMNS_6) and grid items with different background colors. Demonstrates mobile-first approach and auto-placement.

```java
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.H3;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.theme.lumo.LumoUtility;

public class ResponsiveGridExample extends Div {

    public ResponsiveGridExample() {
        H3 title = new H3("Responsive Grid Columns");

        // Grid container with responsive columns and rows
        Div gridContainer = new Div();
        gridContainer.addClassNames(
            LumoUtility.Display.GRID,
            LumoUtility.Gap.MEDIUM,
            LumoUtility.Padding.LARGE,
            LumoUtility.Background.CONTRAST_5,
            LumoUtility.BorderRadius.LARGE,

            // Responsive grid columns

            // 1 column on mobile
            LumoUtility.Grid.Column.COLUMNS_1,
            // 2 columns on tablet
            LumoUtility.Grid.Breakpoint.Medium.COLUMNS_2,
            // 3 columns on desktop
            LumoUtility.Grid.Breakpoint.Large.COLUMNS_3,
            // 4 columns on large desktop
            LumoUtility.Grid.Breakpoint.XLarge.COLUMNS_4,
            // 6 columns on extra large
            LumoUtility.Grid.Breakpoint.XXLarge.COLUMNS_6
        );

        // Create grid items with different spans
        for (int i = 1; i <= 12; i++) {
            Div gridItem = createGridItem("Item " + i, i);

            gridContainer.add(gridItem);
        }

        add(title, gridContainer);
    }

    private Div createGridItem(String title, int index) {
        Div item = new Div();

        // Different background colors for visual distinction
        String bgColor = switch (index % 4) {
            case 1 -> LumoUtility.Background.SUCCESS_10;
            case 2 -> LumoUtility.Background.PRIMARY_10;
            case 3 -> LumoUtility.Background.ERROR_10;
            default -> LumoUtility.Background.CONTRAST_10;
        };

        item.addClassNames(
            bgColor,
            LumoUtility.BorderRadius.MEDIUM,
            LumoUtility.Padding.LARGE,
            LumoUtility.Display.FLEX,
            LumoUtility.AlignItems.CENTER,
            LumoUtility.JustifyContent.CENTER,
            LumoUtility.Height.LARGE
        );

        item.add(new Span(title));
        return item;
    }
}
```

--------------------------------

### Inject TaskExecutor into a view

Source: https://github.com/vaadin/docs/blob/main/articles/building-apps/server-push/threads.adoc

Shows a view that receives Spring's TaskExecutor as a constructor parameter. This is the setup for using TaskExecutor to start UI-related tasks.

```java
@Route
public class MyView extends VerticalLayout {

    private final TaskExecutor taskExecutor;

    public MyView(TaskExecutor taskExecutor) {
        this.taskExecutor = taskExecutor;
        ...
    }
}
```

--------------------------------

### Start local server with mvn

Source: https://github.com/vaadin/docs/blob/main/articles/building-apps/components/package-component.adoc

Run 'mvn' to start Jetty with the test classpath, making classes in src/test/java available as routes.

```terminal
mvn
```

--------------------------------

### Maven exec-maven-plugin configuration for CycloneDX SBOM generation

Source: https://github.com/vaadin/docs/blob/main/articles/tools/appsec/getting-started.adoc

Add this plugin configuration to your pom.xml to generate a CycloneDX SBOM file (bom-npm.json) in the project's output directory during the generate-resources phase. Run 'npm install' and 'mvn install' before starting the application. AppSec Kit scans the generated SBOM file for vulnerabilities.

```xml
<plugin>
    <groupId>org.codehaus.mojo</groupId>
    <artifactId>exec-maven-plugin</artifactId>
    <version>1.3.2</version>
    <executions>
        <execution>
            <id>cyclonedx-npm</id>
            <goals>
                <goal>exec</goal>
            </goals>
            <phase>generate-resources</phase>
            <configuration>
                <executable>npx</executable>
                <arguments>
                    <argument>@cyclonedx/cyclonedx-npm</argument>
                    <argument>--output-file</argument>
                    <argument>${project.build.outputDirectory}/resources/bom-npm.json</argument>
                    <argument>--output-format</argument>
                    <argument>JSON</argument>
                </arguments>
            </configuration>
        </execution>
    </executions>
</plugin>
```

--------------------------------

### Display user information (Lit)

Source: https://github.com/vaadin/docs/blob/main/articles/tools/sso/getting-started/hilla.adoc

Uses the User class and the SingleSignOnContext.getUser() function to get user information. The example shows adding a user property and displaying preferredUsername, fullName, and email.

```typescript
import { property } from 'lit/decorators.js';
import { User } from '@vaadin/sso-kit-client-lit';
import ssoContext from '@vaadin/sso-kit-client-lit';

// Add a property for the user.
@property()
user: User | undefined;

// Add some output in the AboutView class.
<p>Username: ${this.user?.preferredUsername}</p>
<p>Full name: ${this.user?.fullName}</p>
<p>Email: ${this.user?.email}</p>
```

--------------------------------

### Add a route prefix with @RoutePrefix

Source: https://github.com/vaadin/docs/blob/main/articles/building-apps/views/add-router-layout.adoc

Use @RoutePrefix on a router layout to add a prefix to all routes of views that use that layout. In this example, MyView gets the 'some' prefix, resulting in the path 'some/path'.

```java
@Route(value = "path", layout = MyLayout.class)
public class MyView extends Main {
    ...
}

@RoutePrefix("some")
public class MyLayout extends Div implements RouterLayout {
    ...
}
```

--------------------------------

### PDF Viewer add-on integration

Source: https://github.com/vaadin/docs/blob/main/articles/building-apps/forms-data/generate-pdf-reports.adoc

Install the PDF Viewer add-on from the Vaadin Directory and use it as a drop-in viewer. The example shows how to set the PDF source from an input stream generated by a report function.

```java
import com.vaadin.componentfactory.pdfviewer.PdfViewer;
import com.vaadin.flow.server.streams.DownloadHandler;

PdfViewer pdfViewer = new PdfViewer();
pdfViewer.setSrc(DownloadHandler.fromInputStream(event -> {
    try {
        byte[] pdf = generateReport();
        return new DownloadResponse(
                new ByteArrayInputStream(pdf),
                "report.pdf",
                "application/pdf",
                pdf.length);
    } catch (Exception e) {
        return DownloadResponse.error(500);
    }
}));
pdfViewer.setWidth("100%");
pdfViewer.setHeight("800px");

add(pdfViewer);
```

--------------------------------

### apply command output example

Source: https://github.com/vaadin/docs/blob/main/articles/flow/configuration/live-reload/dev-loop-cli.adoc

Example output from the `apply` command, showing a phase line, an `hmr:` line for hot module replacement, and a `hot-reload:` line for Java bytecode swapping. `Stable` indicates the change is live and consistent.

```text
compiling → runtime → Stable   (1.2s)
hmr: 1 resource(s) copied, pushed 1 stylesheet(s) in place
hot-reload: redefineClasses(1); onHotswap completed=true
```

--------------------------------

### Basic AlignItems Breakpoint Usage

Source: https://github.com/vaadin/docs/blob/main/articles/styling/themes/lumo/lumo-breakpoint.adoc

Applies different align-items values at different breakpoints using LumoUtility.AlignItems.Breakpoint constants. The example sets align-items: start on small screens, center on medium, and end on large screens.

```java
// Instantiate a container component
Div container = new Div();

// Apply different align-items at different breakpoints
container.addClassNames(
        LumoUtility.Display.FLEX,
        // align-items: start on small screens
        LumoUtility.AlignItems.Breakpoint.Small.START,
        // align-items: center on medium screens
        LumoUtility.AlignItems.Breakpoint.Medium.CENTER,
        // align-items: end on large screens
        LumoUtility.AlignItems.Breakpoint.Large.END
);
```

--------------------------------

### Demo view with @Route

Source: https://github.com/vaadin/docs/blob/main/articles/building-apps/components/package-component.adoc

Replace the starter's AddonView with your own demo view. This view is in src/test/java and is not included in the published JAR.

```java
@Route("")
public class DemoView extends VerticalLayout {
    public DemoView() {
        StatusBadge success = new StatusBadge("Active", Status.SUCCESS);
        StatusBadge error = new StatusBadge("Failed", Status.ERROR);
        add(success, error);
    }
}
```

--------------------------------

### Implement TransferProgressListener onStart

Source: https://github.com/vaadin/docs/blob/main/articles/components/upload/file-handling.adoc

Implements TransferProgressListener to track upload start events. The onStart callback receives a TransferContext with contentLength() and fileName() for assertions. This example is incomplete in the source; the listener is passed through factory methods as a parameter.

```java
TransferProgressListener progressListener = new TransferProgressListener() {
        @Override
        public void onStart(TransferContext context) {
            Assert.assertEquals(165000, context.contentLength());
            Assert.assertEquals("download", context.fileName());
            invocations.add("onStart");
        }
```

--------------------------------

### Async setup with cleanup callback using addJsInitializer

Source: https://github.com/vaadin/docs/blob/main/articles/flow/component-internals/element-api/calling-javascript.adoc

Shows how to add a JavaScript initializer that imports a widget asynchronously and returns a cleanup function that awaits the pending work before destroying the widget. This prevents resource leaks if cleanup runs before the asynchronous setup completes.

```java
getElement().addJsInitializer("""
        const widgetPromise = import('./my-widget.js')
                .then((module) => module.create(this));
        return async () => (await widgetPromise).destroy();
        """);
```

--------------------------------

### Use npm and npx from automatic installation directory on Windows

Source: https://github.com/vaadin/docs/blob/main/articles/flow/configuration/development-mode/node-js.adoc

On Windows, the executables are in the root of the installation directory. These commands show how to use npm and npx directly from that directory.

```terminal
%USERPROFILE%\.vaadin\node-v24.14.0\npm.cmd install some-package
%USERPROFILE%\.vaadin\node-v24.14.0\npx.cmd some-tool
```

--------------------------------

### Subscribe with Error Callback in Button Click Listener

Source: https://github.com/vaadin/docs/blob/main/articles/building-apps/server-push/reactive.adoc

Starts a background job on button click and subscribes with success and error callbacks, both wrapped in UI.accessLater(). The error callback is the onJobFailed method defined in the previous example.

```java
button.addClickListener(clickEvent -> {
    var ui = UI.getCurrentOrThrow();
    service.startBackgroundJob().subscribe(
        ui.accessLater(this::onJobCompleted, null),
        ui.accessLater(this::onJobFailed, null)
    );
});
```

--------------------------------

### Example JSON payload from the Vaadin observability endpoint

Source: https://github.com/vaadin/docs/blob/main/articles/tools/observability/insights.adoc

Shows the top-level structure of the JSON returned by a GET request to the endpoint. The 'insights' array is elided with '...' in the source. The 'instrumentation' field indicates whether collectors are active.

```json
{
  "schemaVersion": 1,
  "generated": "2026-08-26T09:14:02.117Z",
  "instrumentation": "active",
  "insights": [ ... ]
}
```

--------------------------------

### newUser(Authentication)

Source: https://github.com/vaadin/docs/blob/main/articles/flow/testing/browserless/multi-user.adoc

Install a custom Authentication directly.

```APIDOC
## newUser(Authentication)

### Description
Install a custom Authentication directly.

### Method
newUser

### Parameters
- **authentication** (Authentication) - Required - The custom Authentication to install.

### Request Example
(No request body)

### Response
(No response body)
```

--------------------------------

### Use the HelloWorld component in Java

Source: https://github.com/vaadin/docs/blob/main/articles/flow/component-internals/templates/basic.adoc

Shows how to instantiate and add the HelloWorld component to a layout in Java, using it like any other component.

```java
HelloWorld hello = new HelloWorld();

Div layout = new Div();
layout.add(hello);
```

--------------------------------

### Set i18n.provider via @WebServlet annotation

Source: https://github.com/vaadin/docs/blob/main/articles/flow/i18n/custom-i18n-provider.adoc

Alternative configuration for non-Spring Boot setups: set the i18n.provider init parameter in the @WebServlet annotation on the servlet class. The example shows the fully qualified class name as the value.

```java
@WebServlet(urlPatterns = "/*", name = "slot", asyncSupported = true, loadOnStartup = 1,
   initParams = { @WebInitParam(name = "i18n.provider", value = "com.vaadin.example.ui.TranslationProvider") })
public class ApplicationServlet extends VaadinServlet {
}
```

--------------------------------

### Dynamic styling example with SharedNumberSignal

Source: https://github.com/vaadin/docs/blob/main/articles/flow/ui-state/building-ui.adoc

Shows how to create dynamic visual feedback based on data using a SharedNumberSignal. The example is incomplete in the source.

```java
SharedNumberSignal progress = new SharedNumberSignal();
```

--------------------------------

### Configure CycloneDX Maven plugin to generate Maven SBOM

Source: https://github.com/vaadin/docs/blob/main/articles/tools/appsec/getting-started.adoc

Add the CycloneDX Maven plugin to your pom.xml to generate the Maven SBOM file (bom.json) in the /resources sub-directory of the output directory. Run 'maven install' before starting the application.

```xml
<plugin>
    <groupId>org.cyclonedx</groupId>
    <artifactId>cyclonedx-maven-plugin</artifactId>
    <version>2.7.7</version>
    <executions>
        <execution>
            <phase>generate-resources</phase>
            <goals>
                <goal>makeAggregateBom</goal>
            </goals>
            <configuration>
                <projectType>library</projectType>
                <schemaVersion>1.4</schemaVersion>
                <includeBomSerialNumber>true</includeBomSerialNumber>
                <includeCompileScope>true</includeCompileScope>
                <includeProvidedScope>true</includeProvidedScope>
                <includeRuntimeScope>true</includeRuntimeScope>
                <includeSystemScope>true</includeSystemScope>
                <includeTestScope>false</includeTestScope>
                <includeLicenseText>false</includeLicenseText>
                <outputReactorProjects>true</outputReactorProjects>
                <outputFormat>json</outputFormat>
                <outputName>bom</outputName>
                <outputDirectory>${project.build.outputDirectory}/resources</outputDirectory>
                <verbose>false</verbose>
            </configuration>
        </execution>
    </executions>
</plugin>
```

--------------------------------

### StylingExampleView: theme variant, inline style, and CSS class

Source: https://github.com/vaadin/docs/blob/main/articles/building-apps/ui-basics/add-styling.adoc

A complete view demonstrating all three styling approaches: a theme variant, an inline style using a base style property, and a CSS class. The `.info-banner` CSS must be added to `styles.css` for the banner to be styled.

```java
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("styling-example")
public class StylingExampleView extends VerticalLayout {

    public StylingExampleView() {
        // 1. Theme variant — built-in component style (pure Java)
        Button saveButton = new Button("Save");
        saveButton.addThemeVariants(ButtonVariant.PRIMARY);

        // 2. Inline style — one-off styling (pure Java)
        Div highlight = new Div("Highlighted text");
        highlight.getStyle()
                .setBackground("var(--vaadin-background-container-strong)")
                .setPadding("var(--vaadin-padding-s) var(--vaadin-padding-m)")
                .setBorderRadius("var(--vaadin-radius-m)");

        // 3. CSS class name — styled via styles.css (requires CSS)
        Div banner = new Div("Welcome back!");
        banner.addClassName("info-banner");

        add(saveButton, highlight, banner);
    }
}
```

```css
.info-banner {
    background: var(--vaadin-background-container);
    padding: var(--vaadin-padding-m);
    border-radius: var(--vaadin-radius-m);
}
```

--------------------------------

### Example subject line for a pull request

Source: https://github.com/vaadin/docs/blob/main/articles/contributing/pr.adoc

Use this format for the PR subject line, starting with a type prefix like 'feat:', 'fix:', 'chore:', or 'refactor:', and optionally '!' for breaking changes. Keep it under 50 characters and in imperative form.

```text
feat: Create a Valo icon font for icons in Valo
```

--------------------------------

### Create ProductService.java

Source: https://github.com/vaadin/docs/blob/main/articles/hilla/guides/data-grids/index.adoc

Expose the repository to the frontend by creating a service class annotated with @BrowserCallable and extending ListRepositoryService.

```java
package com.example.application;

import com.vaadin.flow.server.auth.AnonymousAllowed;
import com.vaadin.hilla.BrowserCallable;
import com.vaadin.hilla.crud.ListRepositoryService;

@BrowserCallable
@AnonymousAllowed
public class ProductService extends ListRepositoryService<Product, Long, ProductRepository> {
}
```

--------------------------------

### Set i18n.provider via system property in Maven command

Source: https://github.com/vaadin/docs/blob/main/articles/flow/i18n/custom-i18n-provider.adoc

For non-Spring Boot setups, set the i18n.provider system property to the fully qualified class name of the provider. This example uses the Maven jetty plugin with the -D flag.

```terminal
mvn jetty:run -Dvaadin.i18n.provider=com.vaadin.example.ui.TranslationProvider
```

--------------------------------

### Highlighting dragged component with .v-dragged CSS class

Source: https://github.com/vaadin/docs/blob/main/articles/flow/component-internals/dnd/drag-source.adoc

Style the dragged component's root element, which gets the v-dragged class name in the browser during a drag. This example paints a dotted outline and reduces opacity to highlight the dragged component.

```css
.v-dragged {
    outline: 1px dotted hotpink;
    opacity: 0.5;
}
```

--------------------------------

### Run application on Windows

Source: https://github.com/vaadin/docs/blob/main/articles/hilla/_shared/guides/_reactive-services.adoc

Command to start the application on Windows.

```bash
mvnw
```

--------------------------------

### Serve classpath resource with forClassResource

Source: https://github.com/vaadin/docs/blob/main/articles/flow/advanced/downloads.adoc

Use forClassResource to serve a static resource from the classpath. In this example, the file vaadin.jpeg is located in src/main/resources/com/example/ui/ and is loaded relative to MainView. If the resource name starts with '/', it is looked up from /src/main/resources without the class path prefix.

```java
Image logoImage = new Image(DownloadHandler.forClassResource(
        MainView.class, "vaadin.jpeg"), "Vaadin Logo");
```

--------------------------------

### Configure ProductFormDrawer, Search Field, Grid Selection, and Layout

Source: https://github.com/vaadin/docs/blob/main/articles/getting-started/tutorial/add-data.adoc

Sets up the main view with a ProductFormDrawer for saving and deleting products, a search field that refreshes the grid, a grid selection listener that loads product details, and an add button that opens a dialog. Configures the layout with a master-detail view.

```java
var drawer = new ProductFormDrawer(productDetails -> {
            var saved = service.save(productDetails);
            grid.getDataProvider().refreshAll();
            return saved;
        }, productDetails -> {
            service.delete(productDetails);
            grid.deselectAll();
            grid.getDataProvider().refreshAll();
        }, this::handleException);

        searchField.addValueChangeListener(e ->
                grid.getDataProvider().refreshAll());

        grid.addSelectionListener(e -> {
            var productDetails = e.getFirstSelectedItem()
                .flatMap(item -> service.findDetailsById(item.productId()));
            productDetails.ifPresent(drawer::setProductDetails);
            setDetail(productDetails.isPresent() ? drawer : null);
        });
        addBackdropClickListener(e -> grid.deselectAll());
        addDetailEscapePressListener(e -> grid.deselectAll());

        var addButton = new Button("Add Product", e ->
            new AddProductDialog(
                productDetails -> {
                    var saved = service.save(productDetails);
                    grid.getDataProvider().refreshAll();
                    service.findItemById(saved.getProductId())
                           .ifPresent(grid::select);
                },
                this::handleException
            ).open()
        );

        // Layout view
        setSizeFull();
        setDetailSize("300px");
        setExpandMaster(true);

        var toolbar = new HorizontalLayout();
        toolbar.setWidthFull();
        toolbar.addToStart(searchField);
        toolbar.addToEnd(addButton);

        var listLayout = new VerticalLayout(toolbar, grid);
        listLayout.setSizeFull();
        grid.setSizeFull();

        setMaster(listLayout);
    }
```
Tokens:
Raw