SAP BusinessObjects Design Studio

This past week at BI 2014 we learned more about what is coming in Design Studio 1.3. I discussed some of this here at BI 2014 Design Studio and Dashboards - Looking to the Future but I didn't have high quality screen shots.

Given the feedback of the low quality of my pictures at BI 2014, I decided to cut and paste slides from a DSAG webinar on Design Studio, combining it from notes at BI 2014. Note that the usual legal disclaimer applies that things in the future are subject to change. See below:

Figure 1: Source: SAP

Figure 1 shows BW Integrated Planning support. At last year's TechEd, SAP explained this was the number one rated feature on Idea Place for Design Studio. This week SAP relayed that charing extensions and configuration properties were enhanced. Bookmarking was also planned to be delivered in 1.3

Figure 2: Source: SAP

Planned for Design Studio 1.3 is HANA native deployment. So starting with Design Studio 1.3 you can use Design Studio locally, on BIP, on BW, and HANA.

Figure 3: Source: SAP

As discussed Monday at BI 2014 more CVOM properties are exposed as shown in Figure 3. You can see font weight, colors on the axes, and a long list on the general properties.

Figure 4: Source: SAP

Figure 4 shows conditional formatting for charts so you can configure threshold for charts, changing colors.

Figure 5: Source: SAP

Figure 5 shows that scaling factors will be supported in Design Studio 1.3. At BI 2014 I don't recall that much was discussed on Lumira CVOM SDK integration.

Figure 6: Source: SAP

Figure 6 shows improvements in variable prompts. You can set the maximum value displayed in the right of Figure 6.

There was a discussion whether you should really be using variables in a dashboard at BI 2014.

Figure 7: Source: SAP

Figure 7 shows support for bookmarking, which was also discussed at Las Vegas TechEd last year.

Personalization is supported, allowing you to save your own views of the Design Studio application.

Figure 8: Source: SAP

Figure 8 shows more flexible scripting options

Via twitter, more upcoming scripting options are mentioned for 1.3 :

@Mike_Howles @SAPAnalytics @tpowlas not best script lang but great feature of DS; foreach loops, arrays and sorting to come with DS1.3
— Lars Schubert (@graphomate) March 27, 2014

We also saw a recording of a Design Studio 1.3 demonstration:

Demonstration of Design Studio 1.3

For more information and more opportunity to ask SAP questions join ASUG May 6 for this webcast: ASUG.com - Events

Join us at ASUG Annual Conference June 2nd for the ASUG pre-conference also includes Design Studio:

Jump Start ASUG Annual Conference SAPPHIRE with a Pre-Conference Session - Back and Better than Ever

Whereas Andrew Fox talked in his blog (What is the future for Dashboards created by the mythical "Business User?")

about the adaption of Design Studio as the successor for Dashboards aka Xcelsius, there is also a big role to play for Design Studio as the successor for the BEx Web Application Designer.

In the future directions of the Design Studio roadmap, closing the gap with BEx Web is listed, among features as context menu, RRI, favorites and broadcasting, with only favorites expected in the DS1.3 version. In the case that is required to do an upgrade from BEx WAD 3.5 front-end to Design Studio, there is thus a challenge to meet.

In this blog I report on some ideas we used to close the gap.

First of all, the functionality is part of a template we use as a base for all the WAD reports to convert. The scripting is made generic by using BEx query metadata that is stored in a DSO and InfoObjects. The idea is similar to the approach Dirk Mayrock used in Internationalize DesignStudio Applications by reusing RSBEXTEXTS table from BEx WAD

Properties

So to change the properties of characteristics in a crosstab, it is necessary to populate a dropdown box with the characteristics that are used in the crosstab. Using the script:

DS_METADATA.setFilter("ZDSDDWN", "X");

DS_METADATA.setFilter("ZDSRAP", ZDSRAP);

DS_METADATA.setFilter("ZDS_DS", "DS_ANA_TAB1");

DROPDOWN1.setItems(DS_METADATA.getMemberList("ZDSKENM", MemberPresentation.EXTERNAL_NONCOMPOUNDED_KEY, MemberDisplay.TEXT, 150));

The first statements are used to select the proper subset of infoobects options. The last statement fills the dropdown box with values like:

To change to representation of the characteristic (text or key), a dropdown box is offered to the user where the characteristic can be selected, and by choosing a radiobutton, the display changes. The radio button has the following ‘OnSelect’ code:

