If you encountered some issue while launch Design Studio client tool, the following steps may help you overcome the issue.

Step 1：

uninstall the Design Studio Client and delete the whole installation directory in case there is something left

C:\Program Files (x86)\SAP BusinessObjects\Design Studio

Step 2:

rename the following 2 folders:

C:\Users\xxx\Analysis-config

C:\Users\xxx\Analysis-workspace

Step 3:

Now reinstall Design Studio Client

(Download following patch and apply)

Support Packages and Patches

->A-Z

->D

->SBOP DESIGN STUDIO

->SBOP DESIGN STUDIO 1.5

->DESIGN STUDIO CLIENT 1.5

->DS_CLIENT01P_1-80000553.EXE (latest patch level should be used.)

Best Regards,
Ivy

Are you going to be at SAP TechED in Las Vegas ? Are you working on Design Studio projects ? or are you considering migrating your Xcelsius / Dashboards projects over to SAP BusinessObjects Design Studio ?

Then you should come by next week to our Visual BI Booth  #172 and ask for a demo of our Visual BI Extensions for SAP BusinessObjects Design Studio.

We will be releasing our new version pretty soon, so lets take a quick look at some of the highlights of the new release.

Charts

We added a few new chart types: Bubble, Tag cloud, Box Plot, Marimekko - but more important we added the ability to do a drill down by either using multiple dimensions or by using a hierarchy. The drill down capabilities are either a true drill down or an inplace expand / collapse and we also offer a true hierarchical labeling

In addition we added the option to show Trendlines and to add Error Bars to your charts.

To allow your users to quickly switch between the different chart types - we also added a new component - the Chart Selector - which can be combined with our common Chart container - and then allows you to quickly switch between the different chart types.

In addition to those highlights we added several other new features such as a new Sparkline Table component, Bullet Charts as Sparkline chart, ...

Maps

In the maps category we added now the option to also use a GeoJSON Syntax as basis for your maps. It is optional as we also have over 400 standard maps understanding the typical geographic abbreviations varying from the World to for example United States on a county level.

We also added the option to now navigate from a regional map - like US with states - to a Longitude / Latitude based map and we now offer a "lasso" style selection where the user simply can select several markers - for example - in a map for filtering.

New Components

We also added a few new components:

• Multi-Select Listbox with alerting capabilities
• Combobox with alerting capabilities
• Slider component
• Facet Navigation component

The slider component allows you to either configure a fixed numeric range, or a date based range, or a set of values based on a dimension (including the Key Figure dimension) and you can choose to have a single or dual slider and it also allows you to configure a conditional highlighting.

The Facet navigation component gives you the ability to select which off the dimensions from the data source you would like to leverage, how you would like to represent the dimension values - perhaps as Radio buttons - and if you would like to include the dimension for the Key figures as well.

In addition you can apply sorting, define the sorting for all the dimensions, and several other options.

In addition we added the option to export the dashboard to a PowerPoint file, made several enhancements to our table - for example replacing the display of a measure with an alert - and we added a Responsive container that allows you to define how your dashboard should behave in situations where the size and orientation of the screen is changing.

In case I was able to awake your interest - come by and see me at SAP TechED next week @ our Visual BI Booth  #172.

If you were always wondering what kind of variable selections you could use with your DesignStudio queries and how to expose that functionality without the boring standard dialog, today is your luck day. In addition to that I am going to introduce you to the shiny world of sap.m or at least give away the secret how to load the sap.m library discovered by Karol Kalisz.

sap.m.MultiComboBox

The MultiComboBox is just perfect to be used with BEx query multi selections. Most of the time you can get away with ranges but sometimes it is unavoidable to pick multiple single values. The SAP standard dialog supports all possible BEx variable options.

     Figure 1: SAP standard dialog, multi and range selection example

That approach works out of the box and handles wrong input gracefully. The only downside is that you can’t customize the selection screen except for some CSS tricks (and/or SAP themes) to adjust the look and feel by manipulating DOM elements. The classes involved use the prefix zenDialog* for example. Now what is left to do if a client tells you to adjust the variable selection screen anyway?

You build your own screen of course. After all you are the expert, right That’s where the DesignStudio selection components come into play.

• Dropdown Box
• Date Field
• List Box

They support single selections and ranges. For ranges it usually makes sense to use two of them (e.g. date from and date to). It is also possible to construct more complex selection scenarios by combining several components (e.g. Dropdown + Check Box to switch variables on box checked or not) via scripting. So far so good but what about multi selections? You could think of a crazy workaround with global scripting variables and functions using standard components. But that is light-years from being easy to use and maintain. The MultiComboBox ticks all the boxes for us. Let’s take a peek into it:

     Figure 2: MultiComboBox dropdown view

The UI5 MultiComboBox basically enhances a simple dropdown with checkboxes that remember your decisions and tokens that serve as visual feedback for your selections once the dropdown menu area is closed. In addition to that, you get an input area with auto-complete for the values you type in and an easy to use delete functionality either through the close button or by pressing delete/backspace on your keyboard. Awesome component isn’t it?!

Now we have all the tools to replace the SAP standard screen. You can switch it off by putting “Force Prompts on Startup” to false on the APPLICATION object (top level element of your outline tree) of your app and load your data sources in script. Otherwise, when not provided with variables, your queries will trigger the standard screen by themselves during the load phase.

How does the scripting actually work?

There are two major script functions you will need to use. They are called setVariableValue and setVariableValueExt. They are available on the APPLICATION object and on your data source aliases. This is important, if you are using the option “Merge Prompts” (check the further reading section for additional info regarding that topic). In the following I will give some examples for values to achieve various selection scenarios:

• Single selection (internal format): Date 10/12/2015
  • DS_1.setVariableValue(“DATE”,“20151012”);
• Single selection (external format): Date 10/12/2015
  • DS_1.setVariableValueExt(“DATE”,“10/12/2015”);

This could also be 10.12.2015 depending on your locale

• Range selection: Company code 10US – 11US
  • DS_1.setVariableValueExt(“COMPCO”,“10US – 11US”);

Ranges always need to be applied using external variable representation. Also important are the spaces before and after the dash. If you don’t stick to the syntax your DesignStudio dashboard will crash! Same goes for wrong range declarations in terms of entry order like 11US – 10US for example.

• Empty/All selection: Simply select all values
  • DS_1.setVariableValueExt(“COMPCO”,“”);

Empty selections always need to be applied using external variable representation. Otherwise you will get COMPCO = “#” instead, which is “not assigned”.

• Multi selection: Select multiple company codes 10US, 11US and 13US
  • DS_1.setVariableValueExt(“COMPCO”,“10US;13US;11US”);

Multi Selections need to be applied using the external variable representation as well.

• Complex multi selection: Select some company codes but exclude those being bigger than 13US
  • DS_1.setVariableValueExt(“05US;07US – 10US;>13US”);

Find more examples on the DS15 user documentation chapter 32.1.18.

In general all of the variables you are adjusting through scripting need to be input ready.

My MultiComboBox SDK implementation allows you to retrieve your value selection using the following methods:

• getSelectedKey

This method returns a string containing an array of keys of the selected entries (for example [“10US”,”13US”,”11US”])

• getSelectedText

This method returns a string containing an array of all the texts of the selected entries (for example [“SAP AG”,”SAP Pty”,”SAP Ltd.”])

• getSelectedKeyBexReady

This method returns a string containing all the keys of the selected entries separated by a semicolon (for example “10US;13US;11US”). Due to that you can put the result into setVariableValueExt method right away.

The other return values need some additional parsing before they can be fed into the variable value methods. You could for example use the SCN community’s SDK array util component to achieve that.

Note: The strings of arrays will be replaced with Karol’s loop-able arrays as soon as I find the time to make the adjustment.

MultiComboBox properties

     Figure 3: MultiComboBox DesignStudio properties view

You can either assign a data source using data binding (and select a specific dimension) or use my scripting method setItems. The method takes a string as argument which has to contain a JSON object holding the key value pairs. The easiest way to provide the correct structure is to use the SCN community’s SDK Collection component and method getCollectionAsJSON. Depending on the BEx query setup you might want to define some layout options. You can specify the sorting property by key or text and direction (ascending or descending), define if you want to skip result rows and texts for the default checkboxes. Those checkboxes enable the user to select/deselct all entries at once.

In addition to that two event are exposed. On every checkbox-click on the dropdown the onChange event is triggered. The selectionFinished event fires when the dropdown area closes. Unfortunately there is an UI5 bug in DesignStudio 1.5 which doesn’t register the selectionFinished event properly on IE and Firefox. Only chrome still works correctly. In order to avoid unexpected selection results I moved the selection routines to the onChange event which impacts on the user experience but ensures correct selection any time. The Bug is fixed on the newest UI5 release. Therefore I hope the MultiComboBox will be fully functional again on DesignStudio 1.6. My first DesignStudio 1.4 version however works perfectly. You can check out the old version on our deprecated rel-1.0 branch on the community repository. Find the link to our master repository at the end of this post.

I will let you know if 1.6 fixes the problem as soon as possible.

Loading sap.m

As a first start to develop a SDK component on top of sap.m you might try the following:

jQuery.sap.require("sap.m.MultiComboBox");

sap.m.MultiComboBox.extend("org.scn.community.databound.MultiComboBox", {

…

}

That will work to some extent. But you will soon notice, that all of the MultiComboBox events are not registered and you basically can’t use it at all. Luckily Karol Kalisz established a workaround to load sap.m into you DesignStudio SDK component properly. You can find some more in depth info to the problem here:

http://scn.sap.com/message/15769661#15769661

http://scn.sap.com/thread/3643674#15782624

Karol’s solution, which I also used for the MultiComboBox on the SCN community repository, looks as follows:

jQuery.sap.require("sap.m.MultiComboBox");

//mark forced re-load of sap.m events bundle 

oCfgData = window["sap-ui-config"] 

// check of the library sap.m is already in declared libs (to avoid second execution) 

if(oCfgData.libs.indexOf("sap.m") == -1) { 

  // append the information that sap.m is loaded 

  oCfgData.libs = oCfgData.libs + ",sap.m"; 

  // load sap.m and sap.me 

  var oCore = sap.ui.getCore(); 

  oCore.loadLibrary("sap.m"); 

  if(!sap.ui.Device.support.touch) { 

    // unload events bundle 

    jQuery.sap.unloadResources("jquery.sap.events.js", false, true, true); 

    // reload events bundle to assure that sap.m events are active 

    jQuery.sap.require("jquery.sap.events"); 

  } 

} 

sap.m.MultiComboBox.extend("org.scn.community.databound.MultiComboBox", {

initDesignStudio: function() {

…

},

afterDesignStudioUpdate: function() {

…

}

}

This approach is considered temporary until SAP provides standard means to load the sap.m library.

Final words

I hope you can put the MultiComboBox to some good use. To me it actually was the missing piece to be able to replace the SAP standard variable dialog entirely.

As great as the workaround for sap.m is we hope that the library will finally be supported by DesignStudio 1.6.

You don’t know the DesignStudio SDK community? You haven’t downloaded our SDK components yet? Find us, our SDK repository installation link and the MultiComboBox over here:

http://scn.sap.com/community/businessobjects-design-studio/blog/2014/12/10/scn-design-studio-sdk-development-community

Thanks to Karol Kalisz and Mustafa Bensan for doing the research and finding a solution to integrate sap.m despite all the obstacles.

As always feel free to ask lots of follow up questions.

Yours

Martin

Further reading:

• Variable unmerge scenario:  http://scn.sap.com/docs/DOC-63888
• Variable synchronization:     http://scn.sap.com/docs/DOC-64462
• Sap.m.Button discussion:    http://scn.sap.com/thread/3492679
• Sap.m.List problem:            http://scn.sap.com/thread/3643674

SP2 for Design Studio 1.5 is released, you can access the content via SMP:

Service Marketplace, Design Studio 1.5 Support Packages

The next delviery is 1.6 release, planned for last week of November 2015.

Update.

Release Note for SP 02, 2179445

The note is always linked from the download area, under the "Info" link.

In this Blog I will explain:

1)  How to create a bubble chart in Design studio.

2) Based on selection of a particular bubble filter and show the data in cross tab in detail.

3) A button used to reset the filters and show all the data again.

The script above filters the data source "DS_1" based on the selection.I have used the following script.

Datasource.setFilter(dimesion,value);

So whatever you select from the bubble chart only that particular set of record will be appearing later and rest all will be filtered out.

setFilter excepts two input parameters, dimension (can be any attribute or dimension from your data source, in my example it is "Material") value is the Material value say the are few materials like (chair, table etc) you can add chair here as hard coding or we can get the selected dynamically using the follow script. Chart_1.getSelectedMember(Material.text).

So the entire script looks this way

Datasource.setFilter(Material,Chart_1.getSelectedMember(Material.text));

So once you select any one bubble out of the available only that is seen in the bubble chart as well as cross tab, since we filter the datasource and the binding for both the cross tab and bubble chart is using the same datasource i.e DS_1

After this if we want to see all the items, then there is need of refreshing the report. In order to avoid this we will see how to clear the filter ans show the entire data again for the selection.

Hope it was useful for you. Let me know your views and comments. Happy reading and learning.

Design studio rocks. I am still exploring the possibilities.

Thanks & Regards,

Vijay

This is part of a tutorial series on creating extension components for Design Studio.

In our last installment, we too our first baby steps with D3; drawing a colored arc with defined inner and outer radii. We did this in raw html and the next step here will be to bring this into Design Studio.  To do this, we’ll need to do two things:

1. We’ll need to ensure that D3 is available to Design Studio’s component.
2. We'll need to copy our javascript from the html file to the component's component.js file and adapt it for life within a component.

Starting with your component project open in Eclipse:

Step 2b.1 -

Our first challenge is with adding includes in Design Studio components.  We actually did this for our component.js file in Step 1.10f, when we set up our component.  The <jsInclude> element lets you define any Javascript file that is going to be imported and can be an internet URL, or a local filepath.  Now we could import D3 this way and grab it from the location that we used in the <script> element of our HTML file.  It won't work, however.  The problem is that D3 - as it currently stands - does not play nice with Include.js; which Design Studio's SDK uses to manage diverse javascript packages.  Therefore, Design Studio's SDK includes a patched D3.  Libraries that ship with Design Studio's SDK can be accessed via another tag; <stdInclude>, with the attribute indicating the kind of standard include.   So, just above your jsInclude  for the component.js file, add the following line:

<stdInclude kind="d3"/>

Note.  In our original component setup, we'd already accidentally included it in the provided component.xml, even though it was not mentioned.  So if you simply copied it from there, then it is already in.

Step 2b.2 -

Recall from Step 1.9 of the project setup instalment, that our component.js fille currently looks like this:

sap.designstudio.sdk.Component.subclass("com.sap.sample.scngauge.SCNGauge", function() {

 

     var that = this;

 

});

Inside of this subclass, we are going to override the init() function of the parent class.  You can leave the contents of the function blank for the moment:

sap.designstudio.sdk.Component.subclass("com.sap.sample.scngauge.SCNGauge", function() {

 

     var that = this;

 

     this.init = function() {

 

     };

});

Step 2b.3 -

Let's start by copying and pasting the PI declaration from step 2a.2 of the last instalment, so that we don't forget it.  While we're at it, let's declare it alongside the that = this declaration, so that it is accessible outside of the init() function.  Our component.js should not look like this:

sap.designstudio.sdk.Component.subclass("com.sap.sample.scngauge.SCNGauge", function() {

 

     var that = this;

     var pi = Math.PI;

 

     this.init = function() {

 

     };

});

Step 2b.4 -

As you may recall from step Step 2a.3  of the last instalment, we attached an svg container element to the div that we'd set aside for holding our visualization.  We were looking for a div with the tag "#content" and attaching our svg there.  For review, that line of code looked like this:

var vis = d3.select("#content")

                    .append("svg:svg")

                    .attr("width", "100%")

                    .attr("height", "100%");

We'll be doing something conceptually similar inside of our init() function; attaching an svg element to a div and then working with it.  The key difference is that previously, we were working directly with the html document DOM and in Design Studio components, this is a discouraged practice.  You should stay within your component handler, for the sake of security and stability.  (in fact, SAP won't certify a partner component that goes outside of its handler)  The syntax is slightly different.

We'll still be using D3's select method to get our div, but we won't be passing a tag to it.  We'll first ask the component handler to giv us the div and we'll then pass the div itself as the parameter:

var myDiv = this.$()[0];

Let's break this down.  this is the handler instance.  The $() is a Jquery method for getting the root div within the handler instance. $ is shorthand for Jquery and you'll often see it in JavaScript code that uses Jquery.  If there is an id parameter, tag parameter, or a css class parameter, we'd take that, but if the S() call has an empty, it will select the root div.  Since this returns a list, we'll take the first element.   As you may recall from Step 1.9 of the initial project creation instalment, we can't *always* be certain that this is in fact the component handler and that the scope might have changed on us.  That's what we declare a variable named that and set it to this,  We'll use that here, instead of this.

So now we can actually add the line to init():

var myDiv = that.$()[0];

Now that we have the div, we can select it and attach the svg element:

varvis = d3.select(myDiv)

                    .append("svg:svg")

                    .attr("width", "100%")

                    .attr("height", "100%");

Step 2b.5 -

Copy and paste the rest of the Javascript code from last time; specifcially the parts from steps 2a.4 and 2a.5.  Your component.js should now look like the following:

sap.designstudio.sdk.Component.subclass("com.sap.sample.scngauge.SCNGauge", function() {

 

     var that = this;

     var pi = Math.PI;

 

     this.init = function() {

          varmyDiv = that.$()[0];

          var vis = d3.select(myDiv).append("svg:svg").attr("width", "100%").attr("height", "100%");

 

          var arc = d3.svg.arc()

                         .innerRadius(0)

                         .outerRadius(70)

                         .startAngle(45 * (pi/180)) //converting from degs to radians

                         .endAngle(3) //just radians

 

          vis.attr("width", "400").attr("height", "400") // Added height and width so arc is visible

               .append("path")

               .attr("d", arc)

               .attr("fill", "red")

               .attr("transform", "translate(200,200)");

     };

 

});

Step 2b.6 -

Start Design Studio in debug mode, with the component project open.  Add the gauge component to the canvas of an otherwise blank DS app.

Note that even though the component is supposedly a 100pc x 100px component, the arc is actually entered on a position offset 200x200 from the origin.  That's because we've hardcoded our gauge's size and offset and ignore what's in the properties pane.  In a later instalment, we'll fix this.

Next Instalment: Part 3a - Making the Arc Configurable

One classic requirement while developing dashboards is to visualize a particular KPI trend. In most cases, the trend analysis view would be depicted as a Trailing Period from the current month or Quarter or day.  At times, there are scenarios where customer wants an option to change the N in Trailing N months/quarters/days at run time (N being the number of months).

In this blog, I will explain my particular scenario and how I implemented a solution to change the Trailing N months (this concept can also be used to calculate for following N period such as year, quarter, month, date)

Scenario

The requirement was to display a chart with Trailing 12 Months of data from the current month and the end user should have an option to change the Trailing months to 6,12,18,24 etc., during run time.

How this is generally done

This scenario can be solved in various ways. Here are a couple of ways that is often used:

Option 1 - Using Multiple Queries

To show Trailing 6 Months of data, you have to create a query in SAP Business Explorer with Month dimension restricted to a current month variable.

This variable should be defined as a range [currentmonth variable -6 to current month variable].

Since the offset specified for a variable cannot be changed dynamically at run time, you would end up using multiple Queries for every trailing N Months, which in turn will increase the load on the dashboard.

Option 2 - Create One Query with two variables

Create a query in SAP Business Explorer and restrict the month dimension with two variables: 1.Period_From and 2.CurrentMonth Variable

Calculate the N^th month in SAP BusinessObjects Desgin Studio using an if-else logic and pass the value of the N^th month to Period_From Variable .

Although this method uses only one Query, it triggers the variable for every selection made in the radio button for Trailing N month Selection. This increases the render time of the charts used in the dashboard.

How this can effectively be done using Arrays in SAP BusinessObjects Design Studio

In my dashboard, I adopted an approach that uses the Arrays in SAP BusinessObjects Design Studio to effectively change the numbers of trailing months to be displayed. Here is what I did:

Using One Query without any variables

First Step was to determine the current month from SAP BusinessObjects Design Studio using the following code -

1. APPLICATION.getInfo().dateNowInternalFormat.substring(0,6);

The output for this script was the current month displayed in the format "YYYYMM" - "201505".

In my dashboard, I have a column chart that has an SAP Business Explorer query as the data source assigned to it. Above this chart, I used a radio button group to provide users an option to choose the number of Trailing Months. I added the number items to the radio button in SAP BusinessObjects Design Studio directly as shown below:

In the Onselect() event of the radio button, I used the following script:

/*Array_1 to find the index of the current month*/

var montharray=DS_1.getMembers("0CALMONTH", 10000);

var find="";

1. montharray.forEach(function(element, index) {

if(element.internalKey===current_month)

{

            find=index+"";

}

});

/*Calculate the difference between the index and the N value*/

var from="";

var indexdifference=Convert.stringToInt(find)-Convert.stringToInt(RADIOBUTTONGROUP_1.getSelectedValue());

/*Array_2 to find the trailing Nth month */

1. montharray.forEach(function(element, index) {

if(index==indexdifference){

            from=element.internalKey;

}

});

DS_1.setFilter("0CALMONTH", {"low":from,"high":current_month});

Keep reading for a more logical explanation of the script.

Logic

  Step 1 – In the script, I used an array – Array_1  to find the index of Current Month

Step 2 – I found difference between the index and the N value selected. Then I used the result as a new index.

Step 3 - Using another array – Array_2, I obtained the Trailing N^th month using the new index.

After obtaining the two months, I used the setFilter API to filter the data for the selected value range.

DS_1.setFilter("0CALMONTH", {"low":from,"high":current_month});

Output

On executing the application, I was able to change the Trailing N months by clicking on the desired radio button during runtime. The output for my selection of ’18 Months’ is shown below:

Conclusion

I believe this method is more effective for any dashboard design as it reduces the number of queries to one and also eliminates the Query interactions for every selection made to change the N value. You can also try the same logic to achieve the same results for following N Months / Quarters / Days. I really hope this blog was useful for you!

This is part of a tutorial series on creating extension components for Design Studio.

In our last installment, we got our arc into a Design Studio component.    All of the properties of our arc - color, start and end angles, inner and outer radii and centerpoint - were hardcoded.  In this installment, we're going to lay the groundwork for making our gauge's basic display properties configurable.  For this installment, we're returning to our pure .html file sandbox and investigate what our javascript needs to look like.

For starters, we need to get a handle on all of the attributes that we'll need to need.  These basic display properties will be with us for the entire series and well add others as they become nescessary:

• Width and Height -  These attributes are inherited from the SDK framework and are properties of all Design Studio components; whether standard or extension.  These two attributes are going to define the box that we'll want to fit our gauge into.
• Start Angle (in degrees) - This is the starting angle of the arc., with 0 degrees being straight up and +/-180 degrees being straight down.  When we actually declare the arc in D3, we'll do it in radians, but we can't expect our users to work with this unit of measure.
• End Angle (in degrees) - Finishing angle of the arc.
• Padding (Top/Bottom/Left/Right) - It may be that we don't want to use the full component height and width.  So we'll include properties for padding between the edge of the gauge and the edge of the component.  This defines the bounding box of the gauge. (See picture, below)
• Inner Radius of the Arc - 0 of it is a pie, greater than 0 if we want a doughnut.
• Outer Radius of the Arc - The distance between the centerpoint of the gauge and the nearest box edge. 
• Centerpoint - This is the origin, around which the gauge arc will be drawn. 
• Color - The color od the arc.

Step 3a.1 -

These properties are not wholy independent from one another.  For example, given a centerpoint, outer radius and padding, we could calculate the height and width of the component.  This is perhaps the cleanest way of defining gauge size and location.  The height and width are standard properties however.  Therefore, we'll be calculating the centerpoint and outer radius, given the height, width and padding properties.

Some properties can be declared as properties.  We'll be adding them to the properties pane in the next instalment, but for now, we can hardcode them for the purposes of our html sandbox.  The dimension values represent pixels.

//Viz definitiions

var innerRad = 0;

var width = 200;

var height = 200;

var startAngleDeg = -90;

var endAngleDeg = 90;

var colorCode = "red";

 

//Outer Dimensions & Positioning

var paddingTop = 10;

var paddingBottom = 10;

var paddingLeft = 10;

var paddingRight = 10;

Step 3a.2 -

First, we need to define the outer radius.  We'll use this simple rule of thumb.  If we draw the arc in 360 degrees, creating a circle, it will be equally large on both the X and Y axes.  Therefore, it's diameter should be the smaller of the axes inside the bounding box.  In the picture below, the vertical axis is the smaller of the two; therefore, it will be used.

The following Javascript code should do the trick:

//The total size of the component is calculated from its parts

 

// Find the larger left/right padding

var lrPadding = paddingLeft + paddingRight;

var tbPadding = paddingTop + paddingBottom;

var maxPadding = lrPadding;

if (maxPadding < tbPadding){

  maxPadding = tbPadding

}

 

var outerRad = (width - 2*(maxPadding))/2;

Step 3a.3 -

We'll want to position the origin of the arc at the very centre of the component.

//The offset will determine where the center of the arc shall be

var offsetLeft = width/2;

var offsetDown = height/2;

Step 3a.4 -

It is entirely possible that the user might put in some nonsensical parameters, so we'll want to insert a minimal bit of defensive programming here.  Specifically, we'll want to make sure that the arc does not have a negative radius:

//Don't let the innerRad be greater than outer rad

if (outerRad < innerRad){

  outerRad = innerRad;

  alert("Warning!  The gauge arc has a negative radius.  Please decrease the inner radius, or increase the size of the control.  Height & width (including subtraction for padding) must me at least twice as large as Internal Radius.!");

}

Step 3a.5 -

Let's go back and revisit the code for creating the arc and attaching it to the sag element, that we created in steps 2a.3 - 2a.5 in instalment 2a.  We can replace the hardcoded height, width, radii and offsets with the variables, that we defined above.

var arcDef = d3.svg.arc()

  .innerRadius(innerRad)

  .outerRadius(outerRad)

  .startAngle(startAngleDeg * (pi/180)) //converting from degs to radians

  .endAngle(endAngleDeg * (pi/180)); //converting from degs to radians

 

 

 

var guageArc = vis.append("path")

  .style("fill", colorCode)

  .attr("width", width).attr("height", height) // Added height and width so arc is visible

  .attr("transform", "translate(" + offsetLeft + "," + offsetDown + ")")

  .attr("d", arcDef);

Step 3a.6 -

Putting everything together, our html file should look like this:

