How to create a sticky button in SAP Ui5

[Pooja_DS]

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 and must add the class property with name and then use that class name in css.

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, here we must mention position as fixed

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