SAPUI5 Tutorial with WebIDE. Part X. Using Media Queries in UI5 Application

media queries in sapui5


Have you ever wondered why it is important to learn CSS3 as a part of learning UI5 application development? Well, a simple answer can be to add styles in our application. Although true, this answer will barely explain the real power of beautification the CSS3 possesses. Let’s explore adding styles to our UI5 application and making it react to different screen sized devices through Media Queries.

Technical Environment

SAP Web IDE for UI5 Application Development.


Step 1:

Create a UI5 application using the templates available. Since we have seen multiple examples of creating applications using templates, I am sure you can quickly create your own application with required data. (in case you have issue, let us know, we will put something on how to create app using templates). Note, once a master-details application is built, unlike UI5 application template, in Webapps folder there exists no CSS file to add styles. The first step to adding our own style should be to add a folder under the Webapps and naming it as CSS. Certainly, this CSS folder is going to hold our stylesheets. Interested readers can ask, can’t we add styles directly to the HTML files? The answer is an emphatic YES but adding internal styles make the HTML clumsy and unnecessarily lengthy. To build our applications properly modularized, it is always recommended that you create an external CSS file and link it to the respective pages.


Step 2: 

Now create a CSS3 file by right clicking on CSS folder and selecting New ->File. You must add the file extension as .css(i.e. if your file name is “styles” then you should write-“styles.css”).
Remember, this CSS file is treated as an external resource to the application which needs to be additionally loaded at the time of rendering. So we need to add the CSS file path as a Resource section of the manifest.json file.


Step 3:

Now that your file for styles is ready, you must link it to the HTML pages so that those get applied at the time of rendering the application in the browser. To establish the link between HTML and css3 the following tag needs to be declared in the header section of the concerned HTML file.


Step 4:

Before writing the actual logic of CSS3 let’s discuss the ways you can apply CSS3 in the SAPUI5 application. This is a vexed topic and if you have not yet explored please go through the link – Implementing CSS in SAPUI5 Application.

Step 5:

Out of the 3 methods explained in the article, we will take the last approach to apply CSS3. It is certainly understandable that we cannot go with the first two approaches since we have Master-Detail architecture in our application and our pages are designed as views. Interestingly enough, sapui5 have standard CSS library documents which get loaded at the time of rendering the application. Those govern the default styles we see at any application created. Now for our customization, we need to overload the standard style classes. For our esteemed readers, I found a few classes which are extensively used for customizing application appearance. Some basic changes have been introduced in the classes to change the look and feel of the application.


Link to the entire Style” CSS file.

Step 6:

Till now we have been working with only one CSS file (style.css) and have been completely indifferent about the device specific customization. What if we want our application to look differently in mobile/tablet than that it appears in desktop? Here comes the concept of Media Queries of CSS3. Media queries enable the responsiveness of the application design. To add media queries separately we need to have one more file (can be done in a single file, but for better understanding, we will separate). Also, don’t forget to add this as a separate Resource file to your application.

Link to the entire small-device” Stylesheet.

Styles mentioned in this stylesheet should get triggered when the screen size reaches 480px. By the screen size, you can specify your own customization for device specific appearance.

Step 7:

Now run your application with mock data and change the device dimension to experience the power of CSS3.

Desktop View

Small Device View(when device width reaches to 480px).

Did you notice, our app is responsive enough to adapt the layout as per the device size? Since our SAPUI5 app is expected to work across devices, we should take special care to take advantage of the media queries and provide exhilarating experience to our end users. Afterall delightful and responsive are two basic principles (out of 5) of SAP Fiori/UI5 apps.

If you GENUINELY like our articles then it would be a HUGE help if you shared, subscribed and liked us on facebook. It might seem insignificant, but it helps more than you might think.

Also, check our popular step by step tutorials on some of the important topics of SAP ABAP.

1. ABAP for SAP HANA Tutorials
2. ABAP Web Dynpro Tutorials
3. GOS Tutorial
4. OOPs ABAP Tutorial
5. HANA Tutorial
6. SAP Netweaver and OData Tutorial
7. SAP Adobe Form Tutorial
8. SAP Fiori Tutorial
9. SAPUI5 Tutorial
10. SAP Screen Personas Tutorials



Please enter your comment!
Please enter your name here