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>