Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member

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
3 Comments
Labels in this area