<!DOCTYPE html>

<html>

  <head>

  <meta http-equiv='X-UA-Compatible' content='IE=edge' />

  <title>Part 3</title>

  <div id='content'></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

  <script>

  var vis = d3.select("#content").append("svg:svg").attr("width", "100%").attr("height", "100%");

 

  var pi = Math.PI;

 

  //Viz definitiions

  var innerRad = 0;

  var width = 200;

  var height = 200;

  var startAngleDeg = -90;

  var endAngleDeg = 90;

  var colorCode = "red";

 

 

  //Outer Dimensions & Positioning

  var paddingTop = 10;

  var paddingBottom = 10;

  var paddingLeft = 10;

  var paddingRight = 10;

 

  //The total size of the component is calculated from its parts

 

  // Find the larger left/right padding

  var lrPadding = paddingLeft + paddingRight;

  var tbPadding = paddingTop + paddingBottom;

  var maxPadding = lrPadding;

  if (maxPadding < tbPadding){

  maxPadding = tbPadding

  }

 

  var outerRad = (width - 2*(maxPadding))/2;

  //var width = (outerRad * 2) + paddingLeft + paddingRight;

  //var height = (outerRad * 2) + paddingTop + paddingBottom;

 

  //The offset will determine where the center of the arc shall be

  var offsetLeft = width/2;

  var offsetDown = height/2;

 

  //Don't let the innerRad be greater than outer rad

  if (outerRad < innerRad){

  outerRad = innerRad;

  alert("Warning!  The gauge arc has a negative radies.  Please decrease the inner radius, or increase the size of the control.  Height & width (including subtraction for padding) must me at least twice as large as Internal Radius.!");

  }

 

  var arcDef = d3.svg.arc()

  .innerRadius(innerRad)

  .outerRadius(outerRad)

  .startAngle(startAngleDeg * (pi/180)) //converting from degs to radians

  .endAngle(endAngleDeg * (pi/180)); //converting from degs to radians

 

  var guageArc = vis.append("path")

     .style("fill", colorCode)

     .attr("width", width).attr("height", height) // Added height and width so arc is visible

     .attr("transform", "translate(" + offsetLeft + "," + offsetDown + ")")

     .attr("d", arcDef);

  </script>

    </head>

  <body class='sapUiBody'>

  <div id='content'></div>

  </body>

</html>

Step 3a. 7 -

When we open the html file in a browser, it should look like the following:

Feel free to play around with the various geometry parameters and get a feel for how they affect the arc.

Next time, we'll add those properties to the component's Properties's Pane in Design Studio.

One cool feature that came with Design Studio 1.5 is the ability to execute queries in parallel. In this blog I want to show you how you can use this feature to speed up your dashboards. I will also show you how you can measure the performance of your dashboard, so that you can tackle potential bottlenecks.  In some cases it might not always be useful to use this feature. I noticed that when you use parallel query execution you definitely win time when fetching data from BW, but you lose some time to render the data on the screen. By measuring what happens you can make a good trade off.

Let’s start with a simple query that I will use throughout this example.

Let’s take a look at the query execution time in BW. Go to transaction RSRT and hit the Execute + Debug button.

Select Display Statistics Data from the list to perform a simple Analysis

Hit Continue. The query will be executed. If there is a prompt available in the query you will be asked t o fill in a value. The results of your query will now be shown on the screen.

Now, hit the back button. An overview of query statistics will be shown. From the screenshot here you can see that in total it takes about 3.3 seconds to execute the query. This is including the 2.5 seconds of waiting time (the time i needed to fill in the variable values). So, basically the query needs about 0.8 seconds to execute.

Now in Design Studio I use the same query to check if the performance is more or less the same. In Design Studio I used a crosstab to display the query on the screen. Execute the application. In the URL of the application, add the following command at the end of the URL: &PROFILING=X

When you do this a statistics window will pop up

From this information you can see that the total runtime is about 1.7 seconds, divided into 2 parts:

1. 1. Java: 0.987 seconds. This is the time the application needs to render the data on screen
2. 2. Remote: 0.7 seconds: This is the time the application needs to fetch the data

So at this point we can see that the query execution is just about what we expect compared to BW.

Let’s change some settings in Design Studio.

First I edit the initial view of the data source and add a different member to the rows section of the data source. Let’s see how this will affect the performance.

In the screenshot below you can see that the remote part is slightly more than before. However, you should keep in mind that the values that are shown here a probably really fast because of the cache used.

Let’s add another data source to the application and execute the application. You can see from the screenshot below that the application takes a little bit longer to execute.

Although the performance decrease is not spectacular in this case, I still want to show you how to set up the parallel query execution function.

In the properties of each data source specify a unique Processing Group, in this case I typed in G1 and G2

Also in the application properties change the Merge Prompt option from true to false

Now, execute the application again and measure the performance.  You can now see that the query execution time decreases.

However, look at the Java time. This value increases and it looks like the overall time the application needs is more than it was without parallel query execution (in this case)!

In this example the total execution time is less when we do not use the parallel query execution. For queries that need more processing time, you would definitely win when you use parallel query execution. It might also be interesting to see how well your scripts or filters perform. You can measure each navigation step in your application using the build-in statistics in Design Studio.

The usual legal disclaimer applies that things in the future are subject to change

Watch replay online at http://events.sap.com/teched/en/session/22630

Notes below are from a combination of attending several sessions.

Figure 1: Source: SAP

Cloud for Analytics includes reporting, planning

Figure 2: Source: SAP

Analysis OLAP converges to Design Studio

Major investments in Design Studio but not in Dashboards, BEx Web or Analysis OLAP

Figure 3: Source: SAP

Most customers are using Design Studio with BI Platform

New investments for NetWeaver and HANA deployments are not planned

If starting with Design Studio projects start with BI Platform

Figure 4: Source: SAP

Planned GA end of November, early December

Four features in Figure 4 – end user analysis

Enhanced geomaps, able to add pie chart to geomaps, or add custom markers, images, graphics

Scorecard is formatted table that can cover all formatting requirements.  A butterfly table has a dimension in middle, key figure on right and left side

Standard crosstab is dimensions on the left

Spreadsheet is alternative to crosstab; more Excel like, look and feel

Timer can be used as a refresh for near real time scenarios

Tree is a new component – display hierarchical structures; the tree component to display bookmark folders on BI Platform

CSV file as datasource – in local mode, to help designers and developers create applications

Increased limit of universe connections to 20K rows, multi-source universes, right to left support

Note - the slides below were covered in a demo, but it is hard to capture those in screen shots.

Figure 5: Source: SAP

New info chart, new chart types, trellis charts, combination charts, more configuration options

Figure 6: Source: SAP

Geo map was released in 1.5; in 1.6 layer info can be displayed as a pie chart

Figure 7: Source: SAP

End user can define how chart can look like

Figure 8: Source: SAP

Drag and drop key figures and characteristics are available for the crosstab

Figure 9: Source: SAP

Custom measures, new calculated KF’s, scaling figures

Info Chart, Trellis Chart, config options

Figure 10: Source: SAP

Crosstab is used for OLAP use cases

Scorecard is used for formatted use cases

Can change font size, background color

Figure 11: Source: SAP

Analytical application is out of the box, generic analysis (ready to run application) – you can choose BW query or HANA view as a data source

Spreadsheet, hide show – what you can do with crosstab you can do with the spreadsheet component; also can use the planning scenario

Figure 12: Source: SAP

CSV file for rapid prototyping can be used in Local Mode only

Figure 13: Source: SAP

Figure 13 has been discussed before but good to see multi-source universes are supported

Figure 14: Source: SAP

Figure 14 covers the new Fiori component library

Figure 15: Source: SAP

Figure 15 was discussed mostly in the hands-on workshops

You can watch the recording from above or join ASUG next month for the webcast - register here.

Last Monday, October 19th, after several months of planning, promoting and marketing, ASUG SAP TechEd pre-conference sessions were held.  I attended SAP Design Studio Deep Dive.  This was a hands-on session with SAP Mentor Ingo Hilgefort

I am also writing this as the second part of Catch a Mentor and Know a Mentor Missions at SAP TechEd 2015 "knowing a Mentor", in this case, Ingo Hilgefort.

Much to my surprise, the session was sold-out.  Most attendees were new to Design Studio.  For the first time that I can recall in a hands-on session, attendees were able to connect their Design Studio application using SAP BusinessObjects Mobile application - both using iOS and Android.  Usually the ports are closed at SAP TechEd sessions.

Using AWS instances, 60 people, 30 laptops, 30+ AWS instances, attendees created applications using SAP Design Studio.  The hardest part about connecting to Mobile BI was entering the CMS name.

Below is a subset of the exercises:

Configuring your mobile device

Exercise 1: Create your first SAP BusinessObjects Design Studio Dashboard

Exercise 2: Using a crosstab and chart

Exercise 3: Using a Pagebook

Exercise 4: Using a Grid Layout and ListBox

Exercise 5: Using scripting to add interactivity

Exercise 6: Creating a KPI dashboard

Exercise 7: Using Online Composition

