What is jmix-help-dialogs?

This Claude skill streamlines the development of user assistance features in Jmix applications by generating standardized help dialogs. It provides comprehensive code snippets including XML UI descriptors, Java controller logic, and localized message properties to implement the info-icon (ⓘ) pattern. By automating the boilerplate for contextual help, it enables developers to quickly add user guidance to complex forms and workflow-heavy views, significantly improving the end-user experience and reducing the learning curve for enterprise software.

When should I use jmix-help-dialogs?

jmix-help-dialogs is useful in the following scenarios: • Case 1: Adding contextual help to complex data entry forms to explain specific field requirements or business rules. • Case 2: Implementing step-by-step workflow guidance in list views where multiple actions (e.g., SMS, Booked, Visit) might be non-obvious to new users. • Case 3: Standardizing the UI/UX pattern for 'info-circle' popup dialogs across an entire Jmix-based enterprise application. • Case 4: Creating multi-language user documentation directly within the application interface using Jmix message bundles for international support.

name	Jmix Help Dialogs
description	Add info icon buttons with help dialogs to Jmix views. Use this skill when adding contextual help to list views or complex forms. Use this skill when implementing the info icon pattern with message dialogs. Use this skill when creating user guidance for workflow-heavy views.

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:

Opening line: What the view shows/does
Bullet points: One for each main action, starting with the button/action name
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

jmix-help-dialogs

When & Why to Use This Skill

Use Cases