Skip to Content

Issue with Toolbar in footer

Hi All,

I have tried to put Toolbar control in footer control in UI5 code. It is throwing an error message as below. Could you please let me know what's the mistake I was made here

Code:

<Page

title="Centered Title"

class="sapUiContentPadding"

showNavButton="true" >

<headerContent>

<Button icon="sap-icon://action" tooltip="Share" />

</headerContent>

<content>

<VBox>

<Text text="Lorem ipsum dolor st amet,

consetetur sadipscing elitr," />

</VBox>

</content>

<footer>

<Toolbar>

<ToolbarSpacer/>

<Button text="Accept" type="Accept" />

<Button text="Reject" type="Reject" />

<Button text="Edit" />

<Button text="Delete" />

</Toolbar>

</footer>

</Page>

Error:

sap-ui-core.js:134 Uncaught Error: "Element sap.m.Toolbar#__toolbar0" is not valid for aggregation "footer" of Element sap.m.Page#__page0

Thanks in advance

Thanks

Padma M

Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

4 Answers

  • Best Answer
    Posted on Jul 29, 2016 at 06:32 AM

    Hi Padma,

    Which version of UI5 are you using?

    In console, can you try this and let us know the version:

    sap.ui.version
    

    Regards,

    Sai.

    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Jul 29, 2016 at 06:37 AM

    Hi,

    Its strange as Toolbar is a valid aggregation of Footer - JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.m.Page

    Created a plunker which is working fine with footer having a toolber - https://plnkr.co/edit/UP0B792TLHyMfQdvVevk?p=preview

    Check it out

    Thanks,

    Chandan

    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Jul 29, 2016 at 06:36 AM

    Hi Padma,

    For Toolbar aggregation is Content. Place the Toolbar spacer code in Content tag.

    <content>

    <ToolbarSpacer/>

    <Button text="Accept" type="Accept" />

    <Button text="Reject" type="Reject" />

    <Button text="Edit" />

    <Button text="Delete" />

    </content>

    Regards,

    Viswa

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Jul 29, 2016 at 07:08 AM

    Hi Padma,

    Please try with overflowtoolbar instead of toolbar, it may help.

    Below sample code

    <footer>

    <OverflowToolbar >

    <ToolbarSpacer/>

    <Button type="Accept" text="Accept">

    <layoutData>

    <OverflowToolbarLayoutData moveToOverflow="false" /></layoutData>

    </Button>

    <Button type="Reject" text="Reject">

    <layoutData>

    <OverflowToolbarLayoutData moveToOverflow="false" /></layoutData>

    </Button>

    </OverflowToolbar>

    </footer>


    Regards,

    Satya

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.