Exercise 8: Enhancing the Online Composition Application

Exercise 9: Using Geo Map Component – Shape Layer

Exercise 10: Using the Backend Connection Component

Exercise 11: Background Processing

The materials were all new, created by Ingo himself.  This was unique content that could not be obtained during the conference.

Photo by SAP TechEd Photographer

From 8:30 am to 5:00 pm, Ingo shared his knowledge about SAP Design Studio, as shown above.

Photo by SAP TechEd Photographer

Carlos Suarez, IBM, pictured left in the above, asked questions during this hands-on session.

Photo by SAP TechEd Photographer

Attendees had plenty of time to complete exercises.  Even though they were scheduled for a one hour lunch, they returned after 45 minutes.

Pictured above are Ingo and his class assistants:

Left to right:

Bhupinder Singh Chadha, Puneet Arora, me, Ingo, Shankar Narayanan S G S

In speaking with Graham Robinson this week, a SAP Mentor influences the community but is also one who shares his/her knowledge; this is something Ingo did tirelessly during this session. 

The “Merged Prompts” feature was initially provided by the SAP Business Warehouse (BW). When using multiple data sources in one connection, the backend (BW) merges the variable values of multiple data sources (using the same variable) into one value.

This has advantages for both the end user of the application as well as for the developer of the application. The end user has the advantage of not being forced to enter the same variable value multiple times in the prompt screen (once for each data source). The application developer has the advantage that setting a variable value once will immediately affect all data sources that are “merged”. There is no need to write script statements setting variable values to all affected data sources.

However there are also scenarios where it is necessary to have different values of the same variable in different data sources. This is the reason why Design Studio also offers the possibility to run an application in “unmerged” mode. This is activated by setting the application’s property “Merge Prompts” to “false”.

Why Does “Parallel Processing” Imply “Unmerged Prompts”?

As mentioned in the previous chapter the merging of prompts is done by the “backend” (BW, HANA). It is not a feature of Design Studio itself. The backend uses its session to store one value of a variable and shares this value among multiple data sources running in the same session.

The parallel processing is achieved by creating multiple sessions in the backend and using them independently to achieve independent/parallel execution. As backend sessions do not share any state, there is no possibility to share variable values.

How Do I Emulate "Merged Prompts"?

Emulate the User Experience of the "Prompts Screen"

When prompts are in “unmerged” mode the prompt screen contains all variables for each data source. If multiple data sources share the same variable, the user is prompted for each of these values:

The application offers a property “Prompt Setting” to customize which variable values are shown in the prompts screen. By default all are shown, but this setting allows removing values that shall not be visible as well as changing the sequence of the shown values:

By removing the “duplicates” of each variable and leaving only the first occurrence in the list, the user gets a prompt screen like in “merged” mode: Each variable appears only once.

Setting the Values of the "Other" Data Sources – Part I: At Startup

When users get the adapted screen they obviously enter the variable value for only one of the variable values. However to emulate the behavior of “merged mode” the entered values need to be set also to the “other” data sources which do not occur on the screen any mode.

This is achieved by retrieving the entered value via script and setting them to the “other” data sources. The event when this should be done at application startup is “On Before Prompts Submit” of the application. In this example the prompts of “DS_1” are still on the prompt screen and “DS_2” and “DS_3” were configured not to be shown. This will require script coding transferring the value from DS_1 to DS_2 and DS_3:

DS_2.setVariableValueExt("VAR1", DS_1.getVariableValueExt("VAR1"));

DS_3.setVariableValueExt("VAR1", DS_1.getVariableValueExt("VAR1"));

This code sequence needs to be there for every affected variable. In this example only the variable “VAR1” was considered.

Setting the Values of the "Other" Data Sources – Part II: After Startup

To get well-performing applications it is best practice to use as few as possible data sources at startup. Whenever possible data sources should use the property “Load In Script” and should be initialized only after the user has “clicked” something (a button, a tabstrip, ...).

Loading data sources after the startup sequence is done using the “loadDataSource” function of the data source object or the “loadDataSources” function of the application object. In “merged” mode each newly loaded data source automatically “inherits” variable values of those data sources that are already loaded. To achieve the same behavior in “unmerged” mode it is necessary to set the values of newly loaded data sources directly after they have been loaded. In this example the variable value of “VAR1” is set to the 2 newly loaded data sources DS_2 and DS_3:

APPLICATION.loadDataSources([DS_2, DS_3]);

DS_2.setVariableValueExt("VAR1", DS_1.getVariableValueExt("VAR1"));

DS_3.setVariableValueExt("VAR1", DS_1.getVariableValueExt("VAR1"));

Conclusion

Using parallel processing requires that “Merge Prompts” is set to “false”. However if the application shall behave like in “merged” mode, this can be achieved by following a few simple patterns shown in this blog.

Data Cell Binding is a very powerful tool in SAP BusinessObjects Design Studio 1.5 to better visualize your data ( I am following up a blog post by Jeroen van der A back in June ). One of the use cases for this function demonstrated in this post is to format your data display according to data value by changing CSS Class of the text component. Let’s look at the customized KPI tile below, where we have the following requirements:

Change in percentage > 0: text in green color with an up-arrow suffix.

Change in percentage < 0: text in red color with a down-arrow suffix.

Such color-based alert will give users instant insight about the business performance. This styling can be achieved in two simple steps.

1. Define your styling properties in CSS file

I have two separate CSS Classes to define the styling for negative and positive values, respectively percChangeDown and percChangeUp.

Here I have define basic styling properties for color, font-size and font-weight for each class. To display picture of an arrow after the text, I use pseudo-element selector ::after and ::before to add an arrow with property content. The images used in this example,  and , are converted to Image URI (You can find online converter here). Note that when creating the images of these arrows, make sure to match their color to the text color for better visual presentation.

Upload your CSS file.

1. Bind CSS Class Property with your data value

In the Property Panel of your Text Box displaying percentage change, Click on CSS Class and the Binding Icon on the top right corner, select Data Cell Binding.

Next, Expand CSS Binding Options by Clicking on the before CSS Class 

Select Data Source and Data Cell that you want to base your styling on. Then Click OK.

Add a New Function in the Formatter Function Option. Note that a Global Script Object must be created first. Here I have created a function call GLOBAL_SCRIPT_1.signChange

Here is the scripts for this function. It will return “percChangeUp” when the value is positive and “percChanegDown” when the value is negative for CSS Class Property of this Text Component.

Once you have created this function it will show up under Technical Components. Just click on it to edit.

Please note that the data will not be formatted in your Design Studio workplace. The formatting will be applied when you execute the application.

Hope you find the simple trick above helpful for your dashboard project!

P.S: Here are the images URI for the arrows above if you would want to use them for your dashboards:

This is followup post for the SAP BusinessObjects Design Studio SDK Development without Eclipse, as an alternative to the approach discussed there.

For showcasing the alternative approach, am using SCN Design Studio SDK Development Community Components.

Step 1:

Clone SDK code from https://github.com/org-scn-design-studio-community/sdkpackage.git

I did cloned it into the folder "D:/GitHub/sdkpackage" on my PC.

Step2:

Launch the below folder in Windows Explorer "%USERPROFILE%/Analysis-config/config/org.eclipse.equinox.simpleconfigurator"

Step 2a:

In case there is no such folder available, please copy the folder from the below location to the

C:\Program Files\SAP BusinessObjects\Design Studio\configuration\org.eclipse.equinox.simpleconfigurator

Step 3:

Edit the file bundles.info by adding these below lines

(please uninstall SCN Components, in case you have already installed them):

D:/GitHub/sdkpackage/src/the file path is based on your folder path.

Step 3a:

This step is applicable only for SCN Design Studio SDK Development Community Components, the below  META-INF/MANIFEST.MF files to be edited:

sdkpackage/src/org.scn.community.basics/META-INF/MANIFEST.MF

sdkpackage/src/org.scn.community.databound/META-INF/MANIFEST.MF

sdkpackage/src/org.scn.community.datasource/META-INF/MANIFEST.MF

sdkpackage/src/org.scn.community.geovis/META-INF/MANIFEST.MF

sdkpackage/src/org.scn.community.prototypes/META-INF/MANIFEST.MF

sdkpackage/src/org.scn.community.shared/META-INF/MANIFEST.MF

sdkpackage/src/org.scn.community.utils/META-INF/MANIFEST.MF

replace the below line from

     Bundle-Version: 2.0.0.qualifier

into

     Bundle-Version: 2.0.0

Step 4:

Now your local source code is In-sync with DesignStudio as plugin.

By launching the SAP BusinessObjects Design Studio you will be able to use all the SCN Design Studio SDK Development Community Components.

For developing the code using Chrome, I did created a sample application with SCN Component "ArrowedLine", and executed the same on Chrome Browser

Step 5:

Now Disable your Chrome browser cache by clicking on

"Developer Tools" -> "Network" Tab -> "Disable Cache"

Step 6:

Map the source files to the Chrome, and click allow (providing file permissions to chrome).

Step 7:

