Design Studio 1.2/1.3 SDK – Slideshows

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:

https://scn.sap.com/welcome

Fiori:

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

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:

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("https://example.com/fireworks.jpg",0); }else{   SLIDESHOW_1.setCaption("Lousy Quarter! (" + billedQtyFormatted + ")",0);   SLIDESHOW_1.setImageSrc("https://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:

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

(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!