var RB = RADIOBUTTON1.getSelectedValue();

if (RB == "K") { DS_ANA_TAB1.setMemberDisplay(DROPDOWN1.getSelectedValue(), MemberDisplay.KEY); }

if (RB == "KT") { DS_ANA_TAB1.setMemberDisplay(DROPDOWN1.getSelectedValue(), MemberDisplay.KEY_TEXT); }

if (RB == "T") { DS_ANA_TAB1.setMemberDisplay(DROPDOWN1.getSelectedValue(), MemberDisplay.TEXT); }

if (RB == "TK") { DS_ANA_TAB1.setMemberDisplay(DROPDOWN1.getSelectedValue(), MemberDisplay.TEXT_KEY); }

A similar functionality can be created for activating/deactivating hierarchies. When more script options will become available, like switching totals on/of, these can be added as well.

Filter

Another important function is the filter option in the context menu. For this the ‘OnSelect’ option of the crosstab is used. A popup appears that lists all the selected characteristics in the rows or columns, with the filter value. Using check boxes it is possible to select the filter values that need to be kept.

On the background the following happens:

A dropdown box is filled with elements as:

In the script, local variables are filled with the select value in the cross tab and the description of the characteristic:

DROPDOWN2.setSelectedValue("V01");

var A01 CROSSTAB1.getSelectedMember(DROPDOWN2.getSelectedText()).text;

DROPDOWN2.setSelectedValue("T01"); var T01 = DROPDOWN2.getSelectedText();

This code is repeated for V01…Vxx, as much as you need. In our general template we have 20 placeholders. With the local variables the checkboxes in the popup are populated:

if ( A01 != '' ) {CH_CONTEXT01.setVisible(true); CH_CONTEXT01.setChecked(true); i = i + 30; CH_CONTEXT01.setTopMargin(i);}

if ( A02 != '' ) {CH_CONTEXT02.setVisible(true); CH_CONTEXT02.setChecked(true); i = i + 30; CH_CONTEXT02.setTopMargin(i);}

CH_CONTEXT01.setText( T01 + ': ' + A01 );

CH_CONTEXT02.setText( T02 + ': ' + A02 );

When the filter button is pressed, the filters are set using a similar procedure:

DROPDOWN2.setSelectedValue("V01");

if ( CH_CONTEXT01.isChecked() == true )

{ DS_ANA_TAB1.clearFilter(DROPDOWN2.getSelectedText()); DS_ANA_TAB1.setFilter(DROPDOWN2.getSelectedText(), CROSSTAB1.getSelectedMember(DROPDOWN2.getSelectedText())); }

With the command removeDimension(DROPDOWN2.getSelectedText()) it is possible to remove the characteristic from the crosstab as well.

RRI

Finally we also managed to use the local variables in a report to report interface kind of way. For the receiving report global variables XV01..XVxx need to be created as placeholders for the filter values. We realized this in a prototype but decided not to use this, since it requires a lot of maintenance. Instead the RRI is simulated by having the RRI receiver report in a hidden panel. When pressing the RRI button, the applied filters are copied using copyFilters, and this panel is shown.

To conclude

For the experienced analytical user, this functionality is a step back compared to the functionality offered in WAD 3.5. For the majority of the users, combined with the realization of other benefits, this is acceptable though.

What does the application do?

Recently I had some discussions where we thought about tracking twitter messages. Retrieving Twitter messages and being able to put them into an analytic framework. There are scenario’s where this kind of live tracking can be an added value. For example in communications where you want to have a feel for the opinions about the organization at a glance. Or at a helpdesk. For example an internet provider could track how people are tweeting about the service level or how they feel they have been treated during an outage.

image: live tracking of twitter messages

I made a bare-bone example with a twitter component and a real time barchart.

The barchart tracks the results of the number of tweets during a period of time. The component has a property “numberoftweets” that you can use and pass to the bar chart. Each time a value is passed to the bar chart a new bar will appear and the older bars will move to the left and fade to white.

images : Progression of the values

In the future 1.3 release you could also pass the values to a planning model and store these results.

How does it work?

The Tweet component

First of all I searched the internet. I looked for a javascript solution that didn’t have to do all the authorization and needed server side scripting. I found something at http://jasonmayes.com/projects/twitterApi/#sthash.V0yIsiJI.dpbs. I used it and pressed the donate button for his caffeine / beer beverage to code even more.

