Jmix Help Dialogs

When to use this skill

• When adding contextual help to list views or detail views
• When explaining workflows to users (e.g., planning views with multiple actions)
• When implementing the info icon (ⓘ) pattern with popup dialogs
• When views have non-obvious functionality that needs explanation

Instructions

XML Setup

Add an info button in the button panel's endSlot:

<hbox id="buttonsPanel" classNames="buttons-panel">
    <startSlot>
        <button id="editButton" action="dataGrid.editAction"/>
        <button id="actionButton" action="dataGrid.someAction"/>
    </startSlot>
    <middleSlot/>
    <endSlot>
        <button id="infoButton" icon="vaadin:info-circle-o"
                themeNames="tertiary-inline"/>
    </endSlot>
</hbox>

Java Implementation

import com.vaadin.flow.component.ClickEvent;
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Span;
import io.jmix.flowui.Dialogs;
import io.jmix.flowui.view.MessageBundle;

@Autowired
private Dialogs dialogs;

@ViewComponent
private MessageBundle messageBundle;

@Subscribe("infoButton")
public void onInfoButtonClick(final ClickEvent<Button> event) {
    dialogs.createMessageDialog()
            .withHeader(messageBundle.getMessage("helpDialog.header"))
            .withContent(createHelpContent())
            .withResizable(true)
            .withWidth("500px")
            .open();
}

private Component createHelpContent() {
    Span content = new Span(messageBundle.getMessage("viewName.helperText"));
    content.getStyle().set("white-space", "pre-line");
    return content;
}

Message Properties

Add to messages_en.properties:

dk.merrald.sm.view.viewpackage/helpDialog.header=How to use this view
dk.merrald.sm.view.viewpackage/viewName.helperText=This view shows...\n\n• First action explanation\n• Second action explanation\n• Third action explanation

Add to messages_da_DK.properties:

dk.merrald.sm.view.viewpackage/helpDialog.header=Sådan bruger du denne oversigt
dk.merrald.sm.view.viewpackage/viewName.helperText=Denne oversigt viser...\n\n• Første handling\n• Anden handling\n• Tredje handling

Helper Text Content Guidelines

Structure help text with:

1. Opening line: What the view shows/does
2. Bullet points: One for each main action, starting with the button/action name
3. Workflow order: List actions in the order users typically perform them

Example:

This view shows all horses sorted by next vaccination date.

• Click "SMS" to generate a message template for your veterinarian
• Select horses and click "Booked" when you schedule an appointment
• Click "Visit" after the visit is completed to record it and calculate the next due date

Styling Notes

• Use themeNames="tertiary-inline" for a subtle, non-prominent button
• Use icon="vaadin:info-circle-o" for the standard info icon
• Place in endSlot to position at the right side of the button panel