Header and Footer Fragments in SAPUI5

Question

I'm new in SAPUI5, and I'm wondering if is it possible to have my header and footer as a Fragments? And if it's possible then how?

This is my Worklist.view.xml:

<mvc:View controllerName="opensap.manageproducts.ManageProducts.controller.Worklist" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"
    xmlns:semantic="sap.f.semantic" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core">
    <semantic:SemanticPage id="page" headerPinnable="false" toggleHeaderOnTitleClick="false">
        <core:Fragment fragmentName="opensap.manageproducts.ManageProducts.view.Header" type="XML"/>
        <semantic:content>
            <IconTabBar id="iconTabBar" select="onQuickFilter" expandable="false" applyContentPadding="false">
                <items>
                    <IconTabFilter key="all" showAll="true" count="{i18n>worklistFilterProductsAllCount}" text="{i18n>worklistFilterProductsAll}"/>
                    <IconTabSeparator/>
                    <IconTabFilter key="cheap" icon="sap-icon://waiver" iconColor="Positive" count="{worklistView>/cheap}" text="{i18n>worklistFilterCheap}"/>
                    <IconTabFilter key="moderate" icon="sap-icon://loan" iconColor="Critical" count="{worklistView>/moderate}"
                        text="{i18n>worklistFilterModerate}"/>
                    <IconTabFilter key="expensive" icon="sap-icon://money-bills" iconColor="Negative" count="{worklistView>/expensive}"
                        text="{i18n>worklistFilterExpensive}"/>
                </items>

And here's my fragment Header.fragment.xml:

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:semantic="sap.f.semantic">
        <Title text="Hello world" level="H2"/>
</core:FragmentDefinition>

It shows me an empty Header.

Answer 1

I don't think the problem is the fragment, as long as this opensap.manageproducts.ManageProducts.view.Header is the location of you fragment it should work.

The problem is the header and footer. You are using a SemanticPage, see the API Reference: https://sapui5.hana.ondemand.com/#/api/sap.f.semantic.SemanticPage%23aggregations

The available aggregations are headerContent, footerCustomActions, footerMainAction.

It depends on what you want to show in you header and footer.

For example, if it's only the title you should use the titleHeading, titleExpandedContent etc. Than it doesn't really make sense to put it inside a fragment, as the code will only be:

<semantic:titleHeading>
  <Title text="{/title}" />
</semantic:titleHeading>

But if you want to define the headerContent for example, it will make more sense to, because it will go from:

        <semantic:headerContent>
            <layout:HorizontalLayout allowWrapping="true">
                <layout:VerticalLayout class="sapUiMediumMarginEnd">
                    <ObjectAttribute title="Functional Area" text="{/objectDescription/category}"/>
                    <ObjectAttribute title="Cost Center" text="{/objectDescription/center}"/>
                    <ObjectAttribute title="Email" text="{/objectDescription/email}"/>
                </layout:VerticalLayout>

                <layout:VerticalLayout>
                    <ObjectAttribute title="Availability"/>
                    <ObjectStatus text="In Stock" state="{/objectDescription/status}" />
                </layout:VerticalLayout>
            </layout:HorizontalLayout>
        </semantic:headerContent>

to:

        <semantic:headerContent>
            <core:Fragment fragmentName="opensap.manageproducts.ManageProducts.view.Header" type="XML"/>
        </semantic:headerContent>

So just to answer you question, yes it's possible to use a fragment for the header/footer, but what you're missing is the correct aggregation. For some examples you can also look at this link:https://sapui5.hana.ondemand.com/#/entity/sap.f.semantic.SemanticPage