UI : Is it possible to setup a Footer for all application?

Support
#1

UI : Is it possible to setup a Footer for all application ?
Not for login.
But for the internal view ?

1 Like
#2

Hello!

Could you clarify where this footer should be?

Every View should have it’s own Footer? For instance:

image

Or whole application should have a Footer:

image

#3

Ciao Roman,

in my case whole application should have a Footer.
so I’m talking about the 2cond
but give two examples could be usefull for many

I think we need to create a custom css for the teme on the .footer class
my personal test :upside_down_face:

main-view.xml


<drawerLayout>
            <section id="section" classNames="jmix-main-view-section">
                <footer id="footer" classNames="**DISABLEcustomFooter**">
                </footer>
            </section>
        </drawerLayout>

in your
appname.css

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

But it doesn’t work
I’d prefer clean solution.
Thanks
Stefano

#4

By default MainView in Jmix applications based on App Layout | Components | Vaadin Docs. This component provides side panel, navigation bar and supports mobile devices out of the box.

I think it is not possible to customize this component by footer, but you can create your own layout for MainView. You can create footer, top bar, side menu, but you will have to support this view on mobile devices yourself.

Here is the demo project with a custom main layout: custom-main-view-layout.zip (107.4 KB)

It has custom CSS styles and custom LayoutLoaderConfig to correctly load layout from main view.

image

The first case is when every view has its own footer.
For application views (such as UserListView and so on), you can create a mixin that will create and attach the Footer component. For instance:

FooterMixin 
public interface FooterMixin {

    default Footer createFooter() {
        Footer footer = new Footer();
        footer.setHeight("5em");
        footer.setWidthFull();
        footer.setClassName("view-footer");
        return footer;
    }

    default Footer attachFooter() {
        Footer footer = createFooter();
        getContent().add(footer);
        return footer;
    }

    ViewLayout getContent();
}
UserListView 
public class UserListView extends StandardListView<User> implements FooterMixin {

    @Subscribe
    private void onInit(InitEvent event) {
        Footer footer = attachFooter();
        footer.add(new Span("Footer User list view"));
    }
}

To add a footer for views from add-ons (such as security and data tools), you will need to add the footer while the view is loaded. For instance:

Custom ViewLoader 
public class AppViewLoader extends ViewLoader {

    @Override
    public void loadComponent() {
        super.loadComponent();

        Component rootComponent = resultComponent.getContent();
        if (resultComponent instanceof LoginView) {
            // skip view
            return;
        }

        if (rootComponent instanceof HasComponents container) {
            container.add(createFooter());
        }
    }

    protected Footer createFooter() {
        Footer footer = new Footer();
        footer.setId("view-footer");
        footer.setWidthFull();
        footer.setHeight("5em");
        footer.setClassName("view-footer");
        return footer;
    }
}
Custom LayoutLoaderConfig 
@Order(JmixOrder.HIGHEST_PRECEDENCE)
@Component("app_AppLayoutLoaderConfig")
public class AppLayoutLoaderConfig extends LayoutLoaderConfig {

    public AppLayoutLoaderConfig() {
        viewLoader = AppViewLoader.class;
    }
}

Check this demo project: demo-footer.zip (103.6 KB)

#5

Thanks for the solution I’m going to try it as soon as possibile
:slight_smile: