Skip to Content

Hi!

I had a little time to make another toy that maybe others may find a use for on SCN.  Those who visit the front page of SCN, among other sites, will recognize this type of component, which is a slide show component.  We even see similar concepts in a Fiori Launchpad:

SCN Welcome Page:

http://scn.sap.com/welcome

SCN.png

Fiori:

https://experience.sap.com/fiori-guidelines/FioriDesign/15_Fiori_Design-Theming.html

Fiori.png

Can Design Studio join the party?  With a little elbow grease in the Design Studio 1.2 or 1.3 SDK, of course.

I have posted the gory code details on Github for examination here:  (DesignStudio1.3UtilityPack/res/js/slideShow.js at master · entmike/DesignStudio1.3UtilityPack · GitHub)  — As a side note, this is a compilation of all my previous blog postings related to all other SDK components, all bundled up in one place – More on this in a separate blog later…

I chose to use an Open Source MIT Licensed library so that I would not need to start from scratch.  I settled on using the Jssor Slider, however I’m sure any favorite JavaScript slide show library could be used.

Back to the usability, let’s see what happens when we drag over a Slide Show component during design time:

SS1.png

As you can see, I’ve allowed for up to 5 slides, and 5 captions, along with a few duration/interval and autoplay settings.  Also, I have provided an onclick event which is where we can then build some logic into this.  Also, I put a few CSS style fragments in there so some cosmetics can be tweaked, as well.

I’ll stop here and say that this implementation is very basic, and shouldn’t be 100% representative of all the cool stuff that the Jssor library can do. Feel free to enhance this to meet your needs!  It’s a pretty cool library.

Coming back to this component however, we see that you get some common UI elements like the dots that paginate across the bottom and some arrows to thumb back and forth with.  Also, not shown in this screenshot, but you can see for yourself by installing this addon (more on this later), are some nice transition effects as the slides move.

So what would a use case for this in Design Studio be?  How about if you want a hybrid sort of single KPI tile with some image backdrop that represented how good or bad the KPI is doing?  Then by clicking the slide, you can use to BI Action Language scripting to facilitate drilldown or dynamic visibility on a more detailed chart (see below):

1) On the Startup Script for the APPLICATION, let’s get some data, and give it a rating, caption, and background:


var target = 10000;
var billedQty = DS_1.getData("0D9INV9QTY000000000000010", {}).value;
var billedQtyFormatted = DS_1.getDataAsString("0D9INV9QTY000000000000010", {});
if(billedQty >= target){
  SLIDESHOW_1.setCaption("Great Quarter! (" + billedQtyFormatted + ")",0);
  SLIDESHOW_1.setImageSrc("http://example.com/fireworks.jpg",0);
}else{
  SLIDESHOW_1.setCaption("Lousy Quarter! (" + billedQtyFormatted + ")",0);
  SLIDESHOW_1.setImageSrc("http://example.com/rain.jpg", 0);
}

2) Let’s also add a drilldown capability for on-click on the slide show:


var slide = SLIDESHOW_1.getSlideClicked();
if(slide == "0"){
  BILLED_QTY_CROSSTAB.setVisible(true);
}else{
  BILLED_QTY_CROSSTAB.setVisible(false);
}
// And so on for slide 1, 2, 3...

So, with a target of 10000, what does the first slide look like:

/wp-content/uploads/2014/05/good_463528.png

Let’s adjust the target to 20000 in the scripting layer to simulate bad:

/wp-content/uploads/2014/05/bad_463547.png

(Note: the crosstabs are just a placeholder to represent an on-click drill down that you can do per-slide.)

These fundamental pieces of scripting give you enough control to facilitate drilldown navigation, and visualize targets in a fun, engaging way.

Feel free to pull down the source from my Github repo here:

entmike/DesignStudio1.3UtilityPack · GitHub

As mentioned, this includes several other components that I have blogged about in the past.

And as a bonus, I’ve included them in deployable form for those who don’t like messing with the SDK.

https://github.com/entmike/DesignStudio1.3UtilityPack/blob/master/Design%20Studio%20Utility%20Pack%20SCN.zip?raw=true

Download the .ZIP, and go to Tools -> Install Extension to Design Studio -> ‘Archive…’

Enjoy!

To report this post you need to login first.

4 Comments

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

    1. Mike Howles Post author

      Tammy, you are welcome.

      Yeah I figured providing a deployable version for everyone to use may get some additional usage and excitement instead of having people have to package them as features on their own using Eclipse.

      Will appreciate any feedback!  Thanks!

      (0) 
  1. Curtis Parente

    Hi Michael,

    This is a great utility!

    I’m currently using the slide show but wondering if there is a work around for the images to be sourced from a local folder on the server and not through a URL link.

    For example i’d like to store all my images in a local folder on the BI Platform server and use the below function:

    SLIDESHOW_1.setImageSrc(“C:/LocalDirectory/image.jpg”,0); 

    In the designer tool I can see the picture is rendering…but once I upload to the BI Platform the image does not show.

    Any ideas?

    Thanks

    Curtis

    (0) 
  2. vidyasagar nurbhash

    Hi Mike,

    I want to represent three screens without onClick event.In my requirement my customer wants to see three screens as a simple video without any mouse click


    Is it possible in this component? If it is possible please guide me how to achieve this?

    Thanks,

    Vidya

    (0) 

Leave a Reply