Now,SCN Design Studio SDK Development Community codeis part of the Chrome browser workspace. While the application from SAP BusinessObjects Design Studio is running with "Arrowed Line"

By selecting the "Arrowedline.js" of the application and mapping it to the Chrome Workspace file, it is mapped.

Step 8:

Now all the code modifications done in browser will be reflected in the application in realtime. To test it, I removed the getter setters of the linecolor property and assigned it with default red color.

Did saved the file (directly from Chrome Developer Tools) and refreshed the browser.

This provides developers, an easy way of debugging and developing components.

Just by using the Chrome or the same can be also achieved using the firebug of Firefox.

This is part of a tutorial series on creating extension components for Design Studio.

Now that we have a basic grasp of the properties that we'll need to start making a configurable arc in D3, we need to get these properties into the component.  Over the next few installments, we'll do the following:

• Add the properties sheet, so that the designer can set them.
• Take a tour of the lifecycle of a property and its agency on both the client and server side.  This will later prove useful when we want to access the values defined in the properties sheet, or change them at runtime.
• Access these properties from the client side, so that we can use them to draw the gauge.
• Add getters and setters for these properties in the BIAL scripting language, so that we can manipulate the gauge at runtime, via scripting.

The Property Element

To define a basic property in the properties sheet, we add a <property> element to component.xml.  These elements go immediately after the xxxInclude elements (stdInclude, jsInclude and cssInclude).  For basic property definition, we'll need to define mandatory three attributes per property:

• id - This is the technical name of the property and what'll we'll be using to reference it later.

• title - This is the text that goes in the label in the properties sheet.

