Tabsheet lazy loading example with data data containers


Can some please direct me to tabsheet lazy tab loading example with data containers? I have checked Master-Detail form by enabling lazy flag for child tabs, that also loads childs on selecting record from table.

I have to develop a screen for an entity with around 11 children and grandchildren tables which will be very heavy and slow without lazy loading.

The following example shows how to display Orders on a lazy tab of the Customer master-detail screen.
The data model is as usual: Order has a many-to-one reference to Customer.

<window xmlns=""
        <collection id="customersDc"
            <fetchPlan extends="_base"/>
            <loader id="customersDl">
                    <![CDATA[select e from Customer e]]>
        <instance id="customerDc"
            <fetchPlan extends="_base"/>
        <!-- this is lazily loaded data -->
        <collection id="ordersDc" class="">
            <fetchPlan extends="_base"/>
            <loader id="ordersDl">
                <query><![CDATA[select e from Order_ e where e.customer = :customer]]></query>
        <!-- remove automatic loading -->
<!--        <dataLoadCoordinator auto="true"/>-->
        <screenSettings id="settingsFacet" auto="true"/>
    <!-- ... -->
           <!-- ... -->
            <vbox id="editBox" height="100%" margin="false,false,false,true" expand="tabSheet" spacing="true">
                <tabSheet id="tabSheet">
                    <tab id="mainTab" caption="Main" margin="true">
                        <scrollBox id="fieldGroupBox">
                            <form id="form" dataContainer="customerDc">
                                <column width="350px">
                                    <textField id="nameField" property="name"/>
                                    <textField id="emailField" property="email"/>
                    <tab id="ordersTab" caption="Orders" lazy="true" margin="true" expand="ordersTable">
                        <table id="ordersTable" width="100%" dataContainer="ordersDc">
                                <action id="create" type="create"/>
                                <action id="edit" type="edit"/>
                                <action id="remove" type="remove"/>
                            <buttonsPanel alwaysVisible="true">
                                <button id="ordersTableCreateBtn" action="ordersTable.create"/>
                                <button id="ordersTableEditBtn" action="ordersTable.edit"/>
                                <button id="ordersTableRemoveBtn" action="ordersTable.remove"/>
                                <column id="num"/>
                                <column id="date"/>
    <!-- ... -->
public class CustomerBrowse extends MasterDetailScreen<Customer> {

    private CollectionContainer<Customer> customersDc;
    private CollectionLoader<Customer> customersDl;
    private CollectionLoader<Order> ordersDl;

    private boolean ordersTabInitialized;

    public void onBeforeShow(BeforeShowEvent event) {
        // on screen opening, trigger loaders selectively

    @Subscribe(id = "customersDc", target = Target.DATA_CONTAINER)
    public void onCustomersDcItemChange(InstanceContainer.ItemChangeEvent<Customer> event) {
        // refresh data on lazy tab if it was selected by the user
        if (ordersTabInitialized) {

    public void onTabSheetSelectedTabChange(TabSheet.SelectedTabChangeEvent event) {
        if (event.getSelectedTab().getName().equals("ordersTab") && !ordersTabInitialized) {
            ordersTabInitialized = true;


            // get components located on the lazy tab
            Table<Order> ordersTable = (Table) getWindow().getComponentNN("ordersTable");
            CreateAction<Order> orderCreateAction = (CreateAction) ordersTable.getActionNN("create");
            // initalize new order with current cuatomer
            orderCreateAction.setInitializer((Order order) -> {
            // enable creating orders only for already existing customers
            orderCreateAction.addEnabledRule(() -> !creating);

    private void refreshOrders() {
        ordersDl.setParameter("customer", customersDc.getItemOrNull());

The entire project: (87.9 KB)


1 Like

Thanks Konstantin for detailed reply and demo project.

Calling refreshOrders() in onCustomersDcItemChange is the point here. I was unable to figure that out.