Button does not appear in footer after run the application?

[Former Member]

Dear Experts,

     I am doing the customizing and extending the standard application in the system exercise openSAP week one course. I am trying to extend the myBenefit standard apps by adding some buttons on the footer but it shows nothing in footer as i shown in my second photo. Anything wrong the button which i added as shown in the blue square box?

     Very appreciated to those reply my problem encountered. Kindly suggest solution if you have. Thanks

Regards,

Loh

[Former Member · Accepted solution]

Hi Santhosh, as u asked me refer to SAPUI5 Explored, i have followed the guidance and it shown in the picture as below but it also failed to work. Is there i applied wrongly?

[santhu_gowdaz · Accepted solution]

where is the <content>, Add like this, it will work.

<footer id="detailFooter">

    <Toolbar id="detailToolbar">

	<content>
	<ToolbarSpacer id="toolbarSpacer">
	</ToolbarSpacer>
	<Button type="Accept" text="Approve" press="onApprove"></Button>
	<Button type="Reject" text="Reject" press="onReject"></Button>
	</content>

    </Toolbar>

</footer>

[Former Member · Accepted solution]

Hi Santhosh, i have tried it but the button still dont appear in the footer. Thanks

[santhu_gowdaz · Accepted solution]

Strange!! may be wrong in some thing not in footer bar.

[Former Member · Accepted solution]

Hi Santhosh, if followed the way you guided me in the web ide local host, it worked. However it doesn't work in the system exercise offered by the openSAP. So in your opinion, you think there is a problem to the system exercise?

[santhu_gowdaz · Accepted solution]

use this templete,

<mvc:View

    controllerName="com.xyz.view.Detail"

    xmlns="sap.m"

    xmlns:core="sap.ui.core"

    xmlns:mvc="sap.ui.core.mvc"

    xmlns:l="sap.ui.layout"

    xmlns:f="sap.ui.layout.form">

    <Page

        id="detailPage"

        navButtonPress="onNavBack"

        title="{i18n>Title}"

        showNavButton="{device>/isPhone}">

        <content>

               <IconTabBar

                id="idIconTabBar"

                expanded="{device>/isNoPhone}">

                <items

                    id="Items">

                    <IconTabFilter text="{i18n>header}">

                        <content>

                            <f:SimpleForm

                                id="iconTabFilter1form"

                                minWidth="1024"

                                editable="false"

                                layout="ResponsiveGridLayout"

                                labelSpanL="3"

                                labelSpanM="3"

                                emptySpanL="4"

                                emptySpanM="4"

                                columnsL="1">

                                <f:content>

                                    <Label

                                        id="label1"

                                        text="{label}">

                                    </Label>

                                    <Text

                                        id="text1"

                                        text="{text}"

                                        maxLines="0">

                                    </Text>

                                        <core:ExtensionPoint

                                        name="extIconTabFilterForm1"/>

                                </f:content>

                            </f:SimpleForm>

                        </content>

                    </IconTabFilter>

                    <IconTabFilter text="{i18n>Details}">

                        <content>

                        </content>

                    </IconTabFilter>

                    <core:ExtensionPoint

                        name="extIconTabFilter"/>

                </items>

            </IconTabBar>

            <core:ExtensionPoint

                name="extDetail"/>

        </content>

        <footer

            id="Footer">

            <Toolbar id="Toolbar">

                <content>

                    <ToolbarSpacer

                        id="toolbarSpacer">

                    </ToolbarSpacer>

                     <Button type="Accept" text="Approve" press="onApprove"></Button>

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

                </content>

            </Toolbar>

        </footer>

    </Page>

</mvc:View>

[Former Member · Accepted solution]

Hi Santhosh, u meant replace the code in S2 view with the code u given me?

[santhu_gowdaz · Accepted solution]

take back up your application and modify your s2 view like above template.

[Former Member]

