Update:

Github Link: entmike/com.sample.highcharts · GitHub

Original Post:

This blog post is a long time in coming, as what started as one thing, ended up being something quite different by the time I was done banging around on it.

I've created a number of other SDK Components, however none up to this point have been Data Bound (bound to a Datasource) so because of that, usability is a bit limited unless we resort to a bunch of BIAL setters and getters to shuffle data around.  So I figured, no time like the present to dive in.

First, SAP's SDK documentation offers up 4 specific means of working with a Datasource's result set:

1. ResultCell
   A single data value.
2. ResultCellList
   A single row or column of data values.
3. ResultCellSet
   A complex cartesian selection of data values from rows/columns.
4. ResultSet
   A raw dump of the entire result set.

For my component, I focused on ResultCellSet, as it gave what I felt to be the most flexibility for my usages.  You can find more details in the SDK documentation.

It was quite simple to make a component databound.  Simply put, setting a databound flag in contribution.xml is all that is needed.  Once this is set, the DS runtime knows to make available a DataSource property in the property sheet on its own.  With that, I also added a property that corresponded to my ResultCellSet selection type.  Example:

<property id="dataResultCellSet" type="ResultCellSet" title="Chart Selection" tooltip="Optional - Select certain rows or columns of Query Results" group="DataBinding"/>

With that, I had to think about what to actually DO with the data.  Grouped Tables?  Autofilter Tables?  Insanely Cool D3 Visualizations?  How about something in the middle and a little tame.  I decided to write a chart wrapper with some options not present in SAP's charts today.

Why Charts?  I mean, SAP has a bunch of charts already, right?  Yeah, but they aren't yet as configurable as some people would like.  I still to this day think that BEx has the best configurable Charting API (the old IGS days, ah....) -- There are just simply a lot of nitpicky things about Design Studio's charts that I wish could be fixed, like Legend positioning and formatting, axis formatting/positioning, zooming, more granular control of series behavior, etc, etc, etc...  So do we wait until it gets better?  I'm impatient, so let's try it on our own!

At SAP TechEd 2013, with the announcement of the SDK coming with DS 1.2, it was said more than once that it was quite feasible to bring-your-own UI libraries and charting APIs if you were so inclined, so with that, I did a quick comparison between some popular HTML5/JS charting engines, and settled on using Highcharts for the following proof-of-concept.  While I could have gone with FusionCharts, ChartJS, or my own with D3, it doesn't matter.  Highcharts was the quickest for me to pick up, but this isn't my personal endorsement of it over any other charting API.  It didn't matter for this POC.  (No, I am not a Highcharts employee!)

Probably my biggest annoyance is how the SAP Charts will compound or concatenate excess dimensions in their chart.  Example view:

(By the way, I am using SAP Demo Cube 0D_DECU as the data source for all the following example.)

The Chart:

Yikes.

Sure, I could make a 2-Dimensional initial vie selection instead, however I do not want to be in the business of having to do a lot of BIAL acrobatics to drill out or in different measures and all that.  I'd prefer it to work more like you'd acquire Data in Lumira or export to Excel or query from Webi.  One pull, and then work with the data...

Typically, these pulls do one of a few things, such as projection (or local aggregation) or filtering or grouping.  Webi and CR today do these sort of things.  For my resolution of how to handle excess dimensions, I chose filtering for my proof of concept, however grouping and projection are equally valid in my opinion.

So, let's see a different approach to how SAP's charting engine concatenates the dimensions with the same data set.

Step 1, pick a data source and pop in the component.

Next, drag the Datasource on top of the component, and it automatically binds the datasource behind the scenes!

After setting a Series designation and an x-axis Dimension, the chart comes to life:

We can observe a few features already.  We can see that after picking which dimensions to chart, the excess dimensions are made as dropdown combos to filter around.  A separate exercise outside the scope of this effort would be aggregation/projection and/or grouping.  I'll leave it to the community to fill in the blanks

But, what can we improve on this chart?  We probably do no wish to see Costs mixed with quantities most likely, so let's see how we can filter down what we are looking at with the 'Chart Selection' property located on the property sheet:

Looking better...

...but I don't like line charts.  Let's try a groovy spline chart at runtime:

(Click image for animation):

You can see how the extra dimensions have become autofilter dropdowns (rendered using SAPUI5), and how we are also seeing the zooming capability of the Highcharts charting engine in effect.

What other options would be nice?  Let's do some legend formatting and switch to another chart type:

Pretty cool stuff.

A compilation of a few other chart types (not all-inclusive):

So, in summary, I think that the SDK as-is, provides a tremendous opportunity to use existing charting APIs, or even your own if you are a d3 wizard, with high effectiveness.  And while this has been a fun experiment, I do not plan on finishing this component in its current form, and am open to releasing the source to the community for dissection, if there's enough interest.  I can put it on Github, as I have a few of my other components as-is.

And lastly, as when it comes to any wrapper usages, make sure you are licensed or using open source software when using in a productive environment!

Comments and feedback and code sharing always welcome!

I attended this webcast last week sponsored by APOS.  SAP's Ian Mayor discussed Dashboards and Design Studio.

Hopefully everyone has seen this:

Figure 1: Source: SAP

Ian showed other similar slides covered in other blogs, so I won't cover here.

Figure 2: Source: SAP

Ian explained that the plan is to "bring together in one common experience, one common tool" for dashboards to address the needs of customers.

This includes mobility to consume on mobile devices, provide compelling visuals.

The plan in Figure 2 is to provide simplification, unification, one tool to build dashboards no matter how you are delivering them

He explained it is a three phase roll out.

Last year, 2013 the first phase was mobile theme; focused on HTML5 for Dashboards– re-render dashboards in HTML5

They want to catch Design Studio up to same level of visualizations, add-ons for SDKs, and customization

The next year is the unify phase, and bring together, merger them into Design Studio

They are expanding data connectivity – new future proof tool

HTML5 is the base rendering – regardless of the device

They plan to introduce migration tools to help convert XC dashboards and BEx web templates into the new environment

One tool for the future; not plan to force migration as it is difficult to retire existing content

Existing BEx web templates & XC dashboards will keep going  - focus on future innovations efforts

Design Studio

Design Studio was launched a little over a year ago

It was very focused on BEx Web Application Designer user base

Version 1.2 expands out of SAP with the Universe support

It releases every 6 months

Then the APOS team spoke about their APOS plug in – a SWF XCelsius file into Design Studio to help transition

Figure 3: Source: APOS

APOS has a Beta program to help move from Xcelsius to Design Studio – contact them on their web site at apos.com

Figure 4: Source: APOS

Figure 4 is a sample beta of XCelsius dashboard inside Design Studio

Question & Answer

Q: What versions of BI platform do you need for Design Studio?  Do you need to be on 4.1?

A: DS supports 4.0 SP6 or higher – BI4.1 – if you want Universe support you need to be on 4.1

Q: How is Design Studio licensed?

A: No additional license for Design Studio – it is included in the Dashboard license

It is a separate download and add-on

Need to go on SMP to download Design Studio

If you are licensed for Dashboards and can’t see Design Studio contact Ian Mayor

Q: How does Design Studio relate to Explorer, Web Intelligence?

A: It follows traditional BI model – a single author is trained in the tool and publishes content to end users

Explorer is a self service tool

Web Intelligence is a reporting tool while Design Studio is designed for interactive applications

Q: How is Lumira different than Design Studio?

A: Design Studio – for professional creator while Lumira is a self-service tool

My take: the XCelsius application inside Design Studio SDK is interesting and I wonder if customers will try it out.

Also, as an FYI, the Design Studio Roadmap was updated this past week - see https://websmp206.sap-ag.de/~sapidb/011000358700000390622012D.pdf (SMP logon required)

