Hi All,

In this blog I’ll explain 2 things.

firstly, about a toggle button how it will change its name dynamically on button click and then how it will toggle the footer which we have added on the screen.

so in the below, I’ve written the xml code, you can observe I’ve taken toggle button tag in the content with text name as hide footer initially and function name as toggleVisibility.

Step 1 :

1.xml

<mvc:View controllerName="dynamicname.dynamicname.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
	<Shell id="shell">
		<App id="app">
			<pages>
				<Page id="floatingFooterPage" floatingFooter="true" title="{i18n>title}">
					<content>
						<Button id="b1" text="Toggle Footer" press="toggleFooter"/>
						<ToggleButton id="togid" text="Hide Footer" icon="sap-icon://hide" press="toggleVisibility"/>
					</content>
					<footer>
						<OverflowToolbar style="Clear">
							<ToolbarSpacer/>
							<Button type="Accept" text="Accept"/>
							<Button type="Reject" text="Reject"/>
						</OverflowToolbar>
					</footer>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

Step 2: 

Method 1 – To set the text name dynamically by clicking the same toggle button and toggle footer

2.Controller.js

And then in the control I’ve written the function for dynamic name/text change of button by clicking  and  to toggle the footer

• If you have a text element with “text” property, you should use setText(“Something”) method instead
• To add the icon to that button here I’ve used setIcon(“”sap-icon://show””)
• I’ve taken the page id here to toggle the footer like hide and show
• if the user click on the button oEvent it will set as true, button name/text will be changed and Hide the footer or else again he clicked name it will be changed back and shows the footer like vise-versa
• To show/hide the footer I’ve taken setshowFooter() and getShowFooter() methods with Page Id

toggleVisibility: function (oEvent) {
			this._Page = this.byId("floatingFooterPage");
			if (oEvent.getSource().getPressed() === true) {
				this._Page.setShowFooter(!this._Page.getShowFooter());
				oEvent.getSource().setText("Show Footer").setIcon("sap-icon://show");
			} else {
				this._Page.setShowFooter(!this._Page.getShowFooter());
				oEvent.getSource().setText("Hide Footer").setIcon("sap-icon://hide");
			}
		}

Method 2 – To set the text name dynamically by clicking the same toggle button only once and toggle footer

In the other method, if we want to change the text of the button dynamically only once

• Directly you can take page id and add the footer methods then with the toggle button id, text/name will going to change which is inside the setText method

	toggleVisibility: function () {
        this._Page = this.byId("floatingFooterPage");
	 	this._Page.setShowFooter(!this._Page.getShowFooter());
	 	this.getView().byId("togid").setText("Show Footer");
	},

To just only toggle the footer,

• This function is to just only for used to toggle the footer hide/show with the respective page Id

toggleFooter: function () {
			this._Page = this.byId("floatingFooterPage");
			this._Page.setFloatingFooter(!this._Page.getFloatingFooter());
		},

Output :

Snapshot 1 :

• It below ouput snapshot have the 2 buttons
• first one is to toggle the button on the screen
• second  button is the toggle button it will change the text of button dynamically when click
• Inititaly text name is hide footer and we can see thee footer by default on the screen

Snapshot 2 :

• In the below snapshot we can see when we click on the button how name has changed to show footer and footer is disappeared

Conclusion : 

By following above methods we can get to know how to change text name of the button dynamically and also how to toggle the footer to hide/show on the screen in ui5. hope you all liked my blog as helpful. And please share your feedbacks to improve in my future blogs.