### Run Jmix UI Samples Locally
Source: https://github.com/jmix-framework/jmix-ui-samples-2/blob/main/README.md
Execute this command in the project's terminal to start the Jmix UI Samples application locally. Ensure JDK 17 is set up.
```bash
./gradlew bootRun
```
--------------------------------
### Add Vaadin Add-on Repository and Dependency
Source: https://github.com/jmix-framework/jmix-ui-samples-2/blob/main/src/main/resources/io/jmix/uisamples/view/flowui/customcomponents/vaadinaddons/inputmasksimple/input-mask-addon-simple-en.md
Configure your project's `build.gradle` file to include the Vaadin Add-ons Maven repository and add the desired add-on dependency. This setup is necessary before you can use the add-on components in your application.
```groovy
repositories {
maven {
url 'https://maven.vaadin.com/vaadin-addons'
}
// ...
}
dependencies {
implementation 'org.vaadin.addons.componentfactory:vcf-input-mask:2.2.0'
// ...
}
```
--------------------------------
### Configure Full-Screen Layout
Source: https://github.com/jmix-framework/jmix-ui-samples-2/blob/main/src/main/frontend/index.html
Sets the body and outlet elements to occupy the full viewport height and width with no margins.
```css
body, #outlet { height: 100vh; width: 100%; margin: 0; }
```
--------------------------------
### Configure Gradle for Vaadin Add-ons
Source: https://github.com/jmix-framework/jmix-ui-samples-2/blob/main/src/main/resources/io/jmix/uisamples/view/flowui/customcomponents/vaadinaddons/socharts/charts-addon-en.html
Add the Vaadin repository and the specific add-on dependency to the build.gradle file.
```groovy
repositories {
maven {
url 'https://maven.vaadin.com/vaadin-addons'
}
// ...
}
dependencies {
implementation 'com.storedobject.chart:so-charts:3.2.4'
// ...
}
```
--------------------------------
### Configure Meeting Point Detail View
Source: https://github.com/jmix-framework/jmix-ui-samples-2/blob/main/src/main/resources/io/jmix/uisamples/view/flowui/cookbook/composition3/composition-master-detail-1-en.md
Set the `openMode` to `DIALOG` for the meeting point detail view to open it as a dialog. Ensure the fetch plan for `Terminal` includes `Terminal.meetingPoints`.
```xml
```
--------------------------------
### Implement Wizard Dialog Pattern
Source: https://context7.com/jmix-framework/jmix-ui-samples-2/llms.txt
Manages multi-step navigation and validation using TabSheet and ViewValidation.
```java
// WizardDialog.java
@ViewController("wizard-dialog")
@ViewDescriptor("wizard-dialog.xml")
@EditedEntityContainer("employeeDc")
@DialogMode(width = "50em")
public class WizardDialog extends StandardDetailView {
@ViewComponent
private JmixTabSheet wizardContent;
@ViewComponent
private JmixButton backButton;
@ViewComponent
private JmixButton nextButton;
@Autowired
private ViewValidation viewValidation;
private int tabsCount;
public WizardDialog addStep(WizardStep> step) {
Tab tab = createTab(step, ++tabsCount);
tab.setEnabled(false);
step.content().setupData(getViewData());
wizardContent.add(tab, step.content());
return this;
}
@Subscribe(id = "nextButton", subject = "clickListener")
public void onNextButtonClick(final ClickEvent event) {
if (isLastTabSelected()) {
closeWithSave();
return;
}
ValidationErrors validationErrors = validateCurrentStep();
if (validationErrors.isEmpty()) {
wizardContent.getSelectedTab().setEnabled(false);
int selectedIndex = wizardContent.getSelectedIndex();
wizardContent.getTabAt(++selectedIndex).setEnabled(true);
wizardContent.setSelectedIndex(selectedIndex);
} else {
viewValidation.focusProblemComponent(validationErrors);
viewValidation.showValidationErrors(validationErrors);
}
}
private ValidationErrors validateCurrentStep() {
return viewValidation.validateUiComponents(
wizardContent.getContentByTab(wizardContent.getSelectedTab()));
}
}
```
--------------------------------
### Configure Kanban Board with CRUD Actions
Source: https://context7.com/jmix-framework/jmix-ui-samples-2/llms.txt
Defines a Kanban board component with data binding, column configuration, and standard CRUD actions using dialog-based editing.
```xml
```
--------------------------------
### Configure Pivot Table for Data Analysis
Source: https://context7.com/jmix-framework/jmix-ui-samples-2/llms.txt
Sets up a pivot table component with specified data properties, row groupings, and column dimensions for multi-dimensional analysis.
```xml
```
--------------------------------
### Display Notifications using Notifications API
Source: https://context7.com/jmix-framework/jmix-ui-samples-2/llms.txt
Demonstrates various ways to show notifications, including simple text, title-message pairs, and custom UI components.
```java
// NotificationSimpleSample.java
@ViewController("notification-simple")
@ViewDescriptor("notification-simple.xml")
public class NotificationSimpleSample extends StandardView {
@Autowired
protected Notifications notifications;
@Autowired
protected UiComponents uiComponents;
@Subscribe("standardNotificationButton")
protected void onStandardNotificationButtonClick(ClickEvent event) {
notifications.show("Standard notification");
}
@Subscribe("messageNotificationButton")
protected void onMessageNotificationButtonClick(ClickEvent event) {
notifications.show("Notification with message", "Message");
}
@Subscribe("componentNotificationButton")
protected void onComponentNotificationButtonClick(ClickEvent event) {
HorizontalLayout content = uiComponents.create(HorizontalLayout.class);
Text text = new Text("Hello world!");
Icon icon = VaadinIcon.SMILEY_O.create();
content.add(text, icon);
notifications.show(content);
}
}
```
--------------------------------
### Create Database View
Source: https://github.com/jmix-framework/jmix-ui-samples-2/blob/main/src/main/resources/io/jmix/uisamples/view/flowui/cookbook/readonlycustomers/read-only-customers-en.html
Defines a database view named CUSTOMER_VIEW by selecting and concatenating customer information from the CUSTOMER table. This view is read-only.
```sql
create view CUSTOMER_VIEW as select ID, NAME || ' ' || LAST_NAME as FULL_NAME, AGE from CUSTOMER
```
--------------------------------
### Create Option Dialogs with Custom Actions
Source: https://context7.com/jmix-framework/jmix-ui-samples-2/llms.txt
Uses the Dialogs API to build confirmation dialogs with standard and custom action buttons.
```java
// OptionDialogSample.java
@ViewController("option-dialog")
@ViewDescriptor("option-dialog.xml")
public class OptionDialogSample extends StandardView {
@Autowired
protected Dialogs dialogs;
@Autowired
protected Notifications notifications;
@Subscribe("okAndCancelButton")
protected void onOkAndCancelButtonClick(ClickEvent event) {
dialogs.createOptionDialog()
.withHeader("Default option dialog")
.withText("Default actions are here!")
.withActions(
new DialogAction(DialogAction.Type.OK)
.withHandler(e ->
notifications.create("OK pressed")
.withThemeVariant(NotificationVariant.LUMO_SUCCESS)
.show()),
new DialogAction(DialogAction.Type.CANCEL))
.open();
}
@Subscribe("customActionButton")
protected void onCustomActionButtonClick(ClickEvent event) {
dialogs.createOptionDialog()
.withHeader("Custom Action")
.withText("Custom action are here!")
.withActions(
new BaseAction("customAction")
.withText("Do something")
.withHandler(e ->
notifications.create("Done!")
.withThemeVariant(NotificationVariant.LUMO_SUCCESS)
.show()),
new DialogAction(DialogAction.Type.CANCEL)
)
.open();
}
}
```
--------------------------------
### Create Reusable UI Fragment
Source: https://context7.com/jmix-framework/jmix-ui-samples-2/llms.txt
Defines a fragment with its own XML layout and Java controller for encapsulated behavior.
```xml
```
```java
// ButtonSimpleFragment.java
@FragmentDescriptor("button-simple-fragment.xml")
public class ButtonSimpleFragment extends Fragment {
@Autowired
protected Notifications notifications;
@Subscribe("helloButton")
public void onHelloButtonClick(ClickEvent event) {
notifications.show("Hello, world!");
}
@Subscribe("saveButton1")
public void onSaveButton1Click(ClickEvent event) {
FragmentUtils.getComponentId(event.getSource())
.ifPresent(this::save);
}
protected void save(String id) {
notifications.show("Save called from " + id);
}
}
```
--------------------------------
### Create Calendar Events Programmatically
Source: https://context7.com/jmix-framework/jmix-ui-samples-2/llms.txt
Demonstrates adding events to a FullCalendar component using a ListCalendarDataProvider during the view initialization.
```java
// CalendarSimpleCalendarEventSample.java
@ViewController("calendar-simple-calendar-event")
@ViewDescriptor("calendar-simple-calendar-event.xml")
public class CalendarSimpleCalendarEventSample extends StandardView {
@ViewComponent
private FullCalendar calendar;
@Subscribe
public void onInit(final InitEvent event) {
SimpleCalendarEvent calendarEvent = SimpleCalendarEvent.create()
.withTitle("Meeting")
.withStartDateTime(LocalDate.now().withDayOfMonth(10), LocalTime.of(15, 0))
.build();
calendar.addDataProvider(new ListCalendarDataProvider(List.of(calendarEvent)));
}
}
```
--------------------------------
### Kanban Board Data Binding and Properties Mapping
Source: https://github.com/jmix-framework/jmix-ui-samples-2/blob/main/src/main/resources/io/jmix/uisamples/view/flowui/kanban/data/kanban-data-en.html
This section details how to bind data to the Kanban board component using the `dataContainer` attribute and how to map entity attributes to Kanban task card properties using `propertiesMapping`.
```APIDOC
## Kanban Board Configuration
### Description
Configure the Kanban board component to display and manage data. This involves specifying a data container for the data source and defining how entity attributes map to the visual properties of each Kanban task card.
### Data Binding
To bind data to the Kanban board, use the `dataContainer` attribute and specify the name of the data container that holds your entities.
```xml
```
### Properties Mapping
The `propertiesMapping` object allows you to define the mapping between your entity attributes and the attributes of a Kanban task card. The Kanban task card supports the following attributes:
* `id` (required)
* `status` (required)
* `text` (required)
* `username`
* `userAvatar`
* `color`
* `dueDate`
* `progress`
* `tags`
* `priority`
* `swimlane`
If `propertiesMapping` is not specified, the component defaults to using the `id`, `status`, and `text` fields for mapping.
#### Example `propertiesMapping`
```xml
```
### Default Values
Required attributes (`id`, `status`, `text`) have default values. If custom mapping is not provided for these, the component will attempt to use the corresponding fields from your entity. For optional attributes, ensure they exist in your entity or are handled appropriately if not mapped.
```
--------------------------------
### Enable Terminal Creation Action
Source: https://github.com/jmix-framework/jmix-ui-samples-2/blob/main/src/main/resources/io/jmix/uisamples/view/flowui/cookbook/composition3/composition-master-detail-1-en.md
Enable the `terminalsDataGridCreate` action only when an airport is selected in the `airportsDataGrid`. This action is initially disabled in the XML.
```java
@Subscribe("terminalsDataGridCreate")
public void onTerminalsDataGridCreate(ActionPerformedEvent event) {
Terminal terminal = dataContext.create(Terminal.class);
terminal.setAirport(airportsDc.getItem());
openEditor(terminal, (entity, context) -> {
if (entity instanceof Terminal) {
terminalsDc.getLoader().load();
}
});
}
```
--------------------------------
### Declarative Item Fetching with itemsQuery
Source: https://github.com/jmix-framework/jmix-ui-samples-2/blob/main/src/main/resources/io/jmix/uisamples/view/flowui/components/multiselectcombobox/itemsquery/multi-select-combo-box-items-query-en.html
Configure item fetching for MultiSelectComboBox and MultiSelectComboBoxPicker using the `itemsQuery` element in XML. This element supports attributes for entity class, fetch plans, value escaping, and string substitution for queries.
```APIDOC
## MultiSelectComboBox/MultiSelectComboBoxPicker - itemsQuery Configuration
### Description
Defines how items are fetched for the MultiSelectComboBox and MultiSelectComboBoxPicker components using declarative XML.
### Method
XML Configuration
### Endpoint
N/A (Component Configuration)
### Parameters
#### itemsQuery Attributes
- **class** (string) - Optional - The fully qualified name of an entity class.
- **fetchPlan** (string) - Optional - Specifies the fetch plan for loading the queried entity.
- **escapeValueForLike** (boolean) - Optional - Enables searching for values containing special symbols like %, \. Defaults to `false`.
- **searchStringFormat** (string) - Optional - A string containing a variable to be substituted with the actual value by `io.jmix.flowui.sys.substitutor.StringSubstitutor`.
#### itemsQuery Nested Elements
- **query** (string) - Required - Contains the JPQL query.
- **fetchPlan** (object) - Optional - Descriptor of an inline fetch plan.
### Request Example
```xml
select e from MyEntity e where e.name like :search
```
### Response
N/A (Configuration)
### Error Handling
- If `itemsQuery` is not defined, programmatic fetching must be used.
- The `class` attribute is optional as the components can work with entities and scalar values.
```
--------------------------------
### Configure DataGrid with Inline Editor
Source: https://context7.com/jmix-framework/jmix-ui-samples-2/llms.txt
Defines the XML structure for a DataGrid with buffered editing enabled and associated editor action columns.
```xml
```
--------------------------------
### Calendar URL Query Parameters
Source: https://github.com/jmix-framework/jmix-ui-samples-2/blob/main/src/main/resources/io/jmix/uisamples/view/flowui/calendar/urlqueryparameters/calendar-url-query-parameters-en.html
Configuration details for the UrlQueryParametersFacet within the Calendar add-on.
```APIDOC
## Calendar URL Query Parameters
### Description
The calendar add-on provides specific parameters for the `UrlQueryParametersFacet` to manage calendar state through the URL.
### Parameters
#### Query Parameters
- **calendarDisplayMode** (string) - Optional - Sets the display mode of the calendar. The parameter name can be customized.
- **calendarDate** (string) - Optional - Navigates the calendar to a specific date. The parameter name can be customized.
```
--------------------------------
### Programmatic ComboBox Data Loading
Source: https://github.com/jmix-framework/jmix-ui-samples-2/blob/main/src/main/resources/io/jmix/uisamples/view/flowui/components/combobox/itemsquery/combobox-items-query-en.html
Implementing custom data fetching logic using the setItemsFetchCallback method.
```APIDOC
## Programmatic setItemsFetchCallback
### Description
Allows programmatic definition of options for the ComboBox when itemsQuery is not used.
### Implementation Details
- The method delegates to `com.vaadin.flow.data.provider.HasLazyDataView#setItems`.
- A `QueryTrace` instance is passed to the fetch callback.
### Limitations
- `query.getOffset()` and `query.getLimit()` must be called within the callback.
- The number of items returned must not exceed the `limit` value provided by the query.
```
--------------------------------
### Programmatic Item Fetching with setItemsFetchCallback
Source: https://github.com/jmix-framework/jmix-ui-samples-2/blob/main/src/main/resources/io/jmix/uisamples/view/flowui/components/multiselectcombobox/itemsquery/multi-select-combo-box-items-query-en.html
Configure item fetching programmatically in the ViewController using `setItemsFetchCallback` when the `itemsQuery` element is not defined. This method utilizes Vaadin's `CallbackDataProvider.FetchCallback`.
```APIDOC
## MultiSelectComboBox/MultiSelectComboBoxPicker - setItemsFetchCallback
### Description
Allows programmatic configuration of item fetching for MultiSelectComboBox and MultiSelectComboBoxPicker components in the ViewController, typically used when `itemsQuery` is not defined in XML.
### Method
Java (ViewController)
### Endpoint
N/A (Component Configuration)
### Parameters
#### setItemsFetchCallback Parameters
- **fetchCallback** (CallbackDataProvider.FetchCallback) - A callback function that fetches data. It receives a `QueryTrace` instance.
### Request Example
```java
@Subscribe("myMultiSelectComboBox")
public void onMyMultiSelectComboBoxItemsFetch(
final FetchEvent event,
final Callback> callback) {
QueryTrace queryTrace = event.getQueryTrace();
// Ensure query.getOffset() and query.getLimit() are called
queryTrace.getOffset();
queryTrace.getLimit();
// Fetch items from backend based on queryTrace (offset, limit, filters, etc.)
Collection items = backendService.fetchMyEntities(queryTrace.getOffset(), queryTrace.getLimit());
// Ensure the amount of items does not exceed the limit
callback.onResult(items);
}
```
### Response
N/A (Callback Function)
### Error Handling
- **Limitations**:
- `query.getOffset()` and `query.getLimit()` methods must be called within the fetch callback, otherwise an exception is thrown.
- The amount of items returned from the callback cannot exceed the `limit` value, otherwise an exception is thrown.
```
--------------------------------
### Declarative ComboBox Data Loading
Source: https://github.com/jmix-framework/jmix-ui-samples-2/blob/main/src/main/resources/io/jmix/uisamples/view/flowui/components/combobox/itemsquery/combobox-items-query-en.html
Configuring the ComboBox to load data using the itemsQuery XML element.
```APIDOC
## Declarative itemsQuery Configuration
### Description
Defines a JPQL query to fetch scalar values for the ComboBox component.
### Attributes
- **escapeValueForLike** (boolean) - Optional - Enables searching for values containing special symbols (%, \). Default is false.
- **searchStringFormat** (string) - Optional - A string containing a variable to be substituted by StringSubstitutor.
### Nested Elements
- **query** (string) - Required - Contains the JPQL query to execute.
```
--------------------------------
### Configure OrderItem Detail View Edit Action
Source: https://github.com/jmix-framework/jmix-ui-samples-2/blob/main/src/main/resources/io/jmix/uisamples/view/flowui/cookbook/composition7/composition-info-panel-en.md
This handler configures the edit action for the OrderItem data grid. It passes a reference to the updateInfoPanel() method from the parent view to the OrderItemDetailView, allowing the nested view to notify the parent of changes.
```java
@Subscribe("itemsDataGrid")
public void itemsDataGridEditActionViewConfigurer(final EditAction.ViewConfigurer viewConfigurer) {
viewConfigurer.addParameter("parentInfoPanelUpdateListener", this::updateInfoPanel);
}
```