Hi All,

I’m Pooja from India, I’ve been working in SAP Domain for the past 10 months, and I have developed many things which I will share in my future posts. I hope my blog will help a lot of beginners.

This is my first blog, Today I am about to explain How to create a sticky button in Ui5.

Before that let me explain about a sticky button, A sticky button stays at the fixed position of the page as a user scroll down. They are useful to design features when you are designing a page that will have a lot of vertical content, but you want users to be able to quickly find the primary call-to-action button.

Let’s see how this can be achieved.

Firstly, we need to log in to the SAP Cloud Platform. After login, we must create a new project in SAP Web IDE

then, in the xml file we need to write the below code.

1.XML   

<mvc:View controllerName="sticky.sticky.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
	<Shell id="shell">
		<App id="app">
			<pages>
				<Page id="sticky1" title="{i18n>title}">
					<VBox alignItems="End" alignContent="End" justifyContent="End">
						<Button icon="sap-icon://lightbulb" text="Get Help" type="Emphasized" width="5px" press="handleUrlPress" class="roundClass"/>
					</VBox>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

Then in the CSS folder create one file with the .css extension and then add the below code.

2.CSS

/* Enter your custom styles here */
.roundClass .sapMBtnInner {
  /*button round size*/
	background: #4679BD; 
    box-shadow: 10 20 3px grey;
    border-color: solid white;
    color: white;                 /* text colour in button*/
    padding: 10px;                /*button size*/
    text-align: centre;           /*text alignment in button*/
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: -200px -200px;
    cursor: pointer;
    height: 80px;
    width: 80px;
    position: fixed;         /*this one is the main thing for the sticky button*/
    opacity: 1;
    top: 40rem;
    z-index: 500;

    border-radius: 50px;
    font-family: Arial, Helvetica, sans-serif;
}

.roundClass .sapMBtnText>.sapMBtnIcon {
   display: contents;
   line-height: 1.9rem; /* Add this line when you are using height as 6rem */
}
.roundClass .sapMBtnInner.sapMBtnText {
    padding-left: 0.75rem;
}    
.roundClass .sapMBtnContent {
    line-height: normal;
}

and yes, there is no code written in the controller.js file to create the sticky button only. view and .css are needed.

Output:

Below I’ve attached the screenshot of the output which has the sticky button when I scroll up or down the page that button will not change its position of it.

Conclusion:

From the above scenario, we will learn how to create a sticky button in SAP Ui5 using CSS and XML.

It’s not that complex but very useful. I use it in some of my projects and hope it can help others too.

Happy learning folks!!!

Regards,

Pooja D S