Slide Show effect in SAP Lumira Designer

[desai_vipul]

It’s a common practice to use images to improve the overall look and feel of your web pages. Many web sites use image slide shows to show relevant images for the content displayed in the web page. An example implementation of the same can be found here on W3Schools website.

In this blog we will discuss how we can use similar functionality to improve the aesthetic appeal of your dashboard. We discuss two approaches, one using standard SAP Lumira Designer components and one using CSS animation effect.

Using SAP Lumira Designer standard components:

• Create a SAP Lumira Designer application and create the structure as seen below
  


• Add a Pagebook component and include the relevant images in each page that you need to display one after another.


• Set the Opacity (%) to 100 and Display Mode to Stretch for all the images


• Set the Page Pre-Loading property of the Pagebook component to All Pages, so that the images are preloaded when the dashboard opens and the slide animations are crisp from the beginning


• Add a timer control which we will use to slide the images one after another after a predefined time interval


• Add the below script for the On Timer event of the timer control, this changes the page displayed everytime the On Timer event is fired
  

  APPLICATION.log("On Timer Called");
  
  
  
  if(PB_CASSEROLE.getSelectedPageIndex() == 0)
  
  {
  
  	PB_CASSEROLE.setSelectedPageIndex(1);
  
  }
  
  else if(PB_CASSEROLE.getSelectedPageIndex() == 1)
  
  {
  
  	PB_CASSEROLE.setSelectedPageIndex(2);
  
  }
  
  else if(PB_CASSEROLE.getSelectedPageIndex() == 2)
  
  {
  
  	PB_CASSEROLE.setSelectedPageIndex(3);
  
  }
  
  else if(PB_CASSEROLE.getSelectedPageIndex() == 3)
  
  {
  
  	PB_CASSEROLE.setSelectedPageIndex(0);
  
  }
  
  ​

  
  


• Add the blow script for the On Startup event of the Application
  

  TIMER.start();​

  
  


• Now when you run the application the pages slide after the time interval specified in the timer control
  


• This is a very simple way of achieving the slide show effect using standard components in the platform


• The disadvantage of doing it this way is that there are postback calls that happen to the server every time the image needs to be changed. Though this doesn’t add to much processing but causes unnecessary traffic between the client and the server as seen below
  

 

Using standard CSS animations

• To avoid the network traffic that’s generated everytime the image changes we use CSS animations to achieve similar functionality


• Create another SAP Lumira Designer application and create the structure as seen below
  


• Now create a CSS file with the below content and attach it to the applications Custom CSS property
  

  #PNL_CASSEROLE_panel1{
  
  	overflow: hidden !important;
  
  	margin: auto !important;
  
  }
  
  
  
  .slideshow-container {
  
  	transition: 1s ease;
  
  	overflow: visible !important;
  
  }
  
  
  
  .slide {
  
  	animation: slide 24s ease infinite;
  
  }
  
  
  
  @keyframes slide {
  
    0% {
  
  	transform: translateY(0px);
  
    }
  
  
  
    15% {
  
      transform: translateY(0px);
  
    }
  
    
  
    30% {
  
      transform: translateY(300px);
  
    }
  
  
  
    45% {
  
      transform: translateY(300px);
  
    }
  
    
  
    60% {
  
      transform: translateY(600px);
  
    }
  
  
  
    75% {
  
      transform: translateY(600px);
  
    }
  
       
  
    90% {
  
      transform: translateY(900px);
  
    }
  
      
  
    99% {
  
      transform: translateY(900px);
  
    }
  
    
  
    100% {
  
      transform: translateY(0);
  
    }
  
  }
  
  ​

  
  


• Assign slideshow-container slide as the CSS Class to the Panel PNL_CASSROLE_CONTAINER


• Set the image properties as below
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  Image	Top Margin	Height
  IMAGE_1	0	300
  IMAGE_2	-300	300
  IMAGE_3	-600	300
  IMAGE_4	-900	300

  
  


• Basically we are arranging the images one above the other in the Panel and showing the portion of each image one after another using the transform effect


• Lastly make a note of the overflow and margin override that has been specified for the Panel container in the CSS file using the Panel ID identifier
  

  #PNL_CASSEROLE_panel1{
  
  	overflow: hidden !important;
  
  	margin: auto !important;
  
  }
  
  ​

  
  


• Its important to have the Panel ID correctly mentioned in the CSS file, make sure you update this if you are using a different Panel ID


• Now launch the application and watch the pages slide after the time interval specified in the CSS animation property
  


• This approach doesnt generate the additional postback calls that are generated in the previous approach

The CSS approach works in Chrome, IE 11 as well as Edge browser. Do let me know what do you think of these options or if you have trouble setting this up.