This is a version where you use your personal twitter account (or organization) to set up widgets. The javascript code uses these widgets to collect the data.

To be able to pass the number of tweets to another component I added the property number of tweets. In the afterupdate event I have 2 lines to update the value :

numberTweets = tweetMessages.length;

this.firePropertiesChanged(["tweetnumber"]);

for the example I just counted the tweets although it is fixed in a parameter. You can also do a substring and search for “seconds ago” and “minutes ago” in the lines. This would give you the number of tweets in the last minute or hour.

to build the html table I relied heavily on the simple table example. As the retrieved tweets are already html it is possible to just append them to the component :

var html = '<ul>';           while(n < x) {             html += '<li class=\"" + "tweetline" + >' + tweetMessages[n] + '</li>';             n++;           }           html += '</ul>';           this.jqTable.append(html);

the javascript itself was documented on the site and looks like this :

twitterFetcher.fetch('449308105306693633', 'example4', 7, true, true, true, '', false, handleTweets, false);

note that the long number is the widget number and the “handletweets” is a function that translates this to a variable that we work with.

The Bar Chart

I will not go too much into the barchart itself but instead focus only on the part that makes it a realtime chart. The intention is that at the start no bars are visible, but that values are added to the chart and represented in the bars.

In the init stage I set up the dataset for the chart. This is an array. The length depends on a property settings (how much history you want to see).

In the getter/setter function for the history length the array is reset when the property is changed :

this.history = function(value) {             if (value === undefined) {                    return historyBars;             } else {                    historyBars = value;                    dataset.length = 0;                    for (var i=0,historyBars; i<historyBars; i++) {                           dataset[i] = {};                           dataset[i].value = 0;                           dataset[i].index = i;                    };                                        return this;             }

Each time a new number is added the number will be set on the right hand side and the value to the left will be removed. This is a getter/setter that is attached to the method

this.measurenumber = function(value) {             if (value === undefined) {                    return measureNumber;             } else {                    measureNumber = value;                    for (var i = 0; i < dataset.length; i++) {                             (function  {                                    dataset[i].index = i - 1;                                    })(i);                           }                    dataset.shift();                                        dataset[dataset.length] = {"index": dataset.length, "value": newNumber};                                        return this;             }

The method is in the ztl file and looks like this :

void setNewNumber( int NewNumber) 
{* this.newnumber = NewNumber;*}

Note that the source of the number also can be a datasource or any other component that provides an integer number. For a timer you can use the SDK component that SAP already provided as a standard example.

Finally for the fading color I use a a d3 scale function. With D3 you can set a domain and a range. The domain is the high and low value of your data. The range is the high and low value of the way you want to represent it. In a bar chart it translates as a height, but you can do any translation. In this instance we use the index value. The higher the value the closer the color gets to midnight blue. The lower, it gets closer to white :

                     var color = d3.scale.linear()                    .domain([0, 25])                    .range(["#ffffff", "#191970"]);

Summary

Using these two techniques I was able to build the realtime scenario. Adding things will make it more useful for all kinds of scenario’s. planning functions in 1.3 will make storage available. For the future and for bigger scenario's you probably want to implement the more official version with the twitter 1.1 api. There is an application authorization available that is enough for any search query. But with looking for javascript on the internet you can go a long way.

Slide Show of Monthly Region wise Data

First Create Two Global variable .

V_pbcounting : Integer (0)

AutoChart_Player : String (Play)

Now add PAGEBOOK in your Application.

Add 5 Pages in It . // I Have Taken Example for 5 Months Only June 2013 , July 2013 … October 2013

Set Transition Effect “Slid In”.

Now Add 5 Charts & 5 Text Box in your PAGEBOOK .

1 Text & 1 Chart in Each Page of PAGEBOOK .

CSS Style for all TEXT :

-ms-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

border-style:solid;

text-align:center;

Now add 2 more TEXTs (TEXT_5 : ”Counting” And TEXT_6) Outside PAGEBOOK (In Application )

& 2 Buttons

PLAY_BTN_1
PAUSE_BTN_1 .

Now In “On StartUp” Write the Code below .

APPLICATION.doBackgroundProcessing();

Now In “On Background Processing” Write the Code below .

if (AutoChart_Player == "Play") {

v_pbcounting = v_pbcounting + 1;

TEXT_6.setText(Convert.floatToString(v_pbcounting + 0.00));

if (v_pbcounting == 20) {

PAGEBOOK_1.setSelectedPageIndex(1);