Great, Nandish. May i know the coding for the controller part, is it you only refer to the EXPLORED in the SAPUI5 SDK there as the link shown in below? Or anywhere you also refer to? Because i am still wondering how to modify or add some code in the controller part. Any suggestions from you?

https://sapui5.netweaver.ondemand.com/sdk/#content/Overview.html

Thanks and appreciated.

Regards,

Loh

[Former Member]

Hi Nandish, the screen shot as shown in below showed the controller after extended. Which line start should i added the code that you gave me? And the 2nd question is after i deleted the double slash by each line in OInit function, it showed me some errors as shown in 2nd picture and i have no idea why it will like that? Kindly suggest me any solutions and reasons if you know it. Very thanks and appreciated.

[nandishm]

Just add code below line 8.

I didnt understand your second error, can you share code of init() method.

[Former Member]

Hi Nandish, i didnt see any init() method in the S2 controller, only onInit() method shown as previous

[nandishm]

Hi LOH CHUN WOOI

     Add code in oninit() method only.

[Former Member]

Hi Nandish, it failed to work

[nandishm]

can you paste code

[Former Member]

Hi Nandish, the first 2 photo appeared a lot of errors after i added the given code in S2 controller and the result shown in last photo after run the apps.

Thanks

[nandishm]

Paste below code   Line 9 -  19

                           this.oHeaderFooterOptions = {

buttonList : [{

sId :"ADDITIONAL_BTN_BACK",

sIcon:"sap-icon://nav-back",

onBtnPressed : function(evt) {

window.history.back(); 

}

}]

};    

_________________________________________________________________

Look for commas and semicolon give them correctly

[Former Member]

Hi Nandish, i have followed your advice but it remained no button at footer. The pictures below show the S2 view and controller and the UI.

Thanks.

[nandishm]

just paste below code

this.setHeaderFooterOptions(this.oHeaderFooterOptions);

afetr Line no.  17

[Former Member]

Hi Nandish, really thanks for your help and quick respond. After i pasted the code it also doesnt work. The outcome is shown on second picture.

[santhu_gowdaz]

may this example will help you,

JS Bin - Collaborative JavaScript Debugging&lt;/title&gt; &lt;link rel=&quot;alternate&quot; type=&q...

[nandishm]

I have used same code for all my Apps.

But its not working in you case, I dont know where its going wrong .

Sorry ..

[Former Member]

Hi Nandish, is it you also working on the system exercise in week 1 openSAP course? Or you did in localhost? By the way,  appreciate your help.Thanks

[nandishm]

Hi LOH CHUN WOOI

   I have done it in one of app for the client

[nandishm]

Hi LOH CHUN WOOL,

Add below code in controller's init method()

this.getHeaderFooterOptions ={       

  buttonList : [{

  {

  sId :"ADDITIONAL_BTN_BACK",

  sIcon:"sap-icon://nav-back",

  onBtnPressed : function(evt) {

  window.history.back(); 

  }

  }],                              

  },

  this.setHeaderFooterOptions(this.getHeaderFooterOptions);

[santhu_gowdaz]

If you adding button in master page, it as to add like footer bar,

<footer

            id="masterFooter">

            <Toolbar

                id="masterToolbar">

                <content>

                    <footerbar:SettingsButton

                        id="settingsButton"

                        icon="sap-icon://action-settings"

                        tooltip="Help">

                    </footerbar:SettingsButton>

                </content>

            </Toolbar>

        </footer>

in Detail you can add like a button.

[Former Member]

Dear Santhosh,

thanks for your reply. I am trying to add a button in footer by extending the S2 view. i have copied the code you shown but it failed to work. It will show the errors even just added one line simple code which is <Button id=button2 icon="sap-icon://save> </Button>. Do you know why it like that and how it solves this?

Thanks

[santhu_gowdaz]

Hi LOH CHUN WOOL,

          In Footer directly you can't add the button bec its is child of toolbar.

refer this SAPUI5 Explored