Interested in learning more?  BI 2014 in March has Design Studio sessions, such as this one: Leveraging SAP BusinessObjects Design Studio to deploy data-driven BI applications across Web and mobile platforms

This could be considered a part 2 of my original post related to creating a Toolbar component using SAPUI5 Framework.  You can read that blog for the rationale behind the toolbar idea (Design Studio 1.2 SDK - Building a SAPUI5 Toolbar)

In this entry I wanted to focus on a different approach for the same component.  In the initial attempt, I used SAPUI5 technically to create the component, but without any clear direction on how to render it, I used SAPUI5's placeAt() function to attach it to my DIV container that the SDK provides, based on known examples to-date.  In the subsequent comments on that post, Reiner Hille-Doering mentioned that this may not be the best approach and said that there is a more direct, yet undocumented method.

Based on some subsequent comments in another thread, I think I've derived the cleaner method that Reiner may have been alluding to.  Below is my (undocumented, unsupported for now, I'd assume) approach at implementing the same toolbar by using the sapui5 handler instead of the div handler.

GitHub Link:

Design-Studio-Repository/sapui5.toolbar/SAPUI5 Toolbar at master · entmike/Design-Studio-Repository · GitHub

In the component.xml file, I only needed to change handlerType from "div" to "sapui5".  The rest of the changes I will call out below which occured mainly in component.js.

I also used some SAPUI5 documentation I found here:

Documentation/AdvancedTopics/OnTheFlyControlDefinition – SAPUI5 Wiki (TIP CORE User Interface)

The code below clocks in just under 100 lines, and I've commented the important functions and details to call out.

sap.ui.commons.Toolbar.extend("com.sample.menu.ToolbarMenu", {  // SAP UI5 Metadata convenience at work - Setter and getter are created behind the scenes, including data binding and type validation  metadata : { // Not to be confused with the Data Source metadata property  properties : {  "name" : "string",  "showCaptions" : {defaultValue : "X", type : "string" },  "buttonClicked" : {defaultValue : -1, type : "int" },  "buttonClickedTitle" : {defaultValue : "Nothing Clicked YET",  type : "string" }  }    },    // SAPUI5 Renderer, we can leave it alone    renderer : {  /*render : function(rm, oControl){  alert(oControl.getProperty("buttonClickedTitle"));  }*/  },  // Called by sap.designstudio.sdkui5.Handler  (sdkui5_handler.js)  initDesignStudio : function() {  try{  // Make 100 setters and getters until SDK supports properties that are Arrays  for(var i=0;i<=100;i++){         this.btns[i] = {};         for(var meta in this.autoProperties){          this.btns[i][meta] = this.autoProperties[meta];          var setter = "set" + meta.charAt(0).toUpperCase() + meta.slice(1) + i; // Camel Case per SAPUI5 (e.g. setTitle0)          var getter = "get" + meta.charAt(0).toUpperCase() + meta.slice(1) + i; // Camel Case per SAPUI5 (e.g. getTitle0)          // Make setters and getters on the fly          this[getter] = function(meta,i){          return function(s){              return this.btns[i][meta];          };          }(meta,i);          this[setter] = function(meta,i){          return function(s){          this.btns[i][meta] = s;          this.populateIcons();          };          }(meta,i);         }     }  this.setStandalone(false);  this.populateIcons();  }catch(e){  alert(e); // Aw snap  }  },    btns : [], // Button Storage    autoProperties : { // Button Properties and default values    title : "",    visible : false,    enabled : false,    icon : ""    },    // Override default getter for custom logic    getButtonClickedTitle : function(){    if(this.getButtonClicked() < 0) return "[Nothing Clicked Yet]";  return this.btns[this.getButtonClicked()].title;    },    // Override the SAPUI5 setter so that we can instruct the component to redraw some buttons    setShowCaptions : function(v){  this.setProperty("showCaptions",v);  this.populateIcons();  },  populateIcons : function(){ // Main button redraw routine    this.removeAllItems(); // Blow away existing buttons    for(var i=0;i<this.btns.length;i++){ // Recreate all buttons    var b=this.btns[i];    var bt;    if(b && (b.title!=""||b.icon!="")){    if(b.title=="sep") {    bt = new sap.ui.commons.ToolbarSeparator();    }else{      var that = this;    bt = new sap.ui.commons.Button({                     text : this.getProperty("showCaptions")?b.title:"",                     // lite : true,                     tooltip : b.title,                     enabled : b.enabled,                     visible : b.visible,                     icon : b.icon,                     press : function(j){                      return function(){                      that.setProperty("buttonClicked",j);                      that.fireDesignStudioPropertiesChanged(["buttonClicked","buttonClickedTitle"]); // SDK proxies these properties, must inform of change                        that.fireDesignStudioEvent("onclick");                      };                     }(i)      });    }    this.addItem(bt);    }    }    }
});

I like this approach better because you can more directly bind the SAPUI5 properties to the SDK Properties exposed in contribution.xml, and override just where needed.  Also the component.ztl accounts for the SAPUI5 setters and getters notation (versus how the DIV handler uses a fluent setter/getter notation).

In the GitHub Repo, I also attached a sample Design Studio application project, to show how the functionality is identical to the original implementation using the DIV handler.

Hope this helps any other SAPUI5 guys out there who may wish to get their feet wet with Design Studio 1.2 SDK!

Enjoy.

Hi community,

If You want to use condition formatting in Text Box or wanna change the background/font-color based on different selection then i think it may help you.

Here i put a dimension filter and a text box.

based on dimension filter selection i want to change the background color of the text box.

for achieving that things i used a Custom CSS file.....

saved that file in my root folder.

then i write some script in dimension filter event "On Apply"........

so using that script that thing work.

Thanks,

Anshul

I've seen a few discussions like "Where's my Image file when I publish my dashboard?" or similar.  It might be related to someone having put the image in a Favorites folder in the BO Platform or forgetting to migrate it up in whatever folder it's in, or likewise in the SE80 MIME Repo on the NetWeaver side.

What a pain, I say.  Images should be a simple thing to deal with.  I lamented about this in a recent document with a workaround of Base-64 encoding the URI of the Image.

How to embed images inside of a Design Studio App without uploading to server.

This works, still, but I wanted to make it easier without leaving Design Studio to go off and Base-64 encode an Image and then copy and paste it back into Design Studio.  So I made (gasp) an SDK Component to do it for us.  I called it 'SuperImage' but in hindsight, maybe 'SimpleImage' is more accurate, as this is the smallest snippet of SDK code that was needed.  I decided to again use the SAPUI5 handler to get this done.  Here's the component.js in its entirety.  You can see that it's more comments than code.

