Skip to Content

Hello SAP Community!

I recently set out to create a simple mobile menu when I realized that the SAP BI iOS app poses a UX problem:

as default, the standard menu icon gets covered by the BI app’s full screen icon!

Of course, you could tell users to minimize the view, but why put an extra click between the user and the desired view?

After seeing, the flaw in the BI app’s design, I set out to create an alternative.

DOWNLOAD

Demo: iOS // iPad // Desktop

Steps

1. Create application structure

1 Text component for header
HDR_DASH.PNG HDR_DASH-prop.PNG

2 Icon components at top-right

F_MENU.PNG F_MENU-prop.PNG
F_FILT.PNG F_FILT-prop.PNG

2 Icon components at bottom-left

Panel component (off-screen)

PANEL_FXN-prop.PNG

We’re also going to add the following to ‘CSS Style’ property of PANEL_FXN:

opacity: 0;
background-color: #2c3034;
box-shadow: -10px 0 30px 0 rgba(0, 0, 0, 0.2);

2 Icon components at bottom-left of PANEL_FXN

2. Create External CSS

Note: media queries are what allow for the seamless transition from desktop buttons at top-right to mobile floating action buttons at the bottom-left.

Paste the following into your Design Studio application’s external stylesheet.

/***************************************
* Mobile Menu Template
* written by Pratham Mohapatra
 * >> http://prath.co
***************************************/

body {
	overflow-x: hidden !important;
}

* {
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */  
}

.hdr {
	background-color: rgba(0, 0, 0, 0.1) !important;
	line-height: 50px;
	font-size: 1.6em;
	font-family: "Calibri Light", "Calibri", Arial, sans-serif;
	text-align: center;
	color: #fff;
}


/********************************************
	Animation
********************************************/

.SLIDE-RIGHT {
	 -webkit-animation: slide-right .8s ease-in forwards ;
	 animation: slide-right .8s ease-in forwards ;
}

@-webkit-keyframes slide-right {
  0%{
	-webkit-transform: translateX(-300px);
	transform: translateX(-300px);
	
	opacity: 1;
  }
  100%{
	-webkit-transform: translateX(0);
	transform: translateX(0);
	
	opacity: 0;
  }
}

@keyframes slide-right {
  0%{
	transform: translateX(-300px);
	
	opacity: 1;
  }
  100%{
	transform: translateX(0);
	
	opacity: 0;
  }
}



.SLIDE-LEFT {
 -webkit-animation: slide-left .8s ease-in forwards ;
 animation: slide-left .8s ease-in forwards ;
}

@-webkit-keyframes slide-left {
  0%{
	-webkit-transform: translateX(0);
	transform: translateX(0);
	
	opacity: 0;
  }
  100%{
	-webkit-transform: translateX(-300px);
	transform: translateX(-300px);
	display: none !important;
	
	opacity: 1;
  }
}

@keyframes slide-left {
  0%{
	transform: translateX(0);
	
	opacity: 0;
  }
  100%{
	transform: translateX(-300px);
	display: none !important;
	
	opacity: 1;
  }
}













/*********************************************
	Media Queries - START
*********************************************/

/********* XL *********/
@media screen and (min-width: 1601px) {
	.fab-x {
		display: block;
	}
	.fab-m {
		display: none;
	}
}
/**************************/



/********* Desktop *********/
@media screen and (max-width: 1601px) {
	.fab-x {
		display: block;
	}
	.fab-m {
		display: none;
	}
}
/**************************/



/********* Tablet *********/
@media screen and (max-width: 1024px) {
	.fab-x {
		display: none;
	}
	.fab-m {
		display: block;
		box-shadow: 0 2px 5px 0 rgba(0,0,0,0.5);
	}
}
/**************************/



/********* Mobile *********/
@media screen and (max-width: 480px) {
	.fab-x {
		display: none;
	}
	.fab-m {
		display: block;
		box-shadow: 0 2px 5px 0 rgba(0,0,0,0.5);
	}
}

/*********************************************
	Media Queries - END
*********************************************/


/***************************************
* Mobile Menu Template
* written by Pratham Mohapatra
 * >> http://prath.co
***************************************/


3. Create Global Functions

a. create Global function showFab()

Create input parameter st (type: boolean) and paste the following:

[F_MENU, F_FILT, FM_MENU, FM_FILT].forEach(function(element, index) {
    element.setVisible(st);
});

b. create Global function toggleMenu()

Create input parameter icon (type: Icon) and paste the following:

if (PANEL_FXN.getCSSClass() !== "SLIDE-LEFT") {
    PANEL_FXN.setCSSClass("SLIDE-LEFT");
    GLOBAL.showFab(false);
}
else {
    PANEL_FXN.setCSSClass("SLIDE-RIGHT");
    GLOBAL.showFab(true);
}

toggleMenu-glo.PNG

4. Bind Global functions to all relevant icons

Note: ‘this’ keyword tells the toggleMenu() function to pass the icon component that is clicked on.

Paste the following BIAL script On Click event for all relevant icons:

GLOBAL.toggleMenu(this);

 

5. Execute the application and preview

iPhone:

iPad:

Desktop:


I hope you found this helpful. Thanks for reading!

Pratham Mohapatra

SAP Consultant and Full-Stack Developer

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. Mustafa Bensan

    Hi Pratham,

    I have come across this issue too so it’s good to see an example of a solution to resolve it.  I have some questions and suggestions as follows:

    1.  My understanding is that the solution presented simply places the menu icon in an alternative screen location that is not obscured by the full screen icon.  I can see how this works for the iPhone example, where the icon is placed in the page footer.  However, I’m not sure how the issue is resolved on the iPad because in the screenshot above the menu icon is in the header on the right corner, which is where the fullscreen icon overlaps with it.  Can you clarify?

    2.  It would be useful if you adapted your solution (as needed) to be based on the Blue Crystal theme because the Mobile theme is being deprecated going forward and is not available with the SAP UI5 M Mode rendering option which is the only rendering mode which will be supported in future.

    Regards,

    Mustafa.

    (1) 
    1. Pratham Mohapatra Post author

      Hi Mustafa,

      Thanks for reading my blog. To answer your questions,

      1. I agree completely regarding the iPad issue. I will be editing this post shortly with an appropriate solution.

      2. I was unaware of the Mobile theme being deprecated. Could you provide an official resource for this? I could see the size of components such as drop-downs presenting a mobile UX issue.

      I appreciate your interest in this solution and will post a reply here once the improvements have been made.

      Thanks,

      Pratham

      (0) 
  2. Basile Than

    Hello All,

    any update on this? I have a similar requirement and would like to know what is the best practice to achieve this.

    Thanks

    Basile

    (0) 

Leave a Reply