How do I combine a ShellBar with Page or DynamicPage?

Question

Code sample: https://plnkr.co/edit/KPLJXzI4n1L0fG4Z

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:f="sap.f">
  <App>
    <pages>
      <f:ShellBar />
      <PageOrDynamicPage>
        <!-- ... -->
      </PageOrDynamicPage>
    </pages>
  </App>
</mvc:View>

The last row of list / responsive table is off screen. ^{100th item not visible.}

I have also tried adding the ShellBar as the first content of the root view element defined in App.view.xml, which results in a double vertical scroll bar.

I also tried putting a Shell around the App instead of a separate ShellBar, but the bar is not showing: https://plnkr.co/edit/Tmk6vd5CF4IEZC2y.

Answer 1

The issue is that sap.f.ShellBar is a bar with a fixed height. It will push the content down if the sibling (e.g. sap.m.Page) tries to be 100% in height. This can be avoided by adding the content to a separate sap.m.NavContainer.

sap.f.ShellBar with sap.m.Page

Sample: https://plnkr.co/edit/LkGOQJt0xd6kNVuX

I assume you'd like to have the ShellBar always visible on top. The above sample puts the bar in the root view, so that it's always there no matter where the user navigates to.

By leveraging the sap.m.NavContainer, no content is off screen:

sap.f.ShellBar with sap.f.DynamicPage

Sample: https://openui5.hana.ondemand.com/entity/sap.f.ShellBar/sample/sap.f.sample.ShellBarWithFlexibleColumnLayout

It utilizes sap.f.FlexibleColumnLayout, sap.f.DynamicPage, and sap.f.routing.Router to align with the current Fiori design guidelines. Internally, FlexibleColumnLayout makes use of the sap.m.NavContainer too for each one of its three columns.