sap.ui.commons.Image.extend("com.sample.superimage.SuperImage", {  renderer : {},  metadata : { // Not to be confused with the Data Source metadata property  properties : {  onclick : "string" // While 'onclick' is technically a DS Event, it does pass some information, so let's take it.  }  },  initDesignStudio : function() {  // Called by sap.designstudio.sdkui5.Handler  (sdkui5_handler.js)  },  // Override onclick setter to then attach/detach Design Studio event raising.  setOnclick : function(s){  /*  * Geeking out for a moment:  *  * Conjecture, but the string that is passed appears to be a supporting JS command string.  *  * Example:  * sap.zen.request.zenSendCommandArrayWoEventWZenPVT([['GUID','1',0],['BI_COMMAND_TYPE','ABSTRACT',0]]);  *  * This Command Array is ultimately passed to object 'sapbi_page' to so some server-side processing with.  * The actual 'sap.zen.request.zenSendCommandArrayWoEventWZenPVT' should only be actually evaluated when the event is raised (on click).  *  * Those who enjoy picking through code can find this function call also on line 74 of 'sdkui5_handler.js' as well as other places  * It also looks like it supports some sort of undocumented or yet-unimplemented SDK funclet thing...  * The function itself is defined in 'bi_command_util.js' which is contained in 'com.sap.ip.bi.zen.rt.framework_12.0.2.201311041742.jar'  *  * Long story short, let's not eval it in the setter, and leave it alone.  But, let's see if there's any value so we can  * attach or detach an event listener (so we get a proper mouse cursor)  *  * PS. Anyone having BEx WAD 7.0 flashbacks with references to 'sapbi_page' references? ;)  *  */  if(s && s != ""){ // If there's onclick BIAL, then add an event listener (and get a hand cursor).  this.attachPress(this.clickHandler);  }else{ // If not, remove the event listener (which will get rid of the hand cursor, too)  this.detachPress(this.clickHandler);  }  },  clickHandler : function(){  this.fireDesignStudioEvent("onclick");  }
});

(Most people won't care about the onclick commentary, but I found it interesting).  Moving on, the real magic happens in the additional_properties_sheet.js.  Using no server upload, I do all this within the JavaScript layer by using the FileReader API (FileReader - Web API Interfaces | MDN).

sap.designstudio.sdk.PropertyPage.subclass("com.sample.superimage.SuperImagePropertyPage",  function() {  var that = this;  this._src = "";  this.init = function() {  var that = this;  $("#imageFile").change(function(e) {  var input = e.target;  if ( input.files && input.files[0] ) {        var FR= new FileReader();        FR.onload = function(e) {            that._src = e.target.result;            that.updateImage();            that.firePropertiesChanged(["src"]);        };             FR.readAsDataURL( input.files[0] );    }else{      alert("A problem occured reading the file.");    }  });  if (window.File && window.FileReader) { /* Good to go... */ } else { // Display warning for pre-IE10 versions.  alert('File APIs are not supported in this browser.  You probably need to be at IE10 or higher.');  }  };  this.updateImage = function(){    // Compute dimensions for image description snippet.    var i = new Image();        i.onload = function(){        var w = i.width;        var h = i.height;        var imgDesc = w + " x" + h + " ("+i.src.length+" bytes)";        $('#imgInfo').text(imgDesc);        $('#base64').text(i.src);        };        i.src = that._src;        $('#img').attr( "src", that._src );  };  this.src = function(value){  if( value === undefined){  return this._src;  }else{  this._src = value;  this.updateImage();  return this;  }  };
});

So what does the component do at runtime?  Let's start and see:

Start by dragging in the component, and be greeted with a placeholder image:

Let's change the image by clicking on the Browse button and then selecting a local file:

We can see that the image instantly changes (and has auto width and height, as a bonus).  You can then resize the image just like any other component, if you wish.

But what about reuse?  Hosted Image URLs can be referenced multiple times at no additional size costs.  If we were to copy this image over and over, yes the image data is copied.  For small iconography, who cares, but for larger backgrounds such as the one above, this could be a performance hit.  How to overcome?  One option would be to yes, host the dang image file, or..... use the scripting layer to copy image sources between images.  Provided with the source code is a full example, but for now, a snippet of the BIAL along with a short animation of the end-result:

Example at run-time showing image data re-use (Click image not animating):

Full source and example app is in the attached .zip (remove the .txt after downloading)

You can check out the blog Learning & Earning – How to get SCN points & badges by learning with SAP Learning Hub and the list of free courses on learning hub SAP Learning Hub Free Courses Overview

If you need help registering, see Getting access & accessing SAP Learning Hub #SAPEducation by Tom Cenens

Today I went through the Free SAP Learning Hub Course:  ODS10 - OKP SAP BusinessObjects Design Studio 1.0

If you take the course too, post a review at Free SAP Learning Hub Course:  ODS10 - OKP SAP BusinessObjects Design Studio 1.0 and you earn points and a badge.

The course contains PDFs and three long videos to help you get started.  Note that this contains ramp-up learning material from the very first version of Design Studio, so it is dated.  However, I have seen several questions in the discussion forum about how to connect Design Studio to a data source, and the videos here can help you.

Once you are given access to the Discovery Edition, you can search for the Design Studio course by typing in ODS10 in the search criteria:

Then you can add it to your plan and get started.  The PDFs are worth reviewing and I learned about a CSS tool that SAP used while making these videos:

This is the link CSSMate - Online CSS Editor - Editor and it could be useful while building Design Studio applications.

While watching the videos, I am reminded of how far Design Studio has come since the 1.0 version (current version is 1.2):

Now Design Studio supports universes, HTML5 charts, and much more.  Still, if you are new to Design Studio, I recommend starting with this free course.  I recommend having the videos run on one machine while you try to follow along doing the applications yourself on another machine.

Related:

Official Product Tutorials – SAP BusinessObjects Design Studio

BI 2014 will have Design Studio sessions

Hi all,

Design Studio SDK is opening a new way to enrich your Design Studio Applications.

When you follow the Design Studio Space you see that many people are trying to build up their first own SDK components. To support you in your first steps in doing that successfully we created a hands-on workshop together with the development team.

In this 2 days workshop you will learn all necessary steps to build your first components without or with data binding. The workshop target group are experienced developers in JavaScript and HTML. Programming basics are not part of the workshop.

Actually we offer that workshop in Germany only as the 2 developers of the SDK Reiner Hille-Doering and Lorenz Wiest are teaching you how to be successful with the SDK. In addition to the 2 events in Germany we plan to record the training to give you all the opportunity worldwide to learn from Reiner and Lorenz.

The classroom events for the training are:

14.04.2014 - 15.04.2014 in English language in our training center at SAP in Walldorf / Germany

26.05.2014 - 27.05.2014 in German language in our training center at SAP in Walldorf / Germany

You find more information in our Training Webshop with the course code WDSDK.

Hope you enjoy that unique opportunity.
Dirk

Hi there,

I developed a Tree table, using SAPUI5 and Design Studio SDK.

Since it's one of my first SDK components, I'd love to get some feedback.

Here is the code.

olafecorcam/com.leandro.gp.uitable · GitHub

I few things must be done for it to work,

1, Create a data source

2. Remove any hierarchy that it might have.

Uncheck the compact display inside the edit initial view

3. Hide all the totals (i'm working on showing it now)

That's it.

Here is what it does. The sequence that you put the results inside the Rows panel, is the hierarchy the table will attempt to create.

I'm working now on formatting the results.

Note that I used the SimpleCrostable from SAP SDK examples.

For some reason, the SAPUI5 that is included on the DS, the scroll bars of the table does not work on Chrome, so use IE to see if for now.

Any comments would be appreceated.

Inside the project there's a deployable feature (uitable.zip)

Best

Leandro

In a world where Computer applications go hand in hand with the user to make a life easier, it’s very important to identify how effectively they have been designed and developed. There are various methods to validate the software out of which one of the most important methodologies is “Code Coverage”.

The Code coverage is a measure which says how much code is effectively covered when the user uses the application. It’s important that this measure should be analyzed effectively, to improve the quality of a software application.

Let’s assume that there is an application for which the no of statements and hits are identified and I want to analyze the code coverage results on a weekly basis using SAP Design Studio with the help of HANA as a backend.

The application has sub features and each feature is developed using set of Java Script(.js) files.

Let’s name the sub features as Login, Help, Dashboard, etc

Now I know the Feature name, the name of the files(.js) under each feature, No of Statements in each file and No of Hits(how much lines covered).

Uploading the Data into HANA:

This data can be loaded into HANA using the Flat file upload option which is very familiar and easy to use approach.

Once the Data is loaded into HANA Table, do a data preview by navigating through the Schema where the table is uploaded. It will look like as below

Modeling in HANA:

We can make use of this table directly for analysis, but it’s not recommended and hence let’s make use of HANA Views to model this data

I created an Analytic View as shown below

Add the table into Data Foundation and add all the fields to Output Columns

Click the Logical Join and Create Calculated Columns which are required in our case.

Let’s see the definition of each of these calculated columns

MISS and PERCENTAGE are not required, just ignore them.

Go to Semantics node and assign the Attributes and Measures

Save and Activate the Analytic View and check the Data Preview

Now the View is ready and can be consumed in Design Studio. But before that for the ease of analysis, I would like to see the coverage as different value buckets.

Eg :      

            Below < 25 %

Between 25 to 50 %

Between 50 to 75 %

            Above 75 %

For this purpose, I created four Calculation views using Projection, covering each bucket and applied the filter in it. Below one shows the filtering of < 25 %

Consuming in Design Studio :

Create an ODBC connection to the HANA system through odbcad32.exe

Launch Design studio, Add a Data source by connecting to this HANA system and open the view

Click the Application and go to its Properties pane, add a Global Script variable. The reason for adding this variable is, we can pass this variable as URL parameter and filter the data based on calendar week while launching the application

Edit the Initial View of inserted Data Source as shown below

Similarly insert the Calculation Views also and set the Initial View as

Now in the Application->Properties->On Startup, write the following Script

Place the components in the canvas as shown below

The Title, Calendar Week filter drop down, Separate tiles for each feature to show the respective Code coverage, Four charts to show the four categories (buckets) of coverage

Place the background image for better look and feel

Assign each Calculation views to each of these charts

Now the four charts have to show the coverage of the underlying files in four buckets for a particular feature when the user click on it

For Eg, If the user clicks on the coverage value of second tile (DASHBOARD), the files having coverage in different range should be shown in the charts accordingly

To achieve this, we can write following script for the OnClick event of Text placed in the tile which shows the value

The same code can be copy pasted and changed accordingly for other Text placed in the tiles

Now Save the Dashboard and Execute

As mentioned earlier, here the Global Script variable value can be passed as URL parameter

"http://<server>:50130/aad/web.do?APPLICATION=<DashboardName>&Xcw=CW_06"

Here on clicking each tiles (DASHBOARD in this case), the respective coverage of Java Script(.js) files shown in each of the charts

On clicking HELP tile, there are no files with the coverage in the range of 0 – 25 % and 50 – 75 %

So if the user wants to find the list files covered < 50 % in each feature then he can focus more on Charts 1 and 2 which can show the files having coverage 0 – 25 % and 25 – 50 % and optimize the code.

Thanks for spending time in reading my article and Hope you find this helpful

Thanks & regards,

Murali

Hi,

I created a button component that you can use to export any table inside your application, all you have to do is include it and give the name of the table you want to export.

First add the button and the table you want(could be the crosstab or any SDK component you developed)

On the component properties, you must type the name of the table you want to export.

Test it.

Here is the excel generated, none of the formatting is carried over, but it is a start.

Here is the code.

olafecorcam/com.leandro.gp.excel · GitHub

Let me know what you think, and any improvements you might think of.

Best

Leandro

Some time ago I already made some bar charts, but now I wanted to expand it to more or less a complete version. Something one could imagine using in an actual dashboard.

With the help of the new SDK examples, the very insightful blogs of Michael Howles and the d3 tutorials here at the d3 library site (www.d3js.com) I was able to expand the bar chart quite a bit.

In April I will be attending the SDK course in Walldorf, using these kind of little projects will help me get the most out of those sessions as these will give me some hands-on experience.

As you can see the bar chart has a tooltip and a hover color. All these are set in a separate CSS file with classes that can be changed from the custom CSS file in the application. Above the bars the values are shown.

This chart will provide fake data using a random function when no datasource is assigned. I the chart is bound then it will show that data.

Finally when you click a bar you can collect the key, the tekst and the value with the methods clickedKey, clickedText and clickedValue.

Setting up a d3 chart

In the init of the SDK i’ve set up the main parts of the chart and assigned these parts to variables

this.init = function() {             var container = this.$()[0];             var width = that.$().outerWidth(true) - margin.left - margin.right;             var height = that.$().outerHeight(true) - margin.top - margin.bottom;                      chart = d3.select(container).append("svg:svg").attr("width", "100%").attr("height", "100%")              .append("g")                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");                      xAxisGroup = chart.append("g").attr("class", "x axis");             yAxisGroup = chart.append("g").attr("class", "y axis");             yAxisGroupText = yAxisGroup.append("text");             barsContainer = chart.append('g').attr("class", "barscontainer");             toolBar = chart.append("g");   

In the afterupdate a function is called that will build the graph by changing the variables that were initialised at the .init. Note that when you add elements in the afterupdate event, after each update a new element will be added to your graph.

this.afterUpdate = function() {             drawVerticalBarChart();       };

In the function the first check is to look if there is data present. If no data is bound to the chart then we will generate our own data.When we get data from the datasource we need to translate the json variable to our own json variable that fits the purpose of building the graph.

if(d3_data && d3_data.data) {                    var values = d3_data.data.filter(isNotResult);                    var names = d3_metadata.dimensions[1].members.filter(                                        function (row){     if ("RESULT" === row.type) {return false;} else {return true;}});                                    dataset.length = 0;                    for (var i=0,len=values.length; i<len; i++)                    {                            newjson = {};                           newjson.key = names[i].key;                           newjson.name =  names[i].text;                           newjson.value = values[i];                           dataset.push(newjson);                    }             }             else {                    var values = [],                 i = 0;                    end = Math.round(Math.random()*12) + 1;             for(i=0; i<randomBars; i++){                 values.push(Math.round(Math.random()*100));             }                  dataset.length = 0;             for (var i=0,len=values.length; i<len; i++)             {                     newjson = {};                    newjson.key = "la"+i;                    newjson.name =  "la-" + (i + 1);                    newjson.value = values[i];                    dataset.push(newjson);             }

Building the chart I heavily relied on the d3 tutorials and most of all this one : http://bost.ocks.org/mike/bar/3/

I added some transitions so the bars would make a transition fade with each change

                .transition()                    .delay(function (d,i){ return i * 50;})                    .duration(750)                    .ease("elastic")                    .style("opacity", 1);

With d3 you also can add onclick functions on every element. I added this to every bar

                .on("click", function(d, i) {                                          clickedKey = d.key;                                   that.firePropertiesChanged(["clickedkey"]);

building these when you don’t have the experience is stumbling from obstacle to obstacle. But once you’ve completed one you have the ability to build all kinds of visualizations that meet specific needs and cannot be done with standard component.

Hi there,

This component will allow you to create a combobox with any item you desire.

All you need to do is set the Items property with the following string pattern

KEY,TEXT;KEY2,TEXT2;KEY3,TEXT3

And the component will do the rest.

Here is the code.

olafecorcam/com.leandro.gp.combobox · GitHub

Use the following BIAL syntax to get the values inside the combo.

COMBOBOX_1.getSelectedKey();
COMBOBOX_1.getSelectedValue();

Best

Leandro

With CSS you can do a lot of interesting things in design studio. But the next step is to respond to the device that is currently viewing at your carefully made application. How can you specify how to respond based on the device? What settings can you set? In this blog I will look at some possibilities, some basic, some more advanced that help you to build an application that looks good on several xdevices.

Auto settings:
The basic setting for any component in your application are the margins and the width/height setting. With the auto setting you can set which properties are allowed to shrink/grow with the size of the screen.

On the horizontal pane you can either select left margin, right margin or width for the auto setting. On the vertical pane you can choose between top, bottom and height.

If you want to have a header for example you fix the top margin to 0 and fix the height to 50. The bottom margin is auto. This will force the component to stick on the top of the screen.

Screen size and Screen orientation

You will notice however that the auto setting does not solve everything. For example you might want to have a smaller font size on an iPhone than you want on a WQHD monitor that supports a dimension of 2560x1440 pixels.

For this kind of situation you can use the @media

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
.title { font-size: 30px; }
} 
/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.title { font-size: 12px; }
}

As you can see I made a css class .title that has a property font-size. On large screens it will be much larger. Combined with the auto settings on the panels width/height the title will grow and shrink with the device used.

if you need to find the css for a particular device, have a look at http://nmsdvid.com/snippets/ . There you can find code for a lot of different screen sizes and devices.

Browsers

Another point is that not everything you want is supported by all browsers. Especially internet explorer before version 10 does not support all the CSS3 functionality : http://www.w3schools.com/cssref/css3_browsersupport.asp

So before you want to do something fancy you might want to have a backup plan for when the browser that is being used does not want to cooperate.

For example you want to check of the browser does support SVG. Without that graphs will not render on the browser. (I am looking at you IE8 !)

@support       ((background-clip: content-box;)                    {      /* Your CSS rules here */  } 

If you for example specifically want to check if someone tries to look at your application with an old browser you can detect this by using the @support with a feature that is available for a longer time. The above example “background-clip” is available from IE9 onwards. 

Warning: if the browser doesn’t support @supports then you just have to assume it doesn’t support the functionality you tested either.

Positioning

Finally a word about positioning. A very nice extra feature is to be able to re-arrange your dashboard based on the way the user is holding the iPad

fig 1: blocks re-arrange themselves based on the orientation of the device.

To reset positioning we have to refer to the blocks in another way than simply assigning properties to the classes. The reason is the way the application is being build at runtime. If you look at the final code you will notice that what is one panel in the client application are actually two <DIV> blocks in the browser:

As we want to rearrange the position it doesn’t help us to assign a class to “PANEL_3”.

fig 2: the component div is embedded within another div that contains the properties for top and left.

We have to alter the div with the id __container4.

(note that this is not standard way of working. You cannot influence the id’s  and you may need to check after changes if the name __container4 is still assigned to the right div block)

/* Portrait */
@media screen and (orientation:portrait) {      #__container4 { top:10px!important; left:10px!important }
}
/* Landscape */
@media screen and (orientation:landscape) {      #__container4 { top:100px!important; left:100px!important }
}

Note that I added !important to the settings. This will ensure this property will override the element.style property for top and left that is standard applied. Also please refer the browser support link if it will work on your browser. For example IE 9 and 10

In the last months since the release of Design Studio 1.2 and its SDK I was fortunate to get various great opportunities to find out, what this technology is really capable of. In this blog I’d like to share some key insights and recommendations. If you are thinking about your BI tool strategy, I hope that you’ll find this to be a helpful input. Really unlocking the potential works best with the right add-ons. However, at the end I’ll also provide a quick overview, what the standard is already capable of.

Extending the Design Studio standard with Add-Ons

No matter how well and feature-rich a standard tool is designed, there will always be something missing that users want. Design Studio allows adding this functionality with add-ons developed by customers and partners. Those add-ons can be developed using a mix of HTML, CSS and JavaScript.

If you think about developing your own add-ons a good starting point are the developer guide and the samples provided by SAP. Also, there are already some interesting open source examples available. The SAP examples available as jump start are already quite impressive after few months, e.g.:

• Custom table components
• KPI tiles
• google maps
• SAP UI5 components
• Custom charts

However, a small warning in advance: developing your own add-on may be quick and easy for simple tasks. If the requirements become more complex, you’ll quickly require professional web development skills and a good test and maintenance strategy…

In my recent projects I was making use of add-ons in three major areas:

1. Visualization: Use better or different visualization to get information transferred more effectively to users.
2. Productivity tools: Build applications faster and easier by simplifying technically difficult tasks for designers or by providing new design functionality.
3. Better management process support: Increasing the value of BI by including qualitative information in the solution.

Let’s have a look at some results we achieved with Design Studio technology and add-ons.

Better visualization with Add-Ons

In charts seemingly small features can make a big difference. And if the developers of the standard chart library do not regard them as important, you now have alternatives. Graphomate is providing a chart add-on that allows very precise formatting of most elements in a chart. Furthermore, it contains special chart types that easily enable users to set up applications based on HICHERT SUCCESS and Internation Business Communication Standard (IBCS) notation rules. I recommend evaluating and using graphomate add-ons for special visualization requirements. However, if they do not cover the required functionality or there are other reasons for not using them, we develop our own solutions.

Figure 1: time series charts with deviations and condensed bars based on graphomate

But also tables can be easily formatted according to notation rules and even be enhanced with charts, status icons or trend indicators. In the following example a standard design studio table has been formatted to fit to the defined notation rules and some charts have been included. This table allows full navigation (including all hierarchy types), sorting and filtering of the data while keeping those features.

Figure 2: tables with microcharts, data type indicators and status icons

KPI tiles are another popular visualization type. In a recent project we had the requirement do provide up to 100 performance indicators to some users. We built a data model that delivered all KPIs with one query and rendered the KPI list of that query into KPI tiles. This allowed us to show these tiles dynamically based on user authorization and data availability.

Figure 3a and 3b: KPI tiles rendered dynamically from query data

Also geo visualization becomes easily accessible with add-ons. In the below example data from a BEx query is displayed in a Google map with markers, whose size and color depend on the data. The next version will also display more detailed data in popup windows for those markers.

Figure 4: Google map with markers and route from query data

So the fantastic news is, any visualization that is possible with HTML is now possible with design studio, if someone builds an add-on for it.

Better design productivity with Add-Ons

But add-ons can also help you build solutions faster and easier. An obvious example is tweaking the appearance of the Design Studio controls and tables. Instead of fiddling together lots of CSS styles every time we build and fine-tune a design studio app we adjust those settings in design studio properties of an add-on. The big benefit is, that all developers can now make look and feel changes quickly and safely.

Figure 5: setting look and feel for tables, tab bar and controls with an add-on

With a few clicks a usually visually difficult to read table can be transformed into an interesting and appealing web and mobile report. Meanwhile the context menu is not yet available in the Design Studio standard, we have also built an add-on for that. Here also individual layout and content can be defined.

Figure 6: Standard report with theme, context menu and micro charts

Also the requirement to flexibly render HTML from a query result or a web service can be made possible without developing different add-ons for each use case. All you need is an add-on that allows you to build your own HTML/JavaScript directly in Design Studio. This swiss-army-knife can let developers become creative, without the corporate difficulties of regularly deploying new add-ons on servers and development environments. The menu in figure 3a and 3b is rendered dynamically using this tool based on web service data.

Another really helpful tool we have applied is zoom-to-fit. This add-on can scale an application proportionally based on screen resolution and/or window size. Now users don’t have to worry anymore about the beamer or tablet resolution in their next presentation, the app will just zoom into place, like the old flash apps did.

With the layouting tools described it is possible to design apps with user interfaces, which are truly reusable across tablet and desktop devices – a fantastic productivity gain.

Better management processes with Add-Ons

Spicing and speeding up app development is one side. Add-Ons can also be used to add valuable information and context to the numbers. With the capability of add-ons to utilize web services we could provide a flexible commenting solution to enable entering and displaying qualitative content in Design Studio.  This solution interfaces with regular SAP BW comments or other repositories to allow a flexible reuse in other tools.

Figure 7: Commenting using a data-sensitive rich text web editor, in combination with a graphomate chart

Standard functionality in Design Studio 1.2 and expected 2014 roadmap

The functionality in the next Design Studio releases in 2014 should enable the substitution of most BEx Web applications with the new technology (see roadmap). Version 1.2 was a major milestone on this path and is available since November 2013. Many key features are already available here. However, still work in progress for future versions is planning functionality, drag & drop support and a context menu.

What we easily get out-of-the-box already are standard tables, charts, filter and navigation elements as well as a set of controls to help you build an interactive application.

Figure 8: table, tabs, buttons and navigation block with standard components using the light blue theme

All this is available from an intuitive what-you-see-is-what-you-get editor and can be deployed on desktop and mobile devices. A theme optimized for iPad devices can be chosen to easily optimize for mobile app usage.

Figure 9: charts, tabs and controls with iPad theme

Spicing up the look and feel of such a standard application is possible by including custom CSS into the solution. With this CSS code it is possible to change the look & feel of any standard component in Design Studio.

Figure 10: standard table and components with CSS optimizations

Furthermore, there are some nice little app design helpers available, like setting a fixed column width in tables and setting the scaling in charts.

The vision: Professional design once + run anywhere self-service analytics

The possibilities of the toolset are amazing. Design once + Run anywhere has become a realistic and easily accessible implementation strategy with Design Studio. The standard and add-on components allow more design flexibility, than any other BI tool in the SAP BusinessObjects world so far. Interestingly, this power is made accessible to the designer in a very simple and intuitive way with what-you-see-is-what-you-get layout editors and powerful property sheets. This actually makes the tool an ideal candidate for self-service BI in the web and mobile world. In my experience business users designing dashboards or web reports want both: powerful functionality and ease of use. In many areas the trade-offs between those two are already cleverly avoided.

However, there are some caveats in this still young tool, which make its use not trivial for more casual users. Some of them can be solved by using add-ins. Particularly, the design of the look and feel using CSS can made simple and safe with add-ons specialized in theming. On the downside, all decent Design Studio apps currently still require the use of scripting.  This is even the case for simple tasks like populating drop down boxes or applying their value selections to data sources. If those standard components would be customizable in a similar way as in the BEx Web Application Designer, the last barrier to providing Design Studio as self-service tool to power users would be removed. Now self-service is already possible, but would have to address power users that would be more development affine (e.g. capable of developing VBA code in Excel).

Based on my experience with v1.2 my conclusion and recommendation is: Use Design Studio as core development platform for all mobile and web reporting needs. It will most likely have all required capabilities for online reporting now or with upcoming versions. If a solution requires offline capabilities or PDF export, you’ll still need to watch the roadmap a little longer (but I know that there are already some smart people working on it).

Many thanks to all the developers, who have brought this fantastic technology to life!

If I may utter one wish, it would be: keep up the momentum and work on making the tool easier to use, so more people can use it.

For those interested in looking at specific customer project experiences I’d recommend the presentations held at the DSAG technology conference in February 2014 from BayWa [link] and Leica Geosystems [link].

In case you’d like to use the above add-ons in your projects or have other add-on ideas, please post below, send me a message or e-mail (it's in the profile) or connect via Linkedin.

As you may have guessed from some previous posts I am very interested in bullet graphs.

Source : Stephen Few, perceptualedge.com

The reason is that this graph type does very well in giving more information and context to a single number. You see how it does versus another period, how well versus the target. And you can define ranges of good, average and bad.

This time around I wanted to tackle another challenge. Previously you needed a datasource or dataselection for each bullet graph. I wanted to automatically create a bullet graph for each row in the data source  :

As you can see this worked out nicely. Also if you change the datasource the height of the charts will be recalculated and a new graph inserted (or an old one will be removed)

Getting the information

To really get going with the chart I first looked at d3js.org. There I found a great example to start with

http://bl.ocks.org/mbostock/4061961 from Mike Bostock.

a lot of the techniques I used in the Bullet Chart directly came from this source. Always as a first step with d3 go look for exampels. People have posted a lot of great visualizations.

Creating a graph per row

For each row in the dataset the SDK component creates a new SVG element

  bulletgraphs.enter()  .append("svg")    .attr("height", chartHeight)    .attr("width", chartWidth)

The chart height is calculated by dividing the component height by the number of rows :

chartHeight = height / dataset.length;

If the number of graphs change the graphs that remain have to be resized. I do this with a transition. The effect is that you see the grapsh ‘making room’ for the new member:

  bulletgraphs      .transition()      .delay(375)      .duration(375)      .attr("height", chartHeight)    .attr("width", chartWidth)

chartHeight is re-calculated. The .transition() method will create the transition from the old to the new settings.

Drawing each graph

To get to draw a chart with a single row I add a .each method to the bulletgraphs.enter();

  .each(function(d, i)  {

currentBulletRange = bulletRange.call(this, d, i).slice().sort(d3.descending);
currentBulletMeasure = bulletMeasure.call(this, d, i).slice().sort(d3.descending);
currentBulletMarker = bulletMarker.call(this, d, i).slice().sort(d3.descending);

d and I are references to the current row in the data. This relates to the current SVG element

using var thisGraph = d3.select(this);

you can continue drawing a graph using thisGraph as main variable and the above variables for data references with for example the scales :

var xScale = d3.scale.linear()
 .domain([0, Math.max(currentBulletRange[0], currentBulletMeasure[0], currentBulletMarker[0])])
.range([0, 500]);

Conclusion

Using these techniques I was able to create a group of bullet graphs bases on one datasource. It is data bound but if you don’t have data assigned it will create fake data for prototyping purposes.

Next step for me is to dive deeper into the json data coming from the datasource. Working with the tuples.

On the 14th and 15th of april I will be attending the SDK course in Walldorf. Perhaps I will meet you there!

You may well have seen this analogy before for the topic of “Big Data”, could the same be said for SAP Design Studio and connecting to data through the universe?

I may be barking up the wrong tree but a year or so after its launch SAP Design Studio appears to be making little traction in the dashboard space for SAP in the UK market.  (I base statement on my contact with companies through my day job and engaging with business users through the UK&I SAP User Group and Data Visualisation Special Interest Group.)

To be honest the majority of companies I have spoken to thus far are what you may call "Agnostic SAP BO Enterprise customers". Is the real adoption rate different for companies who use SAP BW as their primary datasource instead of the classic BOBJ user community using the universe connectivity?

Is this observation the same worldwide?

Why aren't companies adopting SAP Design Studio?

We have seen in the Dashboard statement of direction from SAP that there will be convergence between SAP Dashboards (aka Xcelsius) and SAP Design Studio in the future and migration tools to bring Xcelsius Dashboards into Design Studio.  So why aren't companies adopting SAP Design Studio now at the start the journey rather than holding off?

My musings are:

• People are holding off as the data visualisation and dashboard space is moving very fast, just look what SAP Lumira has achieved in a similar time frame to Design studio.
• People aren't even evaluating Design Studio as unless you are hooked into a SAP User group (UKISUG, ASUG) there is little marketing or education as to the future for dashboards and they just don't know about its importance.
• People are evaluating Design Studio and identify it requires a developer with specialist skills with they do not have internally and would need to  engage with a central IT function or consultancy providers
• People are evaluating Design Studio but it is seen as too complicated to use with its reliance on Java code and Custom Style Sheets (css).
• People are evaluating Design Studio but it is seen as still too juvenile to adopt as core functionality needed is missing.
• Users would rather have something on their desk than can build and deliver themselves rather than endure a dashboard project delivered by the IT department
• You have to ask yourself why products like Decision Point from Antivia are coming to market? Is SAP Design Studio seen as too difficult for the existing developers in the SAP dashboard space by software companies and they want to offer a alternative solution?

When oh When will Design studio be as easy to use as SAP Dashboards (Xcelsius)?
Is that the right question?  Is that the plan by SAP? I'm not so sure. I would draw a parallel with Dashboards and Design Studio with Crystal Reports and Web Intelligence.

Crystal Reports didn't get easier to develop content in when Web Intelligence was bought to market, it still today does what it does very well and is a core analytic tool for SAP. However, in my opinion moving from Dashboards (Xcelsius) to Design Studio could be seen as the reverse, the more complex tool is being released to replace the simpler tool. The diagram below shows my understanding of the content creators for the SAP Analytic tools in BI4.

There are still lots of technologies in the hands of the Business User but we see here that the future technology recommended to author “Dashboards”  has moved from being one used by Business Users to now an IT function.  ( “What is a dashboard really” http://thinkingbi.wordpress.com/2012/07/17/what-is-a-dashboard-really/)

Real life feedback

Reaching out to end users who have tried Design Studio gave some interesting feedback. Thanks Alex for the comments below as someone who has tried Design Studio against BW and the Universe.
“What left me very disappointed was the amount of code required to make things happen when stuff like this seems so simple in WEBI for example. Creating a Navigation URL took 6 lines of code! Then what annoyed me even more was the fact that the link only worked if you clicked on the last column of the crosstab?”
“My Boss loved the output I hated the input! Nevertheless I pursued and tried to create more applications with his requirements, I then hit an even bigger stumbling block, line chart, Data retrieval failed. Upon investigation of this by turning on the trace and watching the logs it was limiting the amount of data it could retrieve. I found the answer myself in the documentation saying it is (universe connectivity) limited to 5000 rows or 50000 cells. I am not trying to show this much data I was trying to show a count of Incidents by Year and Month”

What about business user created dashboard style visualisations?

At this time I see multiple technologies used by business users to deliver a “Dashboard” including:

• MS Excel
• Dashboards (Xcelsius)
• Exploration Views in Explorer
• Web Intelligence
• Web Intelligence delivered to the mobile device

What will business users use to create dashboard style visualisations in the mid-term?

Below is clear advice from SAP on what technology they encourage to be used.

Exhibit A

My personal hunch is that business users will still use the core technologies they are used to in the short to medium term and only branch out Design Studio if it gets easier to use.

Is there another option?

Its again early days but I think some companies may well start investigating SAP Lumira storyboards published to the newly released native HANA platform application SAP Lumira Server.   Yes you will need HANA and integration to the BOE Platform is planned but only as a side car.

SAP Lumira Server 1.15 is now Generally Available (GA)!  http://scn.sap.com/community/lumira/blog/2014/03/10/sap-lumira-server-115-is-now-generally-available-ga

SAP Lumira Server Frequently Ask Questions  http://scn.sap.com/docs/DOC-53181

My conclusion

Please remember before commenting below too harshly that I am coming from the perspective of the Agnostic SAP BO Enterprise customer shown in Exhibit A above.

The public roadmaps state that the goto tool for designing dashboards going forward will be Design Studio following a convergence with SAP Dashboards (Xcelsius) Follow up questions to the Dashboarding Statement of Direction. As Design Studio currently, and I understand long term, will require the use of java coding for developing content this tool will surely sit most commonly within an IT development function, not with business users where SAP Dashboards (Xcelsius) is commonly used today.

Where then is the business user's dashboard development tool to allow them to create content themselves?  There are of lots of options to create dashboard style visualisations with the Business Objects stack already including Web Intelligence, Exploration Views and Lumira but which one will fit this need in the future?

Time to peer into your crystal ball and choose a "horse to back"

Hi All

I just posted these ideas. Not earth shattering but thought they were nice to add

Graphs should be showing 'fake data' when no datasource is assigned

Often when prototyping not everything in the background is in place. It would be quite handy when you were able to just show fake data to give the user a feel for the dashboard. In the current state you see an empty box that really does not help much.

Graphs should be showing 'fake data' when no datasource is assigned : View Idea

Organize global variables in APPLICATION component

Organize global variables in APPLICATION component : View Idea

When building larger applications the number of global variables tend to increase too. As the number increases it would be very nice if you were at least able to sort/arrange them to make it easier to have an overview. Not necessary but nice would it be if you also had an option to group them for overview purposes

There are already a number of ideas in the Design studio overthere. Take a look and vote for the ones you think are the most valuable. Perhaps that may be just the tipping point for something to be included a bit sooner than otherwise :-)

SAP: Enterprise Home    

SAP's Global Center of Excellence provided this presentation today, discussing both Dashboards and Design Studio.

SAP said Xcelsius has drawbacks. It started as an end user tool, click, drag and drop – easy to use; users wanted more.  As user needs to change, tool became sophisticated. Sophistication = complexity.  Tool has a good user experience but not enough for IT – design becomes more complex.

Moving to a different user experience in terms of design and consumption

With "Agile visualization" users are empowered to tell their own story.  With self service they can consume data that they need "on the fly"

Figure 1: Source: SAP

As Figure 1 shows you move from static view on left to applications on the right.

With Design Studio there is "Less limitation on pulling back an entire dataset, custom branding and styles"

The application side is for customization

The upper right of Figure 1 shows three areas in portfolio

SAP said today that "Design Studio is the future of dashboarding for SAP"

They also said "this is not end of life for Xcelsius"

Why so many tools? Through acquisition

Figure 2: Source: SAP

Xcelsius creates instantly compelling visualizations; biggest drawback was amount of speed it brings back data.

It is difficult to get a lot of data in Xcelsius and have it have acceptable performance

SAP BEx Web Application Designer is tied to BW; it could handle massive amounts of data.   It does not have ability to create compelling visualizations

It needed more interactivity, mobilization

SAP needed the technology to mobilize Flash, and performance with BEx WAD

How to move forward and tool that worked with both sides required a "complete re-architecture" to provide good design experience

Figure 3: Source: SAP

With Dashboards SAP began by mobilizing components with new HTML5 rendering engine, starting with BI4 SP5

SAP then introduced Design Studio for BW and HANA.

The first release of Design Studio was entirely HTML5, with every component is mobilized in Design Studio

Not every component is mobilized in XCelsius

Today we are In the Visualize stage, of Figure 3.

The future is one tool for building a dashboard but it is not Lumira, not self-service

There are "No plans to end of life Xcelsius but it will be put into maintenance mode at some point".  Updates to BI4.1 will protect it

SAP "does not want anyone to abandon investment made"

"New functionality and features will only happen in Design Studio" said SAP

Now focused on tablets and phones because you don’t interact with phone like tablet.  Phone is small and form factor and interactivity

Design Studio uses HTML5 exclusively – desktop and mobile

Figure 4: Source: SAP

Design Studio includes universe support; it is a different approach than XCelsius

SAP said to "think about long-term ramifications of this; XCelsius relies on Excel – do not want to bring in a lot of data and calculations due to speed"

Figure 5: Source: SAP

If you don’t want to create SDK, talk to partners

If you have a need for visualization/widget you can do this with the SDK

Another partner is doing geomapping

Another partner adds commentary

Another partner allows you do use Xcelsius in Design Studio (only works with HTML5 content) – next release they plan to use SWF files

Figure 6: Source: SAP

Figure 6 shows where at with the Roadmap (subject to change) and where planning to be in few months

Middle column is what is planned for 1.3

Third column is for inclusion in later release

Note that this is the current state of planning

With 1.3 it includes planning for BW and write back

SAP is considering a HANA native deployment option – deploy to HANA

Release 1.3 includes charting – 120 chart types available from CVOM –

SAP has added conditional formatting in charts

Support is planned for Lumira visualizations

Version 1.3 will have application bookmarking and visualizations – work with data, analyze it – “come back to where you were” – capture as a URL to send to your team

Design Studio 1.3 has a Fiori-style dashboard

The Future

Future is 1.4 and beyond.

For the BW side includes RRI support, with interactivity features from BEx WAD – closing the gap

SAP plans to offer offline views, migration tools, improve interoperability with Lumira.  This includes building apps from Lumira Data Sets, building a Design Studio app from a Lumira Storyboard.  This does start to blur the line for self-service & dashboarding & apps

Resources provided by SAP:

Dashboarding Strategy and Statement of Direction

• http://blogs.sap.com/analytics/2012/04/17/the-future-of-dashboards-strategy-and-direction/

Executing on the Statement of Direction

http://blogs.sap.com/analytics/2012/04/17/the-future-of-dashboards-strategy-and-direction/

SAP BusinessObjects Design Studio Tutorials

Official Product Tutorials – SAP BusinessObjects Design Studio

SAP BusinessObjects Design Studio Community

SAP BusinessObjects Design Studio

Figure 7: Source: SAP

Towards the we ran out of time to cover this but it is an important slide.

Design Studio is covered at ASUG Annual Conference - it s also part of the ASUG hands-on pre-conference session:

SAP BusinessObjects BI 4.1, SAP BW, and SAP BW on HANA - All in One Day June 2nd

Disclaimer:

The content of this blog refers to variables of data sources in BW systems. In Design Studio data sources can refer to BW systems (Queries), HANA systems (Views) or DSL universes. All of them support the concept of variables. However the content below describes the behavior of BW data sources only.

Overview

Design Studio supports the concept of variables within data sources. Variables can be set via script or interactively in the UI of the application.

Setting a variable value via script can be done via the “setVariableValue” API:

   APPLICATION.setVariableValue("0VC_CUST_NODE", "000101");

To give the application user the possibility to enter variable values the “openPromptDialog” API can be used:

   APPLICATION.openPromptDialog(600, 400);

This API shows a UI that allows entering values of all variables inside the application.

Where is the beast?

There is one thing that you might have noticed from the stuff in the overview. Variables “belong” to the data source. However the API to set variable values is part of the APPLICATION object. The reason for this is a concept called the “Variable Container” (VC). The VC provides some very useful services for application developers. The VC combines all variables of all data sources in the application. In addition the VC performs “variable merging”. This means that if multiple data sources provide the “same” variable then the VC treats them as one variable.

Example:

In an application there are 4 data sources using a “COST_CENTER” variable. If an application wants to show data from a cost center, then (without a VC) the application code would need to set variable values for all data sources (just for illustration purpose – this API does not exist) :

   DS_1.setVariableValue("COST_CENTER", "4711");

    DS_2.setVariableValue("COST_CENTER", "4711");

    DS_3.setVariableValue("COST_CENTER", "4711");

    DS_4.setVariableValue("COST_CENTER", "4711");

Using a VC with variable merging shrinks this to a single call:

   APPLICATION.setVariableValue("COST_CENTER", "4711");

In the UI the situation would be even worse (i.e. more explicit to the end user) without a VC. In our example the “openPromptDialog” would display the “COST_CENTER” four times:

In such a UI the user must enter the cost center four times, all with the same value. Such a behavior is not desired. Therefore the “variable merging” merges all 4 “COST_CENTER” variables into one:

What does the beast do?

The variable container does really cool things. So what’s the deal?

Like all things in life this comes with a price. The variable container has a significant effect on the application’s performance.

Whenever the variable container changes, ALL data sources inside the variable container are invalidated.

There are three aspects that application developers need to know:

1) All data sources of an application that have at least one variable join the VC. These data sources share the ”invalidation life cycle” with each other (see 2. and 3. below). Only these data sources that have no variable at all are not inside.

2) The VC changes whenever a value of a variable changes. I.e. a call to “setVariableValue” invalidates all queries in the VC – also the queries which do not reference the variable that was changed.

3) The VC changes whenever a new data source joins the VC. A data source (with variables) joins the VC when it is loaded via “loadDataSource()” or re-initialized via “assignDataSource()”. As mentioned above this invalidates all data sources that are already part of the VC.

What else should I know?

A special context to consider when using variables is the application startup. The common place to put code that runs at startup is the “On Startup” event of the “APPLICATION” object.

During the “On Startup” event “normal” data sources (those which have “Load In Script” set to “false”) are already initialized. E.g. you can get values from a data source using “getData()” within the “On Startup” event.

This implies that data sources with variables have been initialized using the default values of these variable.

Calling “setVariableValue” during “On Startup” will trigger a re-initialization of all data sources in the VC. This additional re-initialization is a performance penalty that should be avoided. This can be done by moving code that initializes variables into the “On Variable Initialization” event:

The availability of the “On Variable Initialization” event allows initialization of variables at startup while preserving the concept that data sources are “ready to use” in the “On Startup” event.

What should I do to improve performance?

1) Try to use/find/create queries without variables

As mentioned above a query that has at least one variable will trigger that the data source joins the VC – even if the variable is not used in the application. If you have the appropriate permissions you could create another version of such a query without a variable. Alternatively you could remove the variable from the query if the variable is not used within other tools.

2) Beware of “setVariableValue/Ext” - Use “setFilter” even if a corresponding variable is available

In other BW related tools variables were a primary mechanism for filtering data. Modern script based tools (like Design Studio) provide a more lightweight mechanism by offering script APIs like “setFilter”.

Even if a variable is available for filtering then the “setFilter” API should be used instead. As stated before the “setVariableValue” always affects all data sources in the variable container (even if they are not related to the variable used in the “setVariableValue” call).

The “setFilter”-API affects only the data source it is called on. There are no side effects to other data sources.

However variables are also used for other purposes than filtering. In such cases the usage of variables is still necessary.

3) Use “On Variable Initialization” to set variable values at application startup

At the beginning of “On Startup” all data sources (except those with “Load In Script” = “true”) are already initialized. Calling “setVariableValue”  during “On Startup” will trigger re-initialization of all data sources that are in the variable container.

To avoid this double initialization “setVariableValue” calls should be moved from “On Startup” to “On Variable Initialization”

4) Have a close look at “Load In Script” data sources joining the variable container

In most cases a late initialization of a data source is a good thing. It helps to increase the startup performance. However when several data sources are already in the variable container, the initialization of an additional data source with variables (using “loadDataSource()”) invalidates all other data sources in the VC.

There is an optimization in Design Studio that delays the invalidation of the other data sources. I.e. immediately after “loadDataSource()” only the newly loaded data source fetches data from the BW system. However the other data sources in the VC are invalidated in the background. The next access to these other data sources (e.g. calling “getData” or scrolling in a Crosstab) will trigger a re-fetch of data from the BW system.

Just yesterday a new blog was published on blog.sap.com.

This blog tells about SAP BusinessObjects Design Studio on top of SAP HANA and SAP NetWeaver Business Warehouse 7.3 on SAP HANA . We worked on this from oktober until december and after the end of the proof of concept it was decided to continue with Design Studio.

At the moment of the POC we were still working with the 1.1 version and our challenge was to show that we could build a working version of some of the most complex dashboards they had developed with SAP Dashboard.

They have an interesting concept where everything it masterdata driving which means that you can control a lot of functionality within the dashboards without actually doing anything in the dashboards themselves. Masterdata control extends up to attributes of KPI's telling which numbers should be shown, which graphs, if a table should be shown and if there is a drill down report where you should be able to go to.

At the moment a lot of new projects are emerging where we design and build new dashboards with design studio.

Have a read and let me know what you think :

http://blogs.sap.com/analytics/2014/03/26/financial-services-company-drives-localization-strategy-with-big-data-and-sap-businessobjects-design-studio/

Jeroen