SAP UI5 footer is not displaying

[former_member677184]

I have a view containing a SplitContainer inside an IconTabBar:

kepernyokep-2021-12-03-160503.jpg

The SplitContainer has a master page, which is supposed to have a footer:

kepernyokep-2021-12-03-160249.jpg

The footer, however, does not show for some reason:

kepernyokep-2021-12-03-160322.jpg

Is this related to the viewport, or are there any missing properties?

[ThorstenHoefer]

Please check following example and remove first all attributes of the page which are not required.

https://sapui5.hana.ondemand.com/#/entity/sap.m.Page/sample/sap.m.sample.Page/code

[former_member677184]

Hi Thorsten!

I checked the example. Unfortunately, this doesn't seem to have resolved the issue either.

kepernyokep-2021-12-07-174533.jpg

[former_member221786]

Hi Attila,

I think your problem is that your are using controls for aggregations where they are not fully supported.

I would suggest you use a Page as direct subchild of the App Control like:

<App id="app">
	<Page id="page">
		<content>
			<IconTabBar stretchContentHeight="true">			
				...
			</IconTabBar>
		</content>
	</Page>
</App>

Also I would get rid of the height="100%" properties in your views as they don't seem necessary.

Don't know about the views inside the IconTabFilter content aggregation maybe they cause problems too.
So if the above things don't help you could switch to a fragment instead of a nested view and have the SpliContainer control inserted directly into the content aggregation of the IconTabFilter.

Hope this leads you to a solution.

[former_member677184]

Hi Sebastian!

I have tried using a page as direct subchild of the app control and removing the height="100%" properties in my views. Unfortunately, the footer is still not 100% in the viewport.

kepernyokep-2021-12-07-173525.jpg

[former_member779373]

Hey there!

When I want to use a footer in my page, I always use the "semantic" library and develop all my contents inside semantic tags, like this:

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
	controllerName="controllerName" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:semantic="sap.m.semantic">
	<semantic:FullscreenPage id="page" semanticRuleSet="Optimized" navButtonPress="onNavBack" showNavButton="true">
		<semantic:content>
		   <!-- YOUR BODY CONTENT HERE !-->
		</semantic:content>
		<semantic:customFooterContent>
	           <!-- YOUR FOOTER CONTENT HERE !-->
		</semantic:customFooterContent>
	</semantic:FullscreenPage>
</mvc:View>

This works, as you declare a custom footer content.

More information:

Semantic Fullscreen Page: https://sapui5.hana.ondemand.com/#/api/sap.m.semantic.FullscreenPage%23methods/Summary

Semantic Page: https://sapui5.hana.ondemand.com/#/api/sap.m.semantic.SemanticPage%23aggregations

[former_member779373]

Or you can reference this question:

https://answers.sap.com/questions/12961161/sap-ui5-page-footer-is-not-displaying.html

[former_member677184]

Hey there!

I am not completely sure what you mean 🙂 I have updated my code like so:

<semantic:MasterPage showFooter="true" floatingFooter="true" title="Activity Trees" id="master" backgroundDesign= "List" class="sapUiResponsivePadding--header sapUiResponsivePadding--content sapUiResponsivePadding--footer sapUiResponsivePadding--floatingFooter"> <List id="templateTreeList" mode="SingleSelectMaster" selectionChange=".onSelect" > </List> <semantic:customFooterContent> <OverflowToolbarButton icon="sap-icon://settings" text="Settings" press="onPress"/> <OverflowToolbarButton icon="sap-icon://video" text="Video" press="onPress"/> </semantic:customFooterContent> </semantic:MasterPage>Unfortunately it still does not seem to work

[former_member677184]

kepernyokep-2021-12-03-165630.jpg

[former_member779373]

Your <OverflowToolbarButton> tag can be a <Button> inside a <OverflowToolbar>:

<OverflowToolbar>
	<Button></Button>
</OverflowToolbar>

Your <List> must bem inside a <semantic:content>:

<semantic:content>
	<List>
	</List>
</semantic:content>

Try it please.

[former_member779373]

I think the error is inside the footer (both semantic and regular footer), use <OverflowToolbar> and inside it put your regular buttons and/or controls.

[former_member779373]

I have a sample code here for a page, you can try it:

<App>
	<pages>
		<Page title="{i18n>title}">
			<Panel id="panelFilters">
				<f:SimpleForm maxContainerCols="4" editable="true" layout="ResponsiveGridLayout" labelSpanL="4" labelSpanM="4" emptySpanL="0" emptySpanM="0"
						columnsL="2" columnsM="2" title="Filters">
					<f:content></f:content>
				</f:SimpleForm>
			</Panel>
			<VBox>
				<l:Grid defaultSpan="L12 M12 S12"></l:Grid>
			</VBox>
			<Panel id="panelList">
				<VBox>
					<Table id="item" growing="true" mode="MultiSelect" delete="deleteRow"></Table>
					<layoutData>
						<l:GridData span="L12 M12 S12"/>
					</layoutData>
				</VBox>
			</Panel>
			<footer>
				<OverflowToolbar>
					<ToolbarSpacer/>
					<Button id="btn1" text="Button 1" press="handle1">
						<layoutData>
							<OverflowToolbarLayoutData moveToOverflow="false"/>
						</layoutData>
					</Button>
					<Button id="btn2" type="Accept" text="Button2" press="handle2">
						<layoutData>
							<OverflowToolbarLayoutData moveToOverflow="false"/>
						</layoutData>
					</Button>
				</OverflowToolbar>
			</footer>
		</Page>
	</pages>
</App>

[former_member677184]

I keep getting an error saying: The "OverflowToolbar" class is under the "customFooterContent" aggregation and must match the "Button" type.

kepernyokep-2021-12-03-172827.jpg

[former_member779373]

Try it without the semantic tags, like the code I sent.

[former_member677184]

Unfortunately I am not able to put the App tags within this view file, because it is a sub-view of the App