How to create a sticky button in SAP Ui5

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