Tabbed Application Mode

This add-on allows you to open views in separate tabs within the main view, allowing users to simultaneously access multiple views in a single browser tab and switch between them easily. It also supports opening multiple views within the same main view tab, creating a view stack represented by breadcrumbs.

tabbed mode overview

Installation

This add-on requires the Enterprise subscription. If you don’t have the subscription, see the Enterprise Trial section for how to get a trial version.

For automatic installation, use a dedicated project template:

project template

For manual installation:

  1. Make sure the premium repository is defined in build.gradle:

    repositories {
    // ...
    maven {
        url = 'https://global.repo.jmix.io/repository/premium'
        credentials {
            username = rootProject['premiumRepoUser']
            password = rootProject['premiumRepoPass']
        }
    }

  2. Add the following dependency to your build.gradle:

    implementation 'io.jmix.tabbedmode:jmix-tabbedmode-flowui-starter'

  3. Change base class of the MainView.java from StandardMainView to StandardTabbedModeMainView.

    import io.jmix.tabbedmode.app.main.StandardTabbedModeMainView;

@Route("")
@ViewController(id = "MainView")
@ViewDescriptor(path = "main-view.xml")
public class MainView extends StandardTabbedModeMainView {
}

  4. In the main-view.xml, change the xmlns attribute value of the mainView element to use the XSD schema from the add-on:

    <mainView xmlns="http://jmix.io/schema/tabmod/main-view"
          title="msg://MainView.title">

    Then replace initialLayout with the following workArea definition:

    <workArea id="workArea"
          classNames="jmix-work-area">
    <mainTabSheet id="mainTabSheet"
                  classNames="jmix-main-tabsheet"
                  tabsDraggable="true"
                  width="100%" height="100%">
        <actions>
            <action id="closeThisTabAction" type="tabmod_closeThisTab"/>
            <action id="closeOthersTabsAction" type="tabmod_closeOtherTabs"/>
            <action id="closeAllTabsAction" type="tabmod_closeAllTabs"/>
        </actions>
    </mainTabSheet>
    <initialLayout id="initialLayout"
                   classNames="jmix-initial-layout"
                   width="100%" height="100%">
    </initialLayout>
</workArea>