Search code examples
sapui5

Overflow Toolbar in Nested Views Only Visible When Scrolled Down


I have a view in UI5 app that contains two nested views:

<mvc:View>
    <Page showNavButton="true" navButtonPress="onNavBack">
        <content>
            <Toolbar>
                <ToolbarSpacer/>
                <SegmentedButton id="A" selectedKey="B" select="handel">
                    <items>
                        <SegmentedButtonItem key="C" text="C"/>
                        <SegmentedButtonItem key="D" text="D"/>
                    </items>
                </SegmentedButton>
                <ToolbarSpacer/>
            </Toolbar>
            <mvc:XMLView viewName="F.View1"></mvc:XMLView>
            <mvc:XMLView viewName="G.View2"></mvc:XMLView>
        </content>
    </Page>
</mvc:View> 

View1 contains a table that is scrollable and must contain an overflow toolbar. View2 should not contain the overflow toolbar.

However, when I add the overflow toolbar to View1, it is present at the very bottom when the table is scrolled all the way to the last item. The only way possible seems like to add it to the parent view in the footer but that adds it to the View2 as well. Any idea how to add this overflow toolbar to View1 alone?

View1 looks something like this:

<mvc:View>
    <Page showHeader="false">
        <content>
            <Table>
            </Table>
        </content>
        <OverflowToolbar>
            <ToolbarSpacer/>
            <Button type="Accept" text="Save" press="onSave" enabled="saveEnabled"/>
            <Button text="Cancel" type="Reject"/>
        </OverflowToolbar>
    </Page>
</mvc:View>

Solution

  • In View1, you're missing the <footer> aggregation tags in which the toolbar should be wrapped.

    <mvc:View
      xmlns:mvc="sap.ui.core.mvc"
      xmlns="sap.m"
    >
      <Page showHeader="false">
        <content>
          <Table>
          </Table>
        </content>
        <footer>
          <OverflowToolbar>
            <ToolbarSpacer/>
            <Button type="Accept" text="Save" press="onSave" enabled="saveEnabled"/>
            <Button text="Cancel" type="Reject"/>
          </OverflowToolbar>
        </footer>
      </Page>
    </mvc:View>
    

    Otherwise, the toolbar will be added to the default aggregation <content> which is why you had to scroll down to see the toolbar.