SAPUI5 Semantic Page, button in footer content

I am developing of SAPUI5 application by using semantic page. I plan to add a button in footer content of page. But it display me the following error

For scenarios involving fragments and nested views, your project must contain an index.html like or a localIndex.html file containing the data-sap-resourceroots attribute. Currently, your project does not contain such files.found in negative cache: 'sap/f/semantic/customFooterContent.js' from https://sapui5.hana.ondemand.com/1.56.4/resources/sap/f/semantic/customFooterContent.js: For scenarios involving fragments and nested views, your project must contain an index.html like or a localIndex.html file containing the data-sap-resourceroots attribute. Currently, your project does not contain such files.

The following is my code of the page

<semantic:SemanticPage id="ViewCartPage" headerPinnable="false" toggleHeaderOnTitleClick="false" preserveHeaderStateOnScroll="false" showFooter="true">
    <semantic:titleHeading>
            <Button id="continueShoppingButton" press="onContinueShoppingPressed" text="Continue Shopping" type="Transparent"/>
    </semantic:titleHeading>

    <!-- Header Content -->
    <semantic:headerContent>
        <Label class="CartHeader" text="Your Cart"  width="100%" />
        <FlexBox alignItems="Start" justifyContent="SpaceBetween">
            <items>
                <Panel backgroundDesign="Transparent">
                    <content>
                        <core:Icon id="shoppingCartIcon" height="3rem" size="3rem" src="sap-icon://cart" alt="{i18n>xfld.keyWord2}"/>
                    </content>
                </Panel>
                <Panel backgroundDesign="Transparent">
                    <content>
                        <Label text="Customer : " width="100%" id="lbl1_Customer"/>
                        <Label class="OrderContent" text="{/objectDescription/customer}" width="100%" id="lbl2_Customer"/>
                    </content>
                </Panel>
                <Panel backgroundDesign="Transparent">
                    <content>
                        <Label text="Salesperson : " width="100%" id="lbl1_Salesperson"/>
                        <Label class="OrderContent" text="{/objectDescription/salesperson}" width="100%" id="lbl2_Salesperson"/>
                    </content>
                </Panel>
                <Panel backgroundDesign="Transparent">
                    <content>
                        <Label text="Number of Items : " width="100%" id="lbl1_NoOfItems"/>
                        <Label class="OrderContent" text="{/objectDescription/items}" width="100%" id="lbl2_NoOfItems"/>
                    </content>
                </Panel>
                <Panel backgroundDesign="Transparent" class="OrderColumn">
                    <content>
                        <Label text="Total Amount : " width="100%" id="lbl1_TotalAmount"/>
                        <Label class="OrderContent" text="{/objectDescription/amount}" width="100%" id="lbl2_TotalAmount"/>
                    </content>
                </Panel>
                <!--<ObjectStatus text="Continue Shopping" state="{/objectDescription/status}"/>-->
            </items>
        </FlexBox>
    </semantic:headerContent>

    <!-- Content -->
    <semantic:content>
        <Table id="idProductsTable" inset="false" items="{path:'/ProductCollection'}">
            <columns>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="Name"/>
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="Quantity"/>
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="UOM"/>
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="Price"/>
                </Column>
                <Column minScreenWidth="Tablet" demandPopin="true">
                    <Text text="Subtotal"/>
                </Column>
                <Column id="buttonColumn" width="15%" minScreenWidth="Tablet" demandPopin="true" popinDisplay="WithoutHeader" hAlign="Right" class="sapMTableContentMargin">
                    <header>
                        <Label id="cartItemDelete" text="Cancel" visible="{= ${device>/system/phone}}"/>
                    </header>
                </Column>
            </columns>
            <items>
                <ColumnListItem vAlign="Middle">
                    <cells>
                        <ObjectIdentifier title="{Name}" text="{ProductId}"/>
                        <Input value="{Quantity}" width="70px"/>
                        <Text text="{UOM}"/>
                        <Text text="{Price}"/>
                        <Text text="{Subtotal}"/>
                        <!-- Add Button -->
                        <Button id="addToCartButton" tooltip="Delete Item" icon="sap-icon://decline" press="deleteCartItemPressed" type="Transparent"/>
                    </cells>
                </ColumnListItem>
            </items>
        </Table>
    </semantic:content>
    <semantic:customFooterContent>
            <Button id="confirmOrder" text="Confirm" press="onConfirmOrder"/>
    </semantic:customFooterContent>
</semantic:SemanticPage>

The aggregation for sap.f.semantic footer used is wrong and it should be one of the below

https://sapui5.hana.ondemand.com/#/api/sap.f.semantic.SemanticPage

<!-- Custom Footer Content-->
        <semantic:footerCustomActions>
            <Button text="Save" />
            <Button text="Cancel" />
        </semantic:footerCustomActions>