• type - the technical type of the property.  The allowed types are boolean, Color, float, int, ResultCell, ResultCellList, ResultCellSet, ResultSet, ScriptText, String, Text and Url.  Pay attention to the spelling.  The types are case sensitive and yes, some do start with lower case letters, while others start upper case.  Choosing a particular data type may enforce validation of values entered by the designer (e.g. they can't write a novel in float and int areas).  With other data types, additional infrascructure might be enabled.  E.g. the ResultXXX types will enable data selection dialogsWe'll cover each property type in turn, but start with the simple types today.

Additionally, we have four optional attributes:

• group - If you wish to put the property into a specific group in the properties pane, this is the attribute that you'll want to use.  If you don't set this attribute, the property will show up in the Display group.  For the sake of simplicity in the component.xml today, we'll leave it out and accept that our properties will land in the Display group.

• bindable - Can the attribute be bound to data from the backend.  This attribute that enables data binding on the property.  If left out, the default value is false.  We'll be covering data binding in a later installment and won't bother with the bindable property today.

• tooltip - Do you want a mouseover tooltip on the property in the properties pane?  If so, here is your chance to write the text for it.

• visible - This attribute controls the visibility of the property in the properties pane.  There may be situations where you want the designer to set the property via the Additional Properties Sheet, via script only, or perhaps not at all (you may have a special use planned for the property).  If so, then add this attribute and set it to false.  The default value is true.  We want to hide the centerpoint and outer radius from the designer, because we'll be calculating them from other properties; so we'll be making them invisible.  The rest will be visible.

The properties that we defined in the last section will be of three types, floating point numbers, integers and colors.  The property types are distributed as follows:

float

startAngleDeg

endAngleDeg

innerRad

outerRad

int

offsetLeft     (the y-axis component of the centerpoint)

offsetDown (the x-axis component if the centerpoint)

paddingTop

paddingBottom

paddingLeft

paddingRight

Color

colorCode

Here is an example of a float property with only the mandatory attributes assigned, startAngleDeg:

<property

  id="startAngleDeg"

  title="Start Angle"

  type="float"/>

Here is an example of an int property with visible set to false, offsetLeft:

<property

  id="offsetLeft"

  title="Centerpoint Offset X-Axis"

  type="int"

  visible="false"/>

Note that although title is the display title for the properties pane and won't actually be seen, it is still mandatory and needs to be present.  We'll write a proper, descriptive title to document the component for later reference and we never know if we'll change our minds and want to set visible to true.

The <initialization> element

Sometimes, we'll want to pre fill the values in the properties pane with something.  Usually, we'll want to do this when we need to have a value there.  You've probably seen this many times in components that you've used.  E.g. the height and width of components nearly always have a default value of height and width.  Immediately following all of the properties elements comes a single <initialization> element.  This element is optional, but may only appear a single time if added.  Inside the <initialization> element, we may add any number (including 0) <defaultValue> elements.  Each defaultValue element has a single, mandatory attribute, property.  This defines the property that is targeted.  The value of the element is the default value.  Below are some examples of technically valid initialization elements.  The first two (empty ones are not examples of best-practice, as it is always a good idea to define height and width, if nothing else:

An empty initialization element

<initialization/>

Another empty initialization element

<initialization>

</initialization>

The minimal scope best practice, pre-filling height and width (yes, these mandatory properties are all uppercase)

<initialization>

  <defaultValue property="WIDTH">100</defaultValue>

  <defaultValue property="HEIGHT">100</defaultValue>

</initialization>

Pre-filling a handful of properties, start angle, end angle and making the arc blue by default.

<initialization>

  <defaultValue property="WIDTH">100</defaultValue>

  <defaultValue property="HEIGHT">100</defaultValue>

  <defaultValue property="startAngleDeg">-90.0</defaultValue>

  <defaultValue property="endAngleDeg">90.0</defaultValue>

  <defaultValue property="colorCode">blue</defaultValue>

</initialization>

The complete component.xml

Let's add all of the properties and use the last example initialization element from above.  The completed component.xml should now look as follows:

<?xml version="1.0" encoding="UTF-8"?>

<sdkExtension

    eula=""

    id="com.sap.sample.scngauge"

    title="SCN Tutorial Gauge"

    vendor="SAP"

    version="15.1"

    xmlns="http://www.sap.com/bi/zen/sdk"

    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:schemaLocation="http://www.sap.com/bi/zen/sdkhttp://www.sap.com/bi/zen/sdk ">

  <license>license</license>

  <component

      databound="false"

      group=""

      handlerType="div"

      icon="res/gauge.png"

      id="SCNGauge"

      propertySheetPath="res/additional_properties_sheet/additional_properties_sheet.html"

      title="Gauge"

      tooltip=""

      visible="true">

    <stdInclude kind="d3"/>

    <jsInclude>res/js/component.js</jsInclude>

    <cssInclude>res/css/component.css</cssInclude>

  

    <property

        id="startAngleDeg"

        title="Start Angle"

        type="float"/>

    <property

        id="endAngleDeg"

        title="End Angle"

        type="float"/>

    <property

        id="innerRad"

        title="Inner Radius"

        type="float"/>

    <property

        id="outerRad"

        title="Outer Radius"

        type="float"

        visible="false"/>

    <property

        id="offsetLeft"

        title="Centerpoint Offset X-Axis"

        type="int"

        visible="false"/>

    <property

        id="offsetDown"

        title="Centerpoint Offset Y-Axis"

        type="int"

        visible="false"/>

    <property

        id="paddingTop"

        title="Top Padding"

        type="int"/>

    <property

        id="paddingBottom"

        title="Bottom Padding"

        type="int"/>

    <property

        id="paddingLeft"

        title="Left Padding"

        type="int"/>

    <property

        id="paddingRight"

        title="Right Padding"

        type="int"/>

    <property

        id="colorCode"

        title="Color"

        type="Color"/>

    <initialization>

        <defaultValue property="WIDTH">100</defaultValue>

        <defaultValue property="HEIGHT">100</defaultValue>

        <defaultValue property="startAngleDeg">-90.0</defaultValue>

        <defaultValue property="endAngleDeg">90.0</defaultValue>

        <defaultValue property="colorCode">blue</defaultValue>

    </initialization>  

  </component>

</sdkExtension>

Testing

We've not changed our component.js file since we last edited it in step 2b.5.  Therefore, we'll expect it to look and act the same, but we will also expect the visible properties to show up in the properties pane, even if they don't actually do anything yet. When we launch Design Studio and add our SCNGauge component to an app, this is what we see:

The visible properties are visible.  The prefilled properties are prefilled and the color picker works.  For example, we can use to set the color property to red.

Next time, we'll look into the life cycle of a property, so that we'll be able to make use of it both on the client and server side.

Discover SAP Design Studio!

Join us for a one-day, hands-on workshop in Maidenhead, UK, Wednesday 2^nd December 2015

Join us for an overview of our innovations in Dashboards and Applications with SAP Design Studio. Experience creating script free Application and deploy it to the SAP BI Platform.

During this free one-day hands-on workshop in Maidenhead, England on December 2nd, you can roll up your sleeves and work with experts to cover all the basics. There is no requirements for any prior experience with Design Studio and you’ll be guided through a number of exercises to create a number of compelling and attractive Dashboard Applications.

We will cover:

• Overview and demonstration of SAP Design Studio
• Creating your first app – script free!
• Geomaps, Extensions, Templates
• Roadmap, Q&A

Who should attend?

The information presented at the workshop will be relevant to IT project managers, system architects, business users, and other professionals responsible for using BI solutions to support their business needs.

Please Bring Your Own Laptop (to run a Terminal Services Session to connect to our servers).

Don’t miss this opportunity to learn how you can build interactive visualization and analytical application.  Space is limited, so please register today to join us.

Date:2 December, 2015. Arrive at 9.00am for a 9.30 start.

Location: SAP, Objects House, Vanwall Business Park, Vanwall Road, Maidenhead, Berkshire, SL6 4UB, England, UK.

We look forward to seeing you there!

Best regards,

Matthew Shaw (Twitter: @MattShaw_on_BI)

Disclaimer:

This component uses hierarchies from BW. It could be adapted to connect to Hana or a Universe, but these hierarchies have not been tested.

The component has been tested, but you may encounter some bugs. For either bugs or enhancement request, do not hesitate to post an "issue" on our GitHub.

Introduction

If you have read the SCN forum the past year or are interested in SDK extensions, you have probably noticed the SDK Community package initiative, and maybe also a "Multi level Dropdown Menu" article.

This extension has been renamed "Hierarchical menu" and it renders a BW hierarchy into a dropdown menu (similar to one on websites).

This new version includes several bug fixes, and new features that are explained below.

Component overview and explanations

The most common way of drilling down in a hierarchy with Design studio is to use a dimension filter pane, as shown below:

With this article, I propose to use a convenient way to explore a hierarchy, through cascading dropdown menus, similar to a hierarchical structure:

A preview can be found here:

For the end user, it is an easier way to navigate through the hierarchy without losing context.

This dropdown menu has been developed using jQuery, HTML Unordered lists (UL / LI) and CSS to handle the display.

The CSS has been adapted from Simple Pure CSS Drop Down Menu.

You can find the SDK Community package here and the code of the extension here.

You can also import this DS application (made with 1.5 SP02, WILL BE ADDED LATER) to test the component. You will only need to configure the 2 datasources:

• DS_MENU: used by the hierarchical menu. Add your hierarchy and some key figures.
• DS_DATA: Actual data, it will be filtered out by the hierarchical menu. Use the same characteristic as in DS_MENU, with the same hierarchy, even if it not displayed.

Recommendations

• Use a specific (separated) datasource with the expanded hierarchy and some key figures. If you share a Crosstab datasource with folded nodes, the component will be unable to read the full hierarchy structure
• The query structure should be as follow:
  • Rows: one characteristic with hierarchy, selected and displayed
  • Columns: only key figures
    
• This component uses the datasource data, and some dimension informations
• The hierarchy needs to be fully expanded to be completely read (or the component will miss the collapsed nodes and their leaves ...).
• The datasource can be plugged directly on the masterdata (but you won't have key figures most of the time).
• NO CSS is applied to the generated HTML out of the box. I'll give you some on this page (CSS section at the end). The reason is simple: you can configure display of the component exactly as desired without overriding automatically generated classes.

Possible enhancements

• Possibility to use only one datasource without the current limitations
• Label selection is a bit messy
• Please, propose some !

Features

Add a Root Node

By default, all the first nodes of the hierarchy will be displayed:

Mode	Effect
Without single Node
With Single node

By changing these parameters, you can add a single root node, and select its name:

Also, the event "On Reset" (Script) will be triggered if you click on the newly created Single Root Node.

Methods:

• Boolean isSingleNodeActivated(): return true / false if the Single root node is activated
• void setAddSingleRootNode(boolean activation): activate / deactivate Single Root Node
• string getSingleRootNodeName(): return the text of the Single root node
• void setSingleRootNodeName(string newText): set the text of the Single root node

Reset Button

You can add a Reset button (X) at the left or right of the root nodes to cancel the selection.

The event "On Reset" (Script) will be triggered. Please note that selections on the menu will be removed, even if you have not attached any script. Note that if you have a single root node, clicking on it will have exactly the same effect.

Methods:

• string getResetButton(): return the display mode of the reset button (No, Left, Right)
• void setResetButton(string mode): set the new display mode

On Click event

When you click on an item in the menu, the node key will be retrieved and the OnClick event will be triggered.

You can call the method .getSelectedElemKey() on the component to retrieve the selected key. The method .getSelectedElemText() will give you the text instead. For example:

Some classes will be applied on the html menu on the selection nodes, and its parents:

• li.scn-hier-ddm-sel-node
• li.scn-hier-ddm-sel-parents

Methods:

• string getSelectedElemKey(): returns the hierarchy internal key of the selected node
• string getSelectedElemText(): returns the hierarchy internal text of the selected node

LabelDisplay

You can choose from 3 options:

To understand this setting, you should be aquainted with how the data from BW.

For instance, each node has three attributes:

• The Node Key: Internal hierarchy representation, independent from the characteristic "display as" parameter. For Canada: HIERARCHY_NODE/0D_NW_CNTRY/CA
• The Key: basically the infoobject key, like CA for Canada
• The Text: "Canada"

Pratical Example:

I chose Text+Key label display on the Partner in the query. In DS, both key and text are concatenated as "SAP|1/10000000".

Here, the Text is the Left part and the Key the Right Part.

Depending on the requirement, choose between the 3 available values. Let me know If I can make it more user friendly (maybe with a formatting function ?).

You can access theselected Key and Text with methods .getSelectedKey and .getSelectedText.

This is not the best way to handle the display. It would require some enhancements (1. get the display mode from the char 2. give you the choice to display text or key, but I really doubt SAP will give us this information in a near future).

Methods:

• String getLabelDisplay(): Get the selected display type
• void setLabelDisplay(String value): change the label display mode (NodeKey, Left, Right)

Measure display

One of the new addition is the possibility to display a mesure along the node:

This key figure / measure must be present in the binded query and can be selected either by a script or at the design time in the APS.

Methods:

• boolean isMeasureDisplayActivated(): return true/false if the measure display feature is activated
• void activateDisplayMeasure(boolean activationStatus): activate / deactivate the feature
• string getSelMeasure(): returns the technical name of the displayed key figure
• void setSelMeasure(string keyFigureTechName): set the new key figure to display

Conditional CSS class

If you use a measure, you can dynamically apply CSS classes to each node depending on its value.

Provide a JSON Table with the class to use:

CSS
Result:

The Json table must have the following structure, and can have as many cssClass iterations. The value of cssClass will be applied dynamically to the node menu LI item.

LOW represent the first bound and HIGH the second bound. Both are considered with a superior/lower or equal to its value.

[

  {"cssClass":"DD_RED", "low":"0", "high":"10"},

  {"cssClass":"DD_YEL", "low":"10", "high":"40"},

  {"cssClass":"DD_GREEN","low":"40", "high":"100"}

]

The measure needs to be displayed to make it work, but you could easily hide it with CSS if necessary.

Methods:

• String getColorClass(): get the JSON table
• void setColorClass(String value): set a new JSON table for the color class

"Not assigned Node" text replacement

If you allowed your hierarchy to display the not assigned with the option uncheck below, you'll have a generated text which is pretty unappealing:

=

If you want to change the text, you can use one of the extension feature in the APS, or change it dynamically with the method. It will replace "Not Assigned XXX" by the value:

Methods:

• String getNotAssignedText(): return the name of the Not assigned node in the APS
• void setNotAssignedText(String value): set a new text for the not assigned node

HTML Element and CSS composition

Sample CSS styles

As explained before, the list will be rendered as a pain UL / LI HTML list and you'll need to apply a CSS stylesheet. Many display options can be chosen, and you can find a lot of inspiration on internet (some website propose prebuild CSS stylesheets).

Until now, all of the screenshots of this article were based on the provided CSS below.

Download the CSS file, and import it into DS application as Custom CSS (on the Application element). If you already have one, copy/paste the content into your CSS file. It should not break anything as all the classes are prefixed by scn-hier-ddm-.

Name	Preview	CSS file
Classic Hierarchical dropdown menu		Download

I will add more in the future, and do not hesitate to share yours in the comments if you want. I will post them as well

HTML

The menu is composed of the elements below. The ones in brackets are optional. Each List (UL) must have one node (LI) and the leaves cannot have other Lists (UL) underneath.

• NAV (Primary container)
  • UL (Root list declaration)
    • LI (Items = Nodes or Leafs from the hierarchy)
      • DIV (Container for texts)
        • Span Text
        • [Span Mesure]
      • [UL] (Only present on a node, contains the childs)
        • LI ...
        • [LI]
    • [LI (node, same pattern as before)]
    • [LI]

CSS classes

Each HTML elements is associated with some CSS classes to ease the work of the developer. The table below contains all of them with some explanations.

Here the updated list of webinars for October 2015

For all webinars :

• Start Time : 11:00 AM (CT), 12:00 PM (ET), 10:00 AM (MT), 9:00 AM (PT)
• Duration : 1 hour

• November 04 - World Premiere of SAP BusinessObjects Design Studio 1.6
  
  This session will give you a first glimpse at the long awaited forthcoming SAP Design Studio 1.6 release. We will discuss and showcase in detail some of the planned new innovations.

• November 05 - Using SAP BusinessObjects Design Studio for Self Service BI
  
  In this session attendees will learn how a company could leverage SAP BusinessObjects Design Studio as an environment to create a self-service BI solution. Attendees will learn about the steps that are needed to create a self-service environment and where the current limitations are by using SAP BusinessObjects Design Studio. This presentation will focus on outlining which components are required to create the self-service BI solution and outline the required steps to create the application.

• November 10 - Self Service and Universal Universe Objects at Phoenix Contact
  
  Empowering end users to develop their own SAP BusinessObjects content is a goal for all organizations. With limited resources in IT and hundreds of users that span multiple departments, Phoenix Contact promotes self-service reporting to meet the demands of an ever growing BI landscape. To do this, Phoenix implemented a standard set of Universal Universe objects throughout their multi-universe environment providing a consistency that translates into “learn it once” and “apply it anywhere.” In this session, presenters will look at how Phoenix Contact provides its Web Intelligence users easy to use, intuitive, and flexible universe objects: Documentation Objects for education purposes; Smart Objects for prompts; conditions and year-end reporting; “User Table” Objects for incorporating custom user data. At the conclusion of the session, attendees will have a strong understanding of how Phoenix Contact provides self-service reporting in Web Intelligence through tried and tested real-world examples.

• November 16 - SAP BW 7.5 Powered by SAP HANA: Feature Tour and Road Map
  
  This session gives you a tour of the latest improvements available for the SAP Business Warehouse (SAP BW) application - the sound solution for enterprise data warehousing from SAP. Hear how the latest feature pack offers even more options for optimizing data warehousing with SAP HANA as well as for simplifying data modeling and provisioning.

• November 17 - Just Go Create a Dashboard - Providing Order to a Beginner's Chaos
  
  You’re brand new to dashboards, maybe even to the SAP BusinessObjects environment entirely, and yet you’ve been tasked to create a dashboard. You have the tools, now, where in the world do you start? This session is focused on the beginner and helping them to understand the architecture and environment of creating dashboards in the SAP BusinessObjects toolset.  The presenter will walk you through the architectural stack, the tools available and involved at every level as well as the workflow, steps, and concepts you’ll need to work through to develop all the various components needed for a dashboard and then finally get it deployed.

• November 19 - TE 's Transformation from BI to Business Analytics Leveraging SAP HANA
  
  TE Connectivity formerly known as Tyco Electronics Corporation has embarked on a journey to transform the current reporting centric custom datawarehouse (Tyco Electronics Datawarehouse TED ) to the next generation enterprise datawarehouse (TED 2.0) which enables interactive analytics leveraging the capabilities of HANA and the SAP Businesss Objects Tools. We will be covering our successes and lessons learned which include the technology selection process, organization roles , architecture and strategy to transform the datawarehouse to reach new users to make BI truly available for the masses enabling self service . This will include sharing our experience for the selection of the right tool for the right job including a demo of our Interactive Analytics including Dashboards , Data Exploration , Data Visualization and Self Service Reporting capabilities.

• November 23 - What's New in SAP BusinessObjects Mobile BI
  
  Learn what is new in the fourth quarter release for SAP BusinessObjects Mobile BI.  There will be time to ask questions.

I hope you enjoy these session.

Please note, that these are webinars organized by the ASUG BI group and for attending you need to be a ASUG Member.

Right now it feels already a little bit like "waiting for Christmas" for me as our next major release of our Extensions for SAP BusinessObjects Design Studio is very close (and our SAP Lumira Extensions as well).

As part of the upcoming release we did add several components as part of our "Selectors and Filters" area. One of these components is a Listbox. I am sure there will be several of you that now say .. "... well SAP has a listbox as well".... so let me show why our Listbox is different and what additional functionality it provides.

So lets start with the configuration:

The Listbox is designed so that it doesn't need any scripting functionality for most of the scenarios. In the Additional Properties of the listbox you would first of all select the dimension that you would like to use for the listbox itself - as shown below.

If you would like, you can limit the amount of entries as well and as you can see in the screen shot above, you can also list the Target Data Sources (1 or many) in the configuration.

In addition you would then configure if you would like to show the key or text or both as the "Display" option and which of the values you would like to send to the Target Data source. In addition the Listbox provides features such as sorting or searching out of the box.

The option "Runtime Display" is giving the end user the option to switch between the different display options (Key, Key & Text, Text, ...) at runtime.

Those are all the basics for the listbox. So now lets go to the interesting parts.

The Listbox also provides Alerting capabilities where you can create a conditional highlighting based on a simple measure comparison, or a measure calculation, or based on a Target Value as shown above.

You then have the option to select a color and a symbol, which then will be shown as part of the listbox itself - as shown below.

As shown above, the alerts are shown in front of the product members, our listbox shows the Search dialog, the option to switch between the different display options, and provides an "All Member" out of the box.

In addition the listbox provides all the usual scripting and the option to select single values or multiple values.

So instead of just providing your users with a simple list of members, you can quickly provide your users with a searchable list and you can add additional help by using conditional formatting as part of the listbox already.

Redeployment of BO to Portal

At my current site we have two channels of accessing BO, a tomcat web server and a Netweaver web server running portal we call it the  "BI Portal".

Previously to my engagement, design studio was upgraded from 1.3 to 1.5, functionality worked fine on the tomcat integrated solution. However the Portal failed with the error "Version mismatch: Web tier: 13.2.0.259 PJS: 15.0.6.159" , a quick call to my mate Igor Chang suggested that Design studio upgrade would have touch BOE web app and this needs to be pushed again to the Netweaver App server (Thanks Igor)
There are a number of sdn wikis on this such as this one

Once the Design Studio has been upgraded it adjusts the BO run time app, this update (BOEWEBAPP)  needs to be imported into the portal for integrated functional to work again. Which is basically what the error is saying the Netweaver web-tier has runtime of 1.3 but the Design studio app is 1.5.

1. Following Note http://service.sap.com/sap/support/notes/1677616
   We have version 4.0 SP 10.2  BOEWEBAPP Java
   
   
   Note there may actually be more than just BOEWEBAPP Java impacted by the update. Latter I actually updated all the components of sapappserv73 see below where I talk about mobile server apps.
   
   
2. On BO Server (sapbod) create java extraction  start
   wdeploy sapappsvr73 –DAPP=BOE predeploy
   
   
3. After 45 minutes a files will be created in the app directory
   in the workdir of the BOE server
   D:\usr\sap\BOQ\SAP BusinessObjects Enterprise XI 4.0\wdeploy\workdir\sapappsvr73\application
   
   
   
   
   
   
4. Copy these files to the Portal hosts (eg sapportbpd) into the EPS/in directory relevant.
   
   
   
   
   
5. We need to redeploy the same version with JSPM so we need set the force options in the file
   D:\usr\sap\BPD\J02\j2ee\JSPM\param\jspm_config.txt
   
   /jspm/forceMode=true
   /jspm/deployVersionRule=updateAll
   
   
   
   
6. Start the jspm go.bat
   
   
   
7. Choose Single Support Packages and Patches (advanced user only)
   
   
   
   
8. Choose Target
   
   
   
9. If you cannot confirm and there is some kind of security failure. eg. Error during validation of the selected support packages REVISE
   
   
   
   Error: com.sap.ASJ.dpl_api.001226 Could not establish connection to AS Java on [sapbod:50204]. Cannot authenticate the user. Wrong or missing security credentials (password) for principal [test], or the specified principal has no permissions to perform JNDI related operations
   
   Then update EVERY SAP profile with the following 
   service/protectedwebmethods=NONE
   
   
   Stop the SAP instance, restart all running services restart instance
   
   
   
10. Confirm and start
    
    
    
    
    
11. 45 minutes and the import is completed;  BOEWEBAPPJAVA is deployed
    
    
12. Stop and restart the portal again, you may remove the service/protectedwebmethods=NONE
    if you had to make the change to make the deployment work.
    
    
13. The app tests OK.
    
    
    

Portal to BOBJ Integration Fix

In Additional BI Mobile components also broke after upgrade of design studio.

1. We need to wdeploy sapappsvr73 predeployall
   
   Which will create exports of all the deployed modules under sapappsvr73
   ( rather than the single module export command as above egwdeploy sapappsvr73 –DAPP=BOE predeploy )
   
   
2. Copy D:\usr\sap\BOP\SAP BusinessObjects Enterprise XI 4.0\wdeploy\workdir\sapappsvr73\application to EPS/in
   
   
   
   
3. As before use jspm go.bat  And then deploy the mobile apps or all apps as you require.
   
   
   
   
4. Continue
   
   
5. If you get error saying REVISE after selecting packages.
   
   It may be because the remote EPS inbox files cannot be read from some reason.
   Created a local the EPS in box and copied the sca files to this local directory, then updated profiles
   
   DIR_EPS_ROOT= \\thelocalserver\sapmnt\trans\EPS
   Update DEFAULT.PFL and each instance profiles and restarted sap, INCLUDING restarting services retry deployment
   
   
6. Confirm deployment.
   
   
   
   
7. Restart the Netweaver stack (after removing the changed EPS in box parameter if required)
   
   
   Retry the mobile app it should now work.