Introduction

Outside in the crazy tech world, tech behemoths release new gadgets every day with varying specifications, variants, and increased innovation. Oh, wait! I overlooked “With Different Screen Sizes,” which is exactly what this blog is about. 

The Dashboard or Report we create should adapt to different screen sizes from big computer Monitors to Newly launched foldable phones. We should also ensure that there is no visual loss because of different screen sizes, which could negatively impact the User Experience. 

Adaptive Layout is a feature in Lumira that is specifically designed for creating responsive designs. However, there are many grey areas that must be explored. One example is Toolbar Responsiveness. 

Challenge

The toolbar contains a variety of information and interactive buttons. A change in screen size may obscure a few buttons or result in incorrect alignment. It has a direct impact on the look and feel of the dashboard as well as the user experience. 

Solution

With the help of CSS scripting, this blog provides a near-effective solution to the problem. When the content in the toolbar is not visible, it moves from right to left into the overflow area. It is accessible via the overflow button, which opens a popover. 

Let’s take a look at the output before we get into the tutorial. 

I’ll show you how to make this Overflow Toolbar step by step. 

Step 1: Creating Base Container 

The Toolbar contains two base containers  

• Logo Container (contains Logos) 
• Content Container (contains interactive buttons)
  • Home 
  • About
  • Contact
  • Profile 

1. Right click on the Layout and create PANEL for two containers. In the Logo container you can add your own logos by importing logo images. 
2. Apply background colour for both the containers through CSS Style

   background-color: #29313a

Step 2: Creating Panels for different screen sizes 

Here, we can take four type of screen sizes into consideration and create four different panel for each screen size. 

• Large / Extra Large Screen 
• Medium Screen 
• Small Screen 
• Extra Small Screen 

      Step 2.1: Creating Panel for Large Screen Size 

1. Create a basic panel under CONTENT_CONT  
2. Under PANEL_2, create four buttons (can be altered based on requirement) 
3. In property section of PANEL_2 add p1 as CSS class name (refer attached CSS code)
4. Make sure you arrange the buttons with proper margins

Your layout structure should look like this 

      Step 2.2: Applying CSS Style for Buttons

1. Open the custom.css file of your application (you can find this in Properties panel under Display property) 
2. Add the below CSS script in custom.css file to get a UI5 themed button

   .sapMBtnInner { 
       vertical-align: top; 
       -webkit-appearance: none; 
       -webkit-user-select: none; 
       -moz-user-select: none;
       -webkit-background-clip: padding-box; 
       background-clip: padding-box; 
       box-sizing: border-box; 
       font-family: "72","72full",Arial,Helvetica,sans-serif; 
       font-size: 0.875rem; 
       height: 2.5rem; 
       min-width: 2.5rem; 
       margin: 0; 
       padding: 0; 
       text-align: center; 
       position: relative; 
       background-color: #29313a; 
       border: 0.0625rem solid #91c8f6; 
       border-radius: 0.7rem; 
       color: #91c8f6; 
       text-shadow: none; 
   } 
   .sapMBtnInner, .sapMBtnTransparent { 
      			 background-image: none; 
      			 background-color: transparent; 
      			 border-color: transparent; 
       			 color: #91c8f6; 
      } 
   .sapMBtn:hover>.sapMBtnHoverable { 
      			 background-image: none; 
      			 background-color: #062e4f; 
      			 border-color: #91c8f6; 
   
   } 

3. After pasting the script, save it. Now you can see the change in Button Style

      Now your Toolbar should look like this

      Step 2.3: Creating Panel for Medium Screen Size

1. 1. Create another basic panel under CONTENT_CONT
   2. Under PANEL_3, create three buttons (one icon button for menu)
   3. In property section of PANEL_3 add p2 as CSS class name (refer attached CSS code)
   4. Create an Action Sheet Technical Component and add two left out buttons in it.
   5. Bind the icon button to Action Sheet

Below is the structure of PANEL_3

Output should look like this

        Step 2.4: Applying CSS Script for Popover

1. 1. Open the custom.css file of your application (you can find this in Properties panel under Display property)
   2. Add the below CSS script in custom.css file to get a UI5 themed popover

      .sapMPopover .sapMPopoverCont {
          background-color: #062e4f;
          margin: 0;
      }
      .sapMPopoverArr:after {
          content: " ";
          display: block;
          width: 0.7rem;
          height: 0.7rem;
          background-color: #062e4f;
          transform: rotate(-45deg);
      }

      The new popover should look like this! (The design is totally based on your requirement)

      

        Step 2.5: Creating Panel for Small Screen Size

1. 1. Create another basic panel under CONTENT_CONT
   2. Under PANEL_4, create two buttons (one icon button for menu)
   3. In property section of PANEL_4 add p3 as CSS class name (refer attached CSS code)
   4. Create an Action Sheet Technical Component and add three left out buttons in it.
   5. Bind the icon button to Action Sheet

Below is the structure of PANEL_4

Output should look like this

         Step 2.6: Creating Panel for Extra Small Screen Size

1. 1. Create one more basic panel under CONTENT_CONT
   2. Under PANEL_5, create one button (one icon button for menu)
   3. In property section of PANEL_5 add p4 as CSS class name (refer attached CSS code)
   4. Create an Action Sheet Technical Component and add four buttons in it.
   5. Bind the icon button to Action Sheet

Below is the structure of PANEL_5

Output should look like this

 Step 3: Writing CSS Script for Responsiveness

1. We have developed layouts for 4 scenarios, now we have to script in such a way that only one panel should be visible in each scenario.
2. @media function in CSS helps to capture the changes in screen dimension, using that we can hide and unhide panels dynamically.

Mentioned below is the CSS Script for responsiveness

//default screen size hide Panel3, Panel4, Panel5 and show Panel2
@media only screen 
{
 .p1 {
    display: block;
 }
 .p2 {
    display: none;
 }
 .p3 {
    display: none;
 }
 .p4 {
    display: none;
 }
} 
//when width is less than 560px hide Panel2, Panel4, Panel5 and show Panel3
@media only screen and (max-width: 560px)
{
 .p1 {
    display: none;
 }
 .p2 {
    display: block;
 }
 .p3 {
    display: none;
 }
 .p4 {
    display: none;
 }
} 
//when width is less than 480px hide Panel2, Panel3, Panel5 and show Panel4
@media only screen and (max-width: 480px)
{
 .p1 {
    display: none;
 }
 .p2 {
    display: none;
 }
 .p3 {
    display: block;
 }
 .p4 {
    display: none;
 }
} 
//when width is less than 400px hide Panel2, Panel3, Panel4 and show Panel5
@media only screen and (max-width: 400px)
{
 .p1 {
    display: none;
 }
 .p2 {
    display: none;
 }
 .p3 {
    display: none;
 }
 .p4 {
    display: block;
 }
}

• The dimensions mentioned in max-width property were assumption made based on screen width.
• CSS display property helps to hide and unhide the components

Conclusion

Through this blog we have created a new component called Overflow Toolbar. This toolbar will effectively work on all screen sizes adaptively. To achieve better responsiveness usage of CSS script is recommended.

Reference

• https://sapui5.hana.ondemand.com/#/entity/sap.m.OverflowToolbar