I've had the opportunity recently to work quite a lot with Design Studio, specifically during the development of course material for BI Clients and Applications on SAP HANA at openSAP. In the exercise for Week 3 Unit 3, we use CSS to format a crosstab and dimension filter in Design Studio 1.3. The outcome looks like this:

When I wrote the exercise, I pretty much just fumbled around blindly using this handy document as a reference:

Design Studio 1.1 Full List of CSS classes (?)

I came out with the following CSS, which, for the dimension filter at least, is pretty clunky:

.sapzenfilterpanel-Container,
.sapzenfilterpanel-Container .sapUiBorderLayoutTop,
.sapzenfilterpanel-Container .sapUiBorderLayoutTop,
.sapzenfilterpanel-HeaderText,
.sapzenfilterpanel-HeaderText.sapUiTv,
.sapzenfilterpanel-HeadLine,
.sapzenfilterpanel-Container .sapUiRrRow .sapzenfilterpanel-RowRepeaterRow div
{  font-size: 10px !important;  color: white !important;  background-image:    linear-gradient(    red, #f06d06    );  top: 1px !important;  bottom: 1px !important;  margin: 1px 1px 1px 1px !important;  align-items: flex-end !important;
}
.sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellDefault,
.sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellDefault
{  color: blue !important;  text-shadow: none !important;
background-image: none !important;  background-color: blue !important;
}

At the root of my efforts with the dimension filter, was the borderline OCD obsession with aligning the vertical space required by the dropdown boxes and the dimension filter. The Design Studio application designer doesn't allow you to set the height of a dropdown box when using the Mobile theme. It is hard-coded to auto, which amounts to a value of 31:

Perhaps a small part of me hoped that this would get picked up and fixed in DS 1.4, but since it didn't, I've now convinced myself that this was a decision made in order to optimize the dropdown button for touch events, on mobile devices.

Now that we've settled that (or have we?) the only remaining task is to size the dimension filter that shares real estate on the header section of the application with the dropdown boxes to an equivalent height of 31. Perhaps it's trivial, but I would argue that in order to deliver consistency in our visual design approach, it is important nonetheless. Borrowing a line from the visual design basics site, this is a component of unity:

Unity has to do with all elements on a page visually or conceptually appearing to belong together. Visual design must strike a balance between unity and variety to avoid a dull or overwhelming design.

OK, so my approach to unity in this little application is to normalize all of the filtering components on a single x-axis, and to have them render with the same height.

This should be easy right?

I'll just set the height of the dimension filter to 31 and forge happily ahead...

Wait a minute, that can't be right ... the bottom of the dimension filter is cut off, and there's a scroll bar on the side of the component! Even in a pinch, I couldn't very well deliver my openSAP exercises with something looking this unprofessional. So I played around with the classes I knew about at the time and delivered a filter bar that we can have a closer look at:

It is clear that the dimension filter is bigger than the other components, even though the font size has been reduced. Unfortunately, due to the fact that my deadline was looming and that I enjoyed playing with the linear-gradient property so much, I went ahead and published this as-is. Story over right?

Not quite. A couple of weeks ago a student asked in the discussion forums whether it was possible to apply word-wrap to header cells in a Design Studio crosstab (it is btw:

.sapzencrosstab-HeaderCellContentDiv { word-break: break-all !important; white-space: normal !important; }

) and I mused in an SCN comment that I'd like to know how people knew which CSS classes to use:

Mike's comment was pointed enough ... but initially I wasn't completely certain what he meant. I'd used the developer tools before but how could I use this to sort out all of my ailing CSS? What follows is the process I used to identify the classes and properties needed to take control of the dimension filter and make it look correct at a height of 31px.

Let's start with an unformatted application:

I'll execute the application locally and have it launch in Chrome. Once it's up, press F12 on your keyboard to bring up the developer tools. Your screen will now look something like this:

You want to be in the Elements tab and you should see the Styles tab on the right. There is unfortunately a lot of noise to sift through here, and I'm going to use that as an excuse for why I didn't stumble across this initially. However, thanks to Mike's comment, I knew there was some magic here somewhere if I could find it. In the image above, you can see a div set to 100% of the page body ... this is the root div that the rest of the application is contained within. Expand a few levels and find the root element from which the mobile theme is inherited. :

Once you expand the body element you can see where the magic takes place:

There you have it! The div inside of the comments above contains all of the components in our application. In this case, my application was called WORDBREAK, so that shows up in the Start/End template body comments. Expand a few more levels and we finally locate the element containing our dimension filter:

It's quite helpful that Chrome highlights the entity on the browser as you mouse-over it. It would have taken me a lot longer to figure out where the dimension filter was otherwise. Now it's important to note that we aren't really interested in this container as an absolute object. We simply need to identify the CSS classes underneath it ... so let's expand a few levels more (it really is like peeling an onion ... it was 6 levels down from here for me):

At last we can identify a CSS class that looks familiar from the 1.1 reference! We can also tell that the sapzenfilterpanel-Container class has correctly inherited the height property we set to 31 in the designer. Since that seems OK, we continue our downward spiral until we find sapzenfilterpanel-RowRepeaterRow:

Finally, the culprit starts to surface. This row container is setting a height of 47px and ignoring the value I set on my application ... for shame! We now know that the class:

.sapzenfilterpanel-Container .sapzenfilterpanel-RowRepeaterRow

Has priority here. It is also superseding another incorrect value of 45px set on the individual class .sapzenfilterpanel-RowRepeaterRow. We can change this right here in Chrome to see how it will look after we fix it:

The scrollbar is gone, and the container is drawn correctly, but we still need to adjust the text components inside of the dimension filter.

The remaining changes are in the same vein.

The text components are structured as an HTML unordered list with list items inside. I assume this is because the Dimension Filter and Filter Panel components leverage the same underlying UI5 component.

First, .sapUiTv.sapzenfilterpanel-HeaderText shows up with a default line-height of 45px. We also want to adjust the font-size to 10px so that we can see the entire string:

You can type directly into the properties and see the changes live in the browser window above! Something similar is happening to the .sapUiTv.sapzenfilterpanel-SelectionMemberText class, but here we need to update both line-height and height:

And last but not least, we have the .sapzenfilterpanel-RightArrowImage class which seems to get a relative top property set at around 1/3 the height of the container object (which was 43px originally. The top property below is initially set to 14px. 14/43 = .325):

So we can set the top value to 10px. Now we have a filter panel that looks and feels consistent with the dropdown box:

All that's left to do is apply the CSS. The final CSS looks like this:

.myDimFilter .sapzenfilterpanel-Container .sapzenfilterpanel-RowRepeaterRow,
.myDimFilter .sapUiTv.sapzenfilterpanel-SelectionMemberText,
.myDimFilter .sapUiTv.sapzenfilterpanel-HeaderText
{  font-size: 10px !important;  height: 31px !important;  line-height: 31px !important;
}
.myDimFilter .sapzenfilterpanel-RightArrowImage
{  top: 10px !important;
}

I preface the properties with my own custom class called myDimFilter so that I can apply it to the components individually. Without this qualifier, the default styles are changed and it messes up the filter panel component. This validated my theory that the underlying UI5 components are the same.

I hope you've found this investigation helpful!

In this second blog about the new features, I thought I would try and look if I could have a little fun with the checkbox group. The main advantage of this component over the old one that you do not have to set each checkbox individually.

Additionally it has methods for adding and removing elements as well as a method for updating the values that are selected.

In my tryout I wanted to see if I was able to manage a menu with checkboxes programmatically in script by using variables.

The endresult was this :

When you click a menu item you open a submenu with a checkbox group. The values in the checkbox group, including the check, is being populated from variables that were set at startup.

This kind of menu can be a nice way to enable a light form of OLAP navigation. The option to add or remove filters from your dataset.

Button

When you click the button it stays in a clicked status, additionally the script will position the submenu underneath the clicked button. If the button already was in a clicked position the submenu will hide and the clicked status disappears.

In the menu itself there are two methods referring to a global script function :

GLOBAL_SCRIPTS_1.setSubMenu("dim1",MENU1);
GLOBAL_SCRIPTS_1.setButtons(MENU1);

The first function will set the checkbox group, the second one will set or reset the clicked status of the button itself.

The variables

As you cannot work with array variables I used separators to create two dimensions. The , sign was the separator between rows, the : sign was the separator between columns.

Dim1 = "1:North,2:East,3:South:X, 4:West:X";
Dim2 = "1:Blue,2:Green,3:Black,4:Red:X";
Dim3 = "1:Adagio,2:Largo,3:Presto:X,4:Grave";
Dim4 = "1:Mozart,2:Beethoven,3:Locatelli,4:Mendelsson Bartoldi:X";

In the list above you see that a row can hold two or three fields. A third field is added when the field should start as Selected.

(re)setting the buttons

to set or reset the buttons I created a function with the input parameter “clickedPanel” type Panel. I use the input parameter to check the current CSS class. If the css class wasn’t already clicked it will at the end set the status to “clickedbutton”.

Before the last line all the buttons (including the clicked one) are set to standard button setting.

var orgCSS = clickedPanel.getCSSClass();
MENU1.setCSSClass("button");
MENU2.setCSSClass("button");
MENU3.setCSSClass("button");
MENU4.setCSSClass("button");
if (orgCSS != "clickedbutton") {clickedPanel.setCSSClass("clickedbutton");}

Using the variable to set up the menu.

Reading the variable

To read the variable I used a nested forEach loop. One at row level and within the row one at field level. At the end of each loop at row level a new checkbox is added using the addItem method. The key and value were derived by splitting the and assigning the 0 index row and 1 index row to key and value respectively.

var arr = inputstring.split(",");

arr.forEach(function(element, index) {
                arr2 = element.split(":");                arr2.forEach(function(element, index) {                                if (index == 0) { key = element;}                                if (index == 1) { value = element;}                                if (index == 2) {                                if (selectedKeys.length > 0)
{newInput = ",";} else {newInput = "";}                                               selectedKeys = selectedKeys + newInput + key;                                                                                              }                });                CHECKBOXGROUP_1.addItem(key, value);
});

You also see that when a third field is present (index 2) then the key value is added to the selectedKeys string variable. Using the same split technique I’ve created a new array and used this to set the selected values with the method :

CHECKBOXGROUP_1.setSelectedValues(selectedArr);

The Entire Code as it was set in the global Script Object:

Conclusion

With the checkbox group you have options to create large menus. The best way is using lists from your data source, but you can use variables internally in the applications to achieve a large amount of control over your components.

I like the new component but I am looking forward to the addition of global variables. I used a lot of crooked methods of splitting strings to achieve things that are straightforward with a few added possibilities that are standard in JavaScript.

Although this is not one of the big additions, I am happy enough to have it in my arsenal. It does give options to easier create options for users.

Note: I do not say you have to build applications like this. This was just something I thought of trying to find a way to test the waters with new functionality. Ideas may vary from useful via not so useful to outright crazy

It’s been only a few days since the release of SAP Design Studio 1.4 & it has already created so much buzz among the community. One of the features that I have been excited about, is the ability to have custom data sources. For those of us who have worked with SAP Dashboards (Xcelsius), data connectivity to flat files, web services among others, has always been on our wish list.

Although, it is not straightforward connectivity(I wish…), SAP has provided Data Source SDK which can be used to create custom data sources that can take data from any number of sources.

I have been playing around with the SDK and came up with something interesting. Here, I have used the sample CSV Data Source provided by SAP and made changes to it, to accept JSON Data from a Web Service – the REST API ‘openweathermap’. Here is the code !

Contribution.xml

<?xml version=“1.0” encoding=“UTF-8″?><sdkExtension
xmlns=“http://www.sap.com/bi/zen/sdk”
id=“com.sap.sample.jsondatasource”
title=“SAP Design Studio SDK Extension Sample JSON Data Source”
version=“14.0”
vendor=“visualbi”><component
id=“JsonDataSource”
title=“JSON Data Source”
tooltip=“JSON Data from openweather API”
icon=“res/icon.png”
handlerType=“datasource”><jsInclude>res/js/component.js</jsInclude><property
id=“Jsonurl”
title=“Valid Json url”
type=“Url”/><property
id=“hasHeaderRow”
title=“Has Header Row”
type=“boolean”/><property
id=“hasHeaderColumn”
title=“Has Header Column”
type=“boolean”/></component></sdkExtension></xml>

component.js

sap.designstudio.sdk.DataBuffer.subclass(“com.sap.sample.jsondatasource.JsonDataSource”, function() {
var that = this;
var _hasHeaderRow = false;
var _hasHeaderColumn = false;
var _jsonurl;
this.init = function() {
this.defineDimensions([{
key: “cols”,
text: “City”,“axis”: “COLUMNS”,“axis_index”: 0
}, {
key: “rows”,
text: “Date”,“axis”: “ROWS”,“axis_index”: 0
}], {
key: “measures”,
text: “Measures”,
containsMeasures: true,
members: [{“key”: “measure”,“text”: “Temprature”,“scalingFactor”: 2,“formatString”: “0.00 EUR;-0.00 EUR”
}]
});
};
this.jsonurl = function(value) {
if (value === undefined) {
return _jsonurl;
} else {
_jsonurl = value;
return this;
}
};
this.hasHeaderRow = function(value) {
if (value === undefined) {
return _hasHeaderRow;
} else {
_hasHeaderRow = value;
return this;
}
};
this.hasHeaderColumn = function(value) {
if (value === undefined) {
return _hasHeaderColumn;
} else {
_hasHeaderColumn = value;
return this;
}
};
this.afterUpdate = function() {
$.ajax({
async: false,
url: _jsonurl,
}).done(function(jsonText) {
processJsonText(jsonText);
});
};
function processJsonText(jsonText) {
var city = [];
var day=[];
city[0]=[“”,”Londen”,”Kiev”,”Moscow”,”Morins”];
day[0]=[“01-12-2014″];
for(var i=0;i<jsonText.list.length;i++){
day[i+1]=parseInt((JsonText.list[i].main.temp));
}
city[1]=day;
alert(city);
that.fillWithArray(city, that.hasHeaderRow(), that.hasHeaderColumn());
that.fireUpdate(true);
}
});

In the init function, I have defined a column dimension, a row dimension and an external dimension. I have used the second method of SDK extension – the one using ‘that.fillWithArray’, because data is in a 2D array. Data is the current temperature in the cities, on that day. The ‘that.fireupdate’ function is to notify the SDK framework that your SDK data source contains updated data. I have installed the component and created an application called JSON_DATA. We give the URL of the REST API, in ‘Properties’ –http://api.openweathermap.org/data/2.5/group?id=524901,703448,2172797,2643743&units=metric

This screenshot has been taken after the Data Source is assigned to the Column Chart. A,B,C…and 1,2…are displayed because ‘Has Header Row’ and ‘Has Header Column’ have not been set to true. So the default values provided by the SDK are displayed.

This is where you enable them.

This is how it looks now, when run on a browser.

I have hard-coded the date and the cities here, for simplicity – because the focus is mainly on using a custom data source in SAP Design Studio 1.4 (JSON Web Service). This new feature of custom data sources opens a whole new door of possibilities – mine is just a beginning to tap into the huge variety of open online data, available for analytics. So, let’s keep exploring!

SOURCE: http://visualbi.com/blogs/design-studio/custom-data-source-in-sap-design-studio-1-4/

Describes how to make user-dependent commentary with Portable Fragment Bookmarks. Basically, next show case what can you do with the portable fragment bookmarks.

Purpsose

Allow the user to save some comments on data, using the selection of crosstab or chart.

Animated App (click to animate)

The Concept

Portable Fragment Bookmarks can

be assigned to a "groupIdentifier" which allows selective load from data base
can store any type of fragments (and by this any content you can pack into a container)

This means, using very basic components - input fileld, text filed and panel we can create simple application-dependent and user-dependent commentary solution.

How to Start?

The main object in our application is:

a Croosstab - with activated selection option, here:

a Panel containing some components to implement an interaction for commentary

I) text "Add..." which just informs about the input (static one)
II) dynamic area which changes on selection - the selection information will be given there
III) a placeholder for commentary content, with scroll by local CSS... (as this part will be saved, better would be a CSS class)
IV) button for adding new comment on top
V) delete the complete comment on current selection (I do not want to be too restrictive here, I just delete the whole content...)

a Button "Commentary" just to show the panel...

On Selection in Crosstab

Prerequisite for this code (as it is not a generic function for all drill down states) : you know the query drilldown. Of course, you can rewrite the code with loops on dimensions, etc..

The logical description of the function:

ask crosstab for the selection...

we create a selection-specific group identifier and internalPattern (by binding the internalKeys)
set the selection information into the text filed (just for info)
ask for portablefragmentbookmarks on the groupIdentifier
loop on all bookmarks given byy the framework and check if the internalPattern is in description
if it is, load the bookmark - and this sets the commentary content on the prepared textfield
if not, clean up the text filed manually

we ask crosstab for the selection...

var characteristic1 = "0BC_PROD1";
var selection1 = CROSSTAB.getSelectedMember(characteristic1);

var characteristic2 = "0BC_PERS1";
var selection2 = CROSSTAB.getSelectedMember(characteristic2);

we create a selection-specific group identifier and internalPattern (by binding the internalKeys)

var internalKeyPattern = "| " + selection1.internalKey + "|" + selection2.internalKey;
var groupIdentifier = "COMMENTS_" + characteristic1 + "_" + characteristic2;

set the selection information into the text filed (just for info)

TEXT_SELECTION.setText(selection1.text + " and " + selection2.text);

ask for portablefragmentbookmarks on the groupIdentifier

var frBookmark = Bookmark.PortableFragmentBookmark.getAllBookmarkInfos(groupIdentifier);

loop on all bookmarks given byy the framework and check if the internalPattern is in description

var bookmarkId = "";

frBookmark.forEach(function(element, index) {
if (bookmarkId == "") {
   var description = element.description;

   if(description.indexOf(internalKeyPattern) > -1) {
    // there is one.
    bookmarkId = element.id;
   }
}
});

if it is, load the bookmark - and this sets the commentary content on the prepared textfield

if(bookmarkId != "") {
Bookmark.PortableFragmentBookmark.loadBookmark(bookmarkId);
} else {

if not, clean up the text filed manually

TEXT_COMMENT_CONTENT.setText("");
}

By this, every selection will lead to reload, and to check if there is a specific bookmark on this groupIdentifier / internalPattern.

Saving a Comment

Now, having a selection and user created content, the idea here is just to append it into the TEXT_COMMENT_CONTENT, which is part of the container saved in the bookmark.

The logical sequence..

again, check the current selection
create same groupIdentifier and internalKeyPattern (this could be externalized into global script functions)
check again in a loop if a bookmark already exists (to get the key for overwrite), also here the loaded key could be back-uped when loading the comment
append the text with "\n" for new line
save or overwrite the bookmark.

again, check the current selection

var characteristic1 = "0BC_PROD1";
var selection1 = CROSSTAB.getSelectedMember(characteristic1);

var characteristic2 = "0BC_PERS1";
var selection2 = CROSSTAB.getSelectedMember(characteristic2);

create same groupIdentifier and internalKeyPattern (this could be externalized into global script functions)

var internalKeyPattern = "| " + selection1.internalKey + "|" + selection2.internalKey;
var groupIdentifier = "COMMENTS_" + characteristic1 + "_" + characteristic2;

check again in a loop if a bookmark already exists (to get the key for overwrite)

if(selection2.internalKey != "") {
var frBookmark = Bookmark.PortableFragmentBookmark.getAllBookmarkInfos(groupIdentifier);

var bookmarkId = "";

append the text with "\n" for new line

TEXT_COMMENT_CONTENT.setText(APPLICATION.getInfo().dateNow + ": " + INPUTFIELD_COMMENT.getValue() + "\n" + TEXT_COMMENT_CONTENT.getText());

frBookmark.forEach(function(element, index) {
if (bookmarkId == "") {
   var description = element.description;

   if(description.indexOf(internalKeyPattern) > -1) {
    // there is one.
    bookmarkId = element.id;
   }
}
});

save or overwrite the bookmark.

if(bookmarkId != "") {
Bookmark.PortableFragmentBookmark.saveBookmark(groupIdentifier, PANEL_COMMENTARY_CONTENT, "", internalKeyPattern, "", bookmarkId);
} else {
Bookmark.PortableFragmentBookmark.saveBookmark(groupIdentifier, PANEL_COMMENTARY_CONTENT, "", internalKeyPattern, "");
}

INPUTFIELD_COMMENT.setValue("");
}

By this, all user comments can be saved. I have used the date for append, but this is up to you. you can also use user name, but this makes more sense when the bookmarks will be sharable (not in 1.4 release).

Example App (you can download the ZIP)

Release SCN_SIMPLE_COMMENTARY · KarolKalisz/DesignStudioBiAppRepository · GitHub

Have Fun!

Design Studio 1.4 provides the ability to use Context Menu/BW RRI functionality to jump from a Design Studio application to a BEx query, by default the target BEx query is executed in the BEx Web application runtime as explained in the SAP tutorial here. This blog looks at how you can use a Design Studio application to run the target BEx Query.

This functionality can be used for jumping from a Design Studio application to another one passing all the filter parameters from the first application. The advantage with this approach is you don't have to handcode the filter parameters applied in the source query, all the filter parameters and the jump context (selected row) will be passed to the target query if they are available in the target.

Video below for config and application demo.

Direct link.

Detailed steps below:

Configure the jump target in BW tcode RSBBS to jump from Query A to Query B. (Detailed steps for configuring jump targets are explained in the SAP tutorial mentioned above)
Create a new a new Analysis Application from Design Studio using the "Ad-Hoc Analysis Application Template" and save it to the BI Platform.

Copy the CUID of the newly created Design Studio application from the properties panel.

If you are creating a blank application make sure you configure the Global Script Variables XQUERY and XSYSTEM as URL parameters. The name of the Script variable should be exactly the same as the RRI function will be sending the query and system parameters in this format in the URL. In addition to this you will also need to add the script in your custom template to assign the query and system name to the datasource and load the datasource, sample code can be found in the SAP delivered adhoc template.

3) Logon to BI Platform CMC, navigate to Servers and look for all the Adaptive Processing Servers which host the Analysis Application Service used by Design Studio. Right Click on properties and navigate to the section "Analysis Application Service", enter the CUID of the DS application. If you have multiple "Analysis Application Service" servers this change will have to be done to all of them.

4) Create a new Design Studio application and assign BW BEx Query A from step 1 to a new Data Source. Add a Crosstab, assign data source to crosstab and execute the application on BI Platform.

5) Execute the application on BI Platform, filter the application on any Dimensions, right click on the Crosstab and execute the RRI link under Jump to.

6) In the target application check to see whether you have all the filter criteria from the source BW query applied. In the source query filter was applied to Country and the the line Company Code =3333 and Cal Year = 2011 was selected for Context Menu. All those filters are applied to the target query.

Please note the following:

This functionality does not work in "Local Mode".
The Design Studio template which is used to execute the BEx query target RRI is global to the BI Platform.
This functionality works only from Crosstab, there is no support for BIAL to have the ability to use a custom link or image.

New in 1.4 is the ability to give the business users the option to undo actions. In this blog I will try this function and apply it to some scenario’s that might be feasible. In some places I reference that I would rather use bookmarks for some scenarios . That is a different subject in itself which I will follow up on in a later blog.

Using Undo

The first step is to set the maximum of steps you can go back from your current state.

Once this is done you can apply the script below in a button to make undo possible :

var ButtonState = State.isBackOneStepAvailable();
if (ButtonState) { State.backOneStep();}

That’s easy enough I think. You can off course omit the var statement and immediately put the State.isBackOneStepAvailable() method in the if statement, but personally I like to err in the direction off readability over compact coding.

When testing I thought I want to use the global script and add a number of methods in the script. I was curious whether one step back was the entire global method or just one step within the global method. It turned out that one step is the global script as a whole. I tested this by setting the text of two objects multiple times in two global script components. With one undo action the original state was set on both objects.

This part is working nicely. A nice to have for the future would be the redo functionality. Especially as an analyst you have situations where you go back and forth between the current version of the analysis and the state 5 steps ago. For example to check if your numbers still line up.

While I’m thinking of nice to haves in relation to the 5 steps… A way to do multiple steps in one go could also work nicely ;-)

But thinking through in this: off course you can achieve that by setting bookmarks and alternating between them.

One point though. If you have planning functionality in your application, be aware that the undo function does not work on the numbers that have been submitted or planning functions performed. If you need undo there you have to arrange this in the planning application.

Setting up the Reset

The reset button is similar to the undo button

var ButtonState = State.isBackToStartAvailable();
if (ButtonState) { State.backToStart();}

When personalization is set the BacktoStart function will go back to the personalized state.

I’m a bit confused about the isBackToStartAvailable though. I throught it would work only when the original state is less than the number of undo steps away, but it seems to work always. When you personalized the original state is the personalized state after reloading the app.

So if you want to save the state of an application the better way is to use bookmarks.

Setting up the Personalization

To set the current state of the application as the starting point you can use

State.setPersonalization();

To remove the personalization you have to add a button with the script :

State.deletePersonalization();

You have to watch out though when you allow personalization :

In the notes on personalization the following was added :

“3. On Startup scripts and On Variable initialization do not run when personalizing an analysis application.”

Source: Application Designer Guide: Designing Analysis Applications page 110

This means that if you do a lot of setting up in your startup routine you have to look for other ways to set up.

Tip from me: immediately add the depersonalization button if you add the personalization button. I didn’t and had to save the application under another name because new components didn’t appear at all after saving and refreshing. That’s including the depersonalization button…. (this was in local mode)

So all in all this function does have its drawbacks it seems. In your design you have to move script from the startup to other places. For example filling listboxes with dimensionvalues. The startup becomes a function that sets up basic variables until the user personalizes it. Then the personal settings will be leading.

What I think as a must have for future versions of Design Studio is a function isPersonalized(). In for example BEx a lot of user confusion is about settings that they had personalized and didn’t remember. You want to have a clear message in your application to help them remember that they did personalize the application.

Conclusion

On the TechEd not many words were spent on this little feature. But nevertheless this feature can be a nice addition to your application. When you use personalization be aware of the drawbacks and look if you rather want to use bookmarks instead.

Although I have mentioned some nice to haves I think these features already can have an added value in the current state, but off course adding them would be.. well… nice to have J

In version 1.4 the Bookmark functionality expanded in a big way. Could you only create a bookmark for the entire application in the previous version. Now you have all kinds of bookmark types that can do different things. I’ll gloss over the bookmark types and talk a little about how they work. Then I will try to imagine some scenario’s how you can use the bookmarks as an integrated part of an application.

Along the way I will describe what I do like and what I think would be even better for the future.

Getting to know your bookmarks.

First off all it is good to know that now there are three types of bookmarks you can utilize in your application:

Standard Bookmarks
The standard bookmarks are the ones you already know from the previous version and can create a bookmark for the entire application.
Fragment Bookmarks
Fragment bookmarks are there for when you want to allow the user to save the state of a part of your application. You will offer the ability to save all the components state within a container component (for example a PANEL component).
Portable Fragment Bookmarks
These kind of bookmarks are the same as Fragment bookmarks, but can do something extra. They can be exchanged between application. For now this is only for the bookmarks that you saved yourself.

Each of these can be used in an application. Also you can create a mix of bookmark types where you provide the ability to save parts and the whole application.

Each type of bookmark has methods to save, list, load, delete or share a bookmark.

Note that you cannot share a combination of fragments. The only way to do that is to use portable fragments and combine them by dragging them to a split cell component. Additionally you can create multiple bookmarks of the same elements in a different state and drag those into a split cell component.

Working with bookmarks

I could give some script and examples but Karol Kalisz already did that so I advise you to have a look at these two blogs:

http://scn.sap.com/community/businessobjects-design-studio/blog/2014/11/26/design-studio-14-online-composition-scenario

Design Studio 1.4: Online Composition Scenario (basics)

Design Studio 1.4: Portable Fragment Bookmarks & Reuse in Applications

Scenario’s to use Bookmarks

More Advanced Personalization
In contrast to Personalization you can create multiple bookmarks, you can store them in a list and choose a bookmark. You can create an bookmark icon on the right top menu that shows the list when clicked. For example when you’re working with a complex CRM application where you can set multiple filters to create a subselection of customers. A bookmark list like this will be very helpful :

You even can use a standard bookmark that will load automatically as a personalization option :

var x = Bookmark.getAllBookmarks();

x.forEach(function(element, index) {
  if (element.text =="starter") {
 Bookmark.loadBookmark(element.id);  }
});

Lumira like working for analysts

What If I created an application where in the first screen I have a crosstab (using the analytic template), use the data in a second screen where I have all kinds of Graphical options via script and collecting the visualizations I like in a third screen.

This is a scenario not unlike the Lumira way of working with data preparation, visualize and share. You can use Fragment bookmarks to save results in stage and stage 2. Additionally you can create portable bookmarks for the visualizations you like and add them to the third screen. The Split Cell component is within a PANEL component and that again can be fragment bookmarked. With share bookmark or print application you have the share function.

Self-service Dashboards

Continuing on the first scenario I can create my own visualizations and collect the ones I like in an application. This way I can create my own application. Especially If you a have something in place like the second scenario I described you have a powerful self-service dashboard available for your users.

Especially if you want to offer dashboards to a large group that wants different things this can be the way to go. Mind though that the users have to have some knowledge about what they’re using.

Additionally you have to make sure that the base foundation of your data model is solid enough that it can handle all kinds of users creating diverse scenario’s.

What bookmarks can’t do

Although the bookmarks are already very broad, there are some things they can’t do.

Split cell
At the moment the split cell component is a container without many properties or methods. I would have liked some options to create a layout like you already can with the grid component. Off course you can create the same with first the grid cell and adding split cells in each cell. So it’s a minor thing.

Additionally I would expect some script options that I can click on a fragment in the fragment gallery and use the clicked fragment to add automatically to a split cell by script.

Create Portable bookmarks for others
This is the only major thing that I would like. Especially in the self-service dashboard scenario I can imagine creating 50 tiles (each with a different KPI filter) and offering those fragments to a group of managers. Each manager can pick a selection from those 50 to create their own dashboard. But to do that they have to get access to my bookmarks or that I can save these bookmarks centrally. If you have something like that you probably want some authorization in place id addition to filtering by group

Tweatbeam for portable fragments?

I shouldn't even mention this as it's firmly in the area of fantasy. But wouldn't it be fun to be able to create a tweatbeam like presentation of your fragments?

Often you see public screens with dashboards. I could imagine a collection of visualizations and comments that would present themselves in this way. :

'#SAPDesignStudio' Twitter Wall - TweetBeam

Conclusion

All in all the bookmarks expanded enormously and you can do a lot of things now. I hope they will add the ability to make the portable bookmarks to others soon. But for now there are a lot of fun scenario’s you can imagine with the current state of affairs.

SAP Design Studio – the most versatile analysis tool from SAP – can be hosted on all three platforms offered by SAP (SAP BusinessObjects, SAP Netweaver and SAP HANA). However, the application performance and supported features are not the same across the three. Although SAP Design Studio on SAP HANA offers better performance than the other two platforms, it does not support some really important features like a launchpad and mobile compatibility. This makes it difficult for developers, admins and the end users as well.

SAP Design Studio on the SAP HANA platform might lack some of the features available in SAP BOBJ or SAP Netweaver, but it is designed to integrate well with SAP HANA’s application server and security models. This provides us with options to enhance the Design Studio implementation on top of SAP HANA.

An important feature that end users need, is a launchpad to organize content. Design Studio applications can be integrated into SAP HANA’s Fiori Launchpad and they will use the authentication and authorizations defined within the SAP HANA system.

Prerequisites

We will need the following components to make use of this feature

SAP HANA 1.0 SPS08 (or) above
SAP Design Studio 1.3 (or) above
SAP Lumira Server 1.20 (or) above (SAP Lumira Server provides the Fiori Launchpad)

When Lumira Server is installed on top of SAP HANA, it provides two Launchpads

SAP HANA BI Launchpad (http://hostname:port/sap/bi/launchpad)
SAP HANA Fiori Launchpad (http://hostname:port/sap/bi/launchpad/fiori)

Now let us explore the steps to integrate SAP Design Studio with the Fiori Launchpad.

Step by Step Procedure

Step 1:

Launch HANA Studio and login as a user who has edit/activate rights on the ‘sap.bi.launchpad.fiori’ package. After logon, switch to ‘SAP HANA Development’ perspective.

Step 2:

Select the ‘Repositories’ view.

Step 3:

Select the ‘launchpad’ sub-package, located under ‘sap.bi’ package in the Repository.

Step 4:

Right click on the ‘launchpad’ package and select ‘Check Out and Import Projects’ option.

Step 5:

The next screen will show the repository package that is to be imported and the local path where the file is stored. Click on ‘Next’.

Step 6:

Select the ‘fioricontent’ project from the project list and click on ‘Finish’ to import the project to workspace.

Step 7:

Now select the ‘Projects’ view. The files imported from the server will be available in the project workspace.

Step 8:

Now we need to create an ‘XSWIDGET’. To create a widget, right click on the project and select ‘New -> Other ‘.

Step 9:

Select the ‘UIS Catalog’ and click on ‘Next’. ‘UIS Catalog’ is located under ‘SAP HANA -> Application Development’.

Step 10:

Enter the file name and the catalog name and click on ‘Finish’ to create a template widget. Check the ‘Generate Privilege’ option to generate ‘Application Privileges’.

Step 11:

Now the ‘DesignStudio_EPM’ widget will be created. Open the file by ‘double-clicking’ on it.

Step 12:

Now click on the ‘+’ sign located in the middle of the empty widget and it will give you the list of launchers available. Select the ‘Static App Launcher’.

Launcher Selection Menu

After Launcher Selection

Step 13:

Now click on the ‘Static App Launcher’ and fill in the details as shown below

General Information

Navigation

Uncheck the ‘Semantic Object Navigation’ checkbox. We will be using static application URL.

Target URL

Enter the application’s URL and click on ‘Save’, to complete the widget configuration. The widget can identify the application, even if a relative url is given here.

Step 14:

Now right click on the modified files and select ‘Team -> Commit’, followed by ‘Team -> Activate’.

Step 15:

Now login to the Fiori Launchpad, using your SAP HANA system credentials. The URL format is http://hostname:port/sap/bi/launchpad/fiori

Click the ‘Show/Hide Group Panel’ icon

Select the ‘Tile Catalog’ option at the bottom of the ‘Group Panel’.

Among the available tiles, search for the ‘Design Studio’ catalog and ‘EPM’ application tile that was created in the previous steps.

Step 16:

Now select the ‘+’ sign located at the bottom of the tile and create a new group with name ‘Design Studio’ and click on ‘OK’ to add the tile to the group.

Step 17:

Now the tile is available in your Home Screen under the group ‘Design Studio’.

On clicking the tile, it will launch the SAP Design Studio application mentioned in the Target URL. Since the Fiori Launchpad and the SAP Design Studio application are hosted on the same SAP HANA server, the authentication and authorizations defined at the backend are applicable to SAP Design Studio as well. This Launchpad will help users with an organized access to all their reports and dashboards from one place.

It is important to note that this is a ‘How-To’ on integrating SAP Design Studio applications with the Fiori Launchpad and is different from the ‘Design Studio – Fiori’ integration feature of SAP Design Studio 1.4.

Follow this blog series for more information on security, application privileges and advanced launcher options.

Keep Exploring !

source : http://visualbi.com/blogs/design-studio/sap-design-studio-sap-hana-integration-fiori-launchpad/

History

Just over one year ago, SAP released an SDK to us beginning with Design Studio 1.2. Time flies, and we've had two releases since then and currently are now up to 1.4 with many new features available.

As many know I've publicly shared many of my components to SCN via blog posts referencing open source code on GitHub. It began mostly with blogs on how the components were written, and then my approach shifted to more of a use case followed by a ready-to-install version (with source code available for fellow coders.) Karol Kalisz from SAP also began actively contributing over this past year along with a few from Jeroen van der A, leandro cardoso, Nicholas Stein, and David Richardson.

There's probably little debate that Karol Kalisz and myself have been the most active and at times have even overlapped on contributions to the community. (Example: SDK components - development direction & concepts) Dirk Mayrock also stepped up to try to help curate a list of these components from various open source (and commercial) contributors.

With the many different (and sometimes similar) components we've made available , Karol and I thought there was room to improve and organize. We've had good discussions over a number of threads recently where Karol and I decided to explore the option of creating a unified community package that we could both contribute and collaborate on together instead of working in isolation.

Today

Karol and I are joining efforts for Design Studio SDK development for open source community-based components. SCN is the logical place to announce this and continue to share new contributions.

As of today, our voluntary members are:

Michael Howles

BI Solution Architect at International Paper, an SAP Customer.
SAP Mentor

Karol Kalisz

SAP Employee
Active SCN participant and open source contributor

Why are we doing this?

We see potential in sharing development techniques and common code together.
We want to have a set of components and source code that are not competing or overlapping with one another.
Provide more consistency to our (at times brave) community of designers who are using our SDK components.

Our Main Goals

Continue to share SDK Source Code examples (and their ready-to-install versions) with the SCN Community.
Engage additional SDK developers (new and "old") to contribute.
Engage people who may not be SDK developers, but have great ideas and use case requirements.
Improve and standardize delivery and communication of new components and a way to track issues and new ideas.

What will change for SDK Developers who are interested in participating?

All SDK extensions will be made available in a common repository which is owned by the community.
With a common, centralized repository, better support (always on a voluntary basis, mind you) will be possible.
Basic but limited support approach for isolating 1.4 extensions from 1.3 extensions where feasible, so to not cut off those who cannot immediately move to 1.4 but would like to start moving to this new repository.

What will change for Design Studio Designers who have used existing SDK Extension Releases?

Karol and I have no plans to remove our old repositories as long as GitHub and webhosts used are available. These primarily are:

Mike's Design Studio 1.2/1.3 SDK - Design Studio Utility Pack
Karol's Karol's SDK Components

While you can choose to use these existing packages as-is, we have no plans to fix any issues or enhance them further and we highly recommend you begin shifting over to the newer centralized repository that will receive all future enhancements and fixes.

What is this new approach?

We will provide one centralized repository, but with two different states of development you can choose to work with:

preview
Preview builds are similar to what other development communities may call nightly or experimental builds. In our case, probably not nightly, but whenever we have something we'd like to share in a usable however not fully-baked form.
stable
Stable builds are created when we (SDK developer community) are happy enough with the content and feel it could survive in the wild (Design Studio Designers)

Where can I see the Source Code?

The SDK code can be viewed, forked, and downloaded as a .ZIP of Eclipse projects from GitHub at this URL:

org-scn-design-studio-community/sdkpackage · GitHub

I am not a coder, how can I just install the Ready-to-Use version?

As some know, there are two approaches to installing SDK Extensions. The approach that works for you is based on your workplace environment and design approaches.

"Offline" .ZIP Archive Method
You can choose to download a .ZIP archive version. The advantage is that once you obtain the software in archive form, you can then distribute to a broader designer team at your workplace and you do not have to worry with corporate firewall issues once you have it downloaded once. The disadvantage is that you now must manually pull down future versions and distribute ongoing.
"Online" Repository Method
You choose can install the SDK Extension via URL as well. The advantage is that pulling down new updates is very streamlined and can be done within the Design Studio tool itself. The drawback is that if you have an aggressive corporate firewall this may not be an option, and if you want stricter controls on which last version of the SDK Extension you are using, the online method may not be the best fit.

With that definition, here are the links to the "Offline" Archives and "Online" Repositories.

Online Repository

To install using Online Repository, in Design Studio select Tools -> 'Install Extension to Design Studio...' and copy and paste either the stable or preview version you'd like to install listed below. Do not try to visit these links from a browser, you must use these links in Design Studio.
- stable:http://org-scn-design-studio-community.github.io/sdkinstall/releases/stable
- preview:http://org-scn-design-studio-community.github.io/sdkinstall/releases/preview

Offline Archive

To install using Offline Archive, first download either the stable or preview version below, and then in Design Studio, select Tools-> 'Install Extension to Design Studio' -> Click the 'Archive...' button, and browse to the .ZIP file you have downloaded.
- stable:https://github.com/org-scn-design-studio-community/sdkinstall/blob/master/releases/stable/org.scn.community.sdk.package_…
- preview:https://github.com/org-scn-design-studio-community/sdkinstall/blob/master/releases/stable/org.scn.community.sdk.package_…

Once you have followed one of the 2 method's paths above, the remaining steps are the same. You will be presented with a dialog box asking you which SDK Extension Features you'd like to install. As mentioned earlier, we've made an effort to isolate 1.4 extensions from 1.3 extensions for the time being. That's not to say that some components packaged in 1.3 may not behave differently in Design Studio 1.4, so proceed with this in mind, but the 1.3 option will install in DS 1.3 and both can and should be installed in DS 1.4.

Check mark the relevant Extension features and continue. (DS 1.3 users should only select the 1.3 option)

After finishing the installation wizard, you will be prompted to restart Design Studio at which point you can then begin to use our components!

What all is Included?

Karol's intent is to port over most if not all of his existing components. I've opted to let some of my experimental/exotic components die off and will not be porting them all over since the intent in this repository are mostly usable components and I'd like to avoid cluttering it with my lab experiments. Perhaps Karol and/or I will isolate these as their own check box feature in the future for those brave enough to be guinea pigs.

Support Expectations

Developer participation is purely voluntary and there's no support obligation from participants to provide maintenance, even from SAP.

I'd Like to Join the Effort!

Great! Put a comment below and Karol or I will respond with more detail, if not a separate more technical discussion post/document with more information.

Questions, Comments, Problems?

Please comment below and we will try to help where we can and this post will be kept up-to-date with the latest information as things progress.

This blog explains how you can you the "Lasso selection" feature and Chart API getSelectedMembers available in Design Studio 1.4 which allows us to select multiple series members from a Chart. The Lasso selection allows you to select an area of the charts and the chart selection can be used to filtering the data set, passing the selection to other application, zooming in on the chart etc.

Demo video below (details on implementing this is give below).

We look at 3 different scenarios which this feature can be used for:

1) Scenario 1: Filter another component within the application based on the chart selection.

2) Scenario 2: Pass the filter selection to AOLAP application

3) Scenario 3: Zoom in on an chart selecting certain section

Scenario 1: Selecting Multi series/ filtering based on the On Select Event of the Chart

1) Add Data Source DS_YEAR with Year and select the required Measures.

2) Add Data Source DS_MONTH with Month and Measures. Make sure the filter object (in this case the Year Dimension selected in data source DS_YEAR) is available in this Data Source (does not have to included in the rows or columns).

3) Add a Chart to the Layout and assign Data Source DS_YEAR.

Change the Chart Type to Column

Check the "Selection Mode" for the Chart under the "Additional Properties" panel and set to "Inclusive". This setting will let you select multiple series on the Chart.

To filter the Customer Dimension Selected from Chart on Data Source DS_MONTH add the code below to the "On Select" event (highlighted above) of the Chart.

This will pass the dimension list selected from the chart to the DataSource filter command. When a user click o a new series the filter command will be triggered and all the dimensions selected so far far will be used to filter the datasource.

DS_MONTH.setFilter("0CALYEAR", CHART_1.getSelectedMembers("0CALYEAR"));

4) Add a Cross-tab to the layout and assign Data source DS_MONTH

5) Execute the application and select a Data Series from the Chart and the Cross-tab will be filtered to the selected Data series, you can select multiple series by clicking on the Plot area or the legend or using the Lasso feature by selecting multiple series by holding the mouse button . In the example below 3 series will be selected (2012, 2013, 2014).

The selected chart series can be cleared by clicking on out side of the series area or by providing a button or icon with the code below.

CHART_1.clearSelection();

Scenario 2: Multi series selection to pass the values to an Open Document URL

You can manually read the selected series value and pass the parameters to another application or an Open Document URL, you can read the selected series values into an Dimension Arrayand loop thru the array to form the URL with all the selected values.

Add a button or icon to the application layout.

In the example below you an Open Document URL is formed based on the selection from the Chart. The syntax below is for passing the selected month values to an Open Document URL for AOLAP document. In the example below ZCALYRM is the technical name of the variable in the BW BEx query.

Please note the that based on the type of document (WebI, Crystal etc.) the syntax will changes, please refer to Koen Hesters blog for more details on the exact syntax. Link

//Dimension array with the selected series values
var dimarray = CHART_1.getSelectedMembers("0CALMONTH");
var dimval = "";
//OpendDoc URL with the target report CUID and variable value
var URL = "/BOE/OpenDocument/opendoc/openDocument.jsp?sIDType=CUID&iDocID=AfecEhC69V1Gl4w23y8JTUQ&lsMZCALYRM=";
//Adding the selected chart series memebers seperated by ; to the OpenDoc URL
dimarray.forEach(function(element, index) {    dimval = element.externalKey;    URL = URL + dimval + ",";
});
//Opening the OpenDoc URL in a new window.
APPLICATION.openNewWindow(URL);

This is a great feature which can definitely help with the usability of Design Studio applications.

Scenario 3: Zoom in based on Lasso selection

If you have too many data points on the chart and want to zoom in on a particular section of the chart you could use the lasso selection to select the series and set the filter to the datasource which is used by the chart.

In the example select a Bubble Chart. Add a DataSource with Sold to Party and 3 measures (Sales, Margin and Margin%).

Add the following code to the On Select event of the Chart.

DS_CUST.setFilter("0D_NW_SOLD", CHART_2.getSelectedMembers("0D_NW_SOLD"));

Selecting the dataseries using the Lasso selection.

Zoomed in chart based on the data selection, you can notice that the axis min and max values also will adjust based on the filters applied.

Limitations: Lasso feature did not work on IE 11 (checked in IE compatibility mode also) and iPad Mobile app and Safari browser.

The Lasso selection is a great feature in Design Studio which helps with the usability of Design Studio applications.

This short blog is to compile links for Design Studio maintenance topic.

Based on customer questions, the following PDF is explaining in detail how design studio is maintained.

https://service.sap.com/~sapidb/012002523100019891302014E

The document can be found under the link "Additional Information".

Here the short compilation:

The product SBOP Design Studio is following the standard SAP maintenance for BusinessObjects products:
- 7 years main stream maintenance
- 2 years extended maintenance
Every new major release is resetting the 7 years counter
Every minor release is maintained for 2 years starting with its general availability date
As soon next major release is available, the support packages for the highest minor releases will be still provided with at least 1 year overlap, means at least 1 year longer starting with general availability of the major release

The only two exceptions to the general maintenance strategy are:
- describing how corrections are delivered - always on the highest minor release which had its general availability date
- removing the overlap between minor releases - next minor release is replacing immediately the last one
link to original text: https://service.sap.com/~sapidb/011000358700000889552009E

What does it mean for support and corrections?

every customer can open incident based on any release which is before End of Maintenance date
corrections will be provided based on the current active minor release
the support package of the current active minor release can be applied only for correction purposes
- new features provided in minor release are inactive as long the application definition is not changed

Minor Release & Support Package Plan

Minor releases are planned to be delivered 2 times per year (May & November)
Per minor release 2 support packages are planned (around every 8-10 weeks)
Before the next major release will be provided, the plan will be shared with customers

In case of questions you can use this thread.

Christmas is coming and we do look forward to a peaceful time, family and the Christmas tree.

Gifts play a certain role and we do not want to come second: during Christmas season, our graphomate treemaps for SAP BusinessObjects Design Studio are available for free– “Christmas-treemaps” literally ...

You can use the graphomate treemaps without any restriction and it comes with a documentation in English and German.

Just enter your name and your email adress hereand we will send you a download link immediately.

What is a treemap and what can it be used for?
Originally developed by Ben Shneiderman, in order to represent a large number of hierarchical data in the smallest possible space, the treemap dispenses completely with the known tree-like structure with nodes.
Instead, the hierarchy is represented by nested rectangles: The size of the rectangles constitutes the first measure, while the color of the rectangle represents the second indicator value.

Have a look at this one minute video to get an impression of our graphomate treemaps:

By the way: the graphomate treemaps are completely integrated in the scripting language of Design Studio.
Hope you like it!

Merry christmas, Lars

PS: Please have in mind, that we can't offer support for our FREE add-ons. Thanks ...

Disclaimer:

This component uses hierarchies from BW. It may be adapted to be connected to Hana or Netweaver, but these source system have not been tested.

Introduction

Hello everyone,

I would like to share a SDK component for Design Studio (1.3/1.4) that I developed.

It has been created with several purposes in mind:

Ramp up on the SDK
Replicate a neat feature inspired from the different websites
Add a creative approach to handle hierarchies navigation in Design Studio

Component overview and explanations

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

With this article, I propose to use a easier way to explore and select the nodes, by using a cascading dropdown menus, as a hierarchy is already represented:

A preview can be found here:

For the customer, it is an easier way to navigate through the hierarchy without losing context. The development is a proof of concept and it could be enhanced.

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

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

I have been inspired by the content found on the SCN and the SDK extensions developed by the SCN contributors (List of Design Studio SDK Components), especially the ones from Michael Howles and Karol Kalisz.

The code can be viewed here (franckblais/com.sample.dropdownmenumultiv1 · GitHub) and a deployable archive can be downloaded from here (https://github.com/franckblais/com.sample.dropdownmenumultiv1/raw/master/feature/DDMLV1_Extension.zip).

Thank you for reading this article. Do not hesitate to post questions or remarks.

As you can see, this component is usable and can be improved.

Thank you

How to use it

Step 1

If you want to use the main query to fill the dropdown menu list, please note that only the initially displayed nodes in the query will be used in the menu.

Therefore, if the hierarchy is expanded (?)to the level 2, you will not be able to see the children beyond this level.

For my proof of concept, I preferred to use a query on the Masterdata itself, with only the characteristic and its hierarchy, without any key figures (The content of the hierarchy is extracted from the dimensions members, not from the retrieved content) If you change the explanded levels by default to the maximum, the entire hierarchy will be displayed in the dropdown menu.

Don’t forget to change the members display also to “Key + Text”.

Step 2

Select the characteristic with the hierarchy in the Additional Properties.

Please note that all the characteristics, and the key figures, are displayed even if they are not usable.

Step 3

Include a CSS template and set the options.

CSS template

The menu is entirely displayed as a cascading dropdown menu with CSS.

You can include use my CSS in your Design studio application to have the same behavior and style as me:

https://rawgit.com/franckblais/com.sample.dropdownmenumultiv1/master/res/js/dropv1.css

The dropdown menu is included in a NAV tag with the ID “#primary_nav_wrap”.

A lot of resources can be found on internet for different dropdown menu CSS styles.

Use a single root node

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

With single node	Without single node

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

Add a "reset" button at the left or right

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.

On Click event

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

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

About the author

I am a SAP BI architect and technical consultant, working for Beyond Technologies in Montreal. I have been working mainly on SAP BW, Hana, ABAP and lately on BO.

LinkedIn profile: Franck BLAIS | LinkedIn

Real-Time streaming in dashboards (SAP Design Studio) is now possible with the new SAP Event Stream Processor or SAP HANA Smart Data Streaming (as part of SAP HANA SPS 09) and SAP Design Studio 1.4.

I started drafting this blog with some screenshots and then i realized it is better to show it in a short video demo instead. So, I created a an overview demo on Real-Time (Push Case) and near Real-Time (Pull Case) using SAP ESP 5.1 SP9, SAP HANA SPS 09, and SAP Design Studio 1.4.

Real-Time (Push Based):

Real-time streaming of data is possible with SAP ESP, i.e. you can run and create your own complex event processing (CEP) applications from the streaming data, and with the new SAP Design studio 1.4 this data is streamed into the dashboard in Real-Time.

For this demo, I created a macro that generates random numbers every second, and this data is loaded into SAP ESP and streamed into SAP Design Studio in Real-Time.

Near Real-Time (Pull Based):

Timer component in SAP Design Studio will allow you to set an interval in milliseconds to refresh connections in Design studio application, i.e. data is pulled into the Design Studio application in regular intervals from HANA or BW.

You have two options here:

Option 1: Load the data from ESP to tables in SAP HANA and build Analytic View on these tables.

Option 2: Create a virtual table in SAP HANA using the Smart Data Access and build Analytic View on these tables.

So in this demo, data is loaded into tables in SAP HANA in real-time and the dashboard is built on top of an Analytic View. Data is refreshed every 15 secs using the Timer component.

Context:

You need an instance within SAP ESP 5.1 (SP09) and a project running.
An Analytic View in SAP HANA.
You need the Real-Time package installed in Design Studio 1.4.

Demo:

Source: http://visualbi.com/blogs/design-studio/real-time-near-real-time-streaming-using-sap-esp-sap-hana-sap-design-studio/

QR Codes. We have them as designers when previewing our dashboards locally in Design Studio client, so how can we provide them in usable ways for our users? I thought about one case to address two (delectably annoying to me) habits I see daily:

Habit 1: Printouts

Many meetings I go to involve print outs, yes even the final days of 2014. Maybe it's because we are a paper company, or maybe it's just a cultural workforce thing, maybe it's because people take notes on their handouts, or maybe it's a combination of all these things. Whatever the case, I see lots of printouts!

Let's say that you as a business user, are using a Design Studio BI Application, and want to print out your current view and go photocopy 10 copies for your meeting you are heading to...

Habit 2: Screenshot Scrapbooking in PowerPoint

Similar to the printout habit, many times we need to take a static screenshot for a more composite and controlled presentation and so the habit goes that we end up taking the safe way out and making a static artifact out of it.

How can we make this better?

I'm not on a crusade to eliminate printouts or PowerPoint decks. I'm of an opinion you do not remove habits unless you can replace them with better ones. I think that QR Codes serve a potential for fingerprinting an artifact in either case mentioned above to allow recipients to track back to the source. This is somewhat similar to QR Marketing Codes but maybe a bit more useful in a workplace environment. Let's use a very simple DS Application as a starting example:

A simple BI App with a dropdown to filter a dataset. Of course we know that then for a PPT or Printout is then a static artifact in these 2 cases. So how can it improve? First thing comes to mind are hyperlinks, which may work for PPT decks. But even with PPTs, in our organization I often see people just print those off so links end up being unclickable or unusable when the titles are not the URLs themselves.

I have to admit I have a few annoyances here:

The wrong chart (this is my fault after taking screenshots) - Sales and quantity should be on a dual axis chart, not on the same axis. Surely this can simply be corrected by firing the report author and hiring one with some common sense! But more often the case is that this is the chart that was built based on half-baked requirements to begin with so let's pretend this is what the business asked for and move on.
No values are shown on the chart. This is one of those things where the end-user uses what they have (an interactive BI Application/Dashboard) and takes a static screen-grab of it and does who-knows-what with it.
And again as mentioned, of course it gets more silly as even when a well-intentioned link is placed, a printout negates that.

So while I don't think PPT Scrapbooking will ever be eradicated, we can at least offer some usability alternatives that might sometimes survive a printout or deck.

Here we have the sample BI App at design time with a QR Code component highlighted. The JavaScript library I used was jQuery.qrcode · generate QR codes dynamically · larsjung.de That link will explain some of the QRCode parameters better than I can, but some of the relevant ones are:

QR Code Text - The text to QR Encode. Can be plain text or a URL, how it is handled depends on your QR Code Reader (I prefer Red Laser)
Render Mode - You can select DIV, Canvas, or Image methods. They all nearly work the same in my experience.
Only show on printouts - This parameter I added and is enabled as on above, so that at runtime the user does not see the QR Code however by leveraging CSS @media query rules, is put on a printout. Depending on if the user is PPT Scrapbooking or printing out, on or off each have their place.
Fill Color - Color of the code (the black part)
Background Color - Background Color of the code (the white part)

Most of these properties I also have the corresponding BIAL setter/getter methods exposed for as well. For example, I also have some BIAL to build a URL that will change the QR Code at runtime:

Basically, in this example, as the Year selection is changed, it builds the corresponding BI Mobile OpenDoc URL that could be use to trigger an opening in the BI Mobile app. (http://help.sap.com/businessobject/product_guides/boexir4/en/433_mobiOS_admin_en.pdf section 2.9.3 for details on the URL formation). I also added a text box just to show for illustration purposes the resulting URL as we toggle between Years. This of course doesn't have to be a BI Mobile link, it could be whatever makes sense, but in this case I wanted to show the potential use. So here we are at runtime:

And let's print it out:

Hey, nobody said QR Codes were pretty, right? But maybe with a little bit of formatting and creativity, they can be incorporated in a cool way like some of the QR Marketing campaigns have tried in the past. (Maybe.)

I'm not a graphics artist, but you could place a visual cue and add some coloring or roundness to this QRCode (the Corner Radius parameter) to give it some illusion of a personality. And of course you'd probably want to make it something you could dismiss and hide with a button somewhere in a real-life example.

So while there's nothing to prevent a PowerPoint scrapbooker from just cropping out QR Codes, maybe in certain scenarios may choose to scrapbook them in as well, as to retain working links that are more resilient to their own printout issues?

So whatever the form, using your favorite QR reader, let's see the proof that it works! Again, I used Red Laser as it honors the sapbi:// registered URL. QRReader, a different app, did not (but at least showed the URL) - Your mileage may vary depending on your QR Reader.

Answering Yes this launches the BI Mobile App (with the dummy placeholder values but we can see it should launch the correct app):

Source Code and Downloading

The Source Code can be found here: SCN Design Studio SDK Development Community in our new SCN Development Community repository. In a day or so, the deployable version for non-SDKers will be packaged and made available as well.

Questions/Comments/Feedback/Ideas always welcomed!

This blog explains how to pass Date Range from Design Studio to a Web Intelligence Report via Open document with BW data.

Using a Bex query in Design studio which contains an Optional Date Prompt

So when user selects a date range from Design Studio via Calendar component

Passing the selected date to this optional prompt and returning the results in Design Studio .

Here user wanted to open a Web Intelligence report from Design Studio for detailed analysis with date range parameter. Below steps will explain how to manage it.

Create a Web Intelligence Report

First of all create a Web Intelligence report with the same Bex query , when WebI is refreshed then the Optional date prompt appears

the User response of the Date range is as follows

as per the below thread , I found the Open doc syntax for the Date Time range and the URL for open doc .

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

Now we need to create DateTime format in Design Studio .

Create Date Time Range format in Design Studio

Create below DateTimeformat in Design studio to pass the selected date from the calendar component to a Webi Report

Finding the Start Date and End Date from the Calendar Component

Create 6 Global variables in Design Studio for Start and End dates,

1.Start Month

2.Start Day

3.Start Year

4.End Month

5.End Day

6.End Year

There are two calendar components

From
To

1.From Calendar Component (named as DEMO_FROM)

When a Date is selected in "From Calendar component "

then we will take the output via following script

(DEMO_FROM.getDate());

Now we need to find Day,Month and Year for Starting date from the above calender component

a) Script for Start Month from the calendar component

Start Month=Convert.subString(DEMO_FROM.getDate().substring(6,2),2);

b) Script for Start Day from the calendar component

Start Day=DEMO_FROM.getDate().substring(6);

c) Script for Start Year from the calendar component

Start Year=DEMO_FROM.getDate().substring(0,4);

1.To Calendar Component (named as DEMO_TO)

When a Date selected in "To Calendar component "

then we will take the output via following script

(DEMO_TO.getDate())

a) Script for End Month from the To Calendar component

End Month=Convert.subString(DEMO_TO.getDate().substring(6,2),2);

b) Script for End Day from the To Calendar component

End Day=DEMO_TO.getDate().substring(6);

c) Script for End Year from the To Calendar component

End Year=DEMO_TO.getDate().substring(0,4);

Building the Open Document URL

Currently with the above steps we have Start and End Year, Month and Day values .

Now we need to built the Date Time syntax as below

Creating some of the variables

var comma =",";

Now appending the Start and End Year, Month and Day variable in the final Date Time Variable

var datetime="[DateTime("+Start Year+ comma+ Start Month +comma + StartDay + comma +"12"+ comma +"0"+ comma +"0+")"+".."+"DateTime("+End Year+ comma+ End Month +comma + End Day + comma +"12"+ comma +"0"+ comma +"0+")]"

Above the time is given as yellow color.

After the above step the result will look like this

var u_datetime= Convert.urlEncode(datetime);

Finally Open Document URL is

APPLICATION.openNewWindow("http://boserver/BOE/OpenDocument/opendoc/openDocument.jsp?sIDType=CUID&sType=wid&sRefresh=Y&iDocID=AQqHNJjiKkR_ZGlk25nJ6oc8g"+ "&lsRZTM_EVT_RANGE="+u_datetime);

where ZTM_EVT_RANGE= this is the prompt text of the Date range in Webi Report

Now we successfully Opened the Web Intelligence report by passing Date Range from Design Studio .!!

As part of testing our community SDK components I have started creation of an application which binds the standard functionality and our community extensions.

This is IT - full composition application, where you can create bookmarks and change all possible visualization properties...

I have invested few evenings to get this done, I hope you like it and already have ideas how we can place more functions and improve existing. Btw. the user experience and styling is created by me - and we can improve / change it together. I just had not enough evenings to make more...

What is In?

First, the general introduction - the fragments in design studio (described already in Design Studio 1.4: Online Composition Scenario (basics) and Design Studio 1.4: Portable Fragment Bookmarks & Reuse in Applications) are providing quite flexible possibilities for online editing, composition and sharing of created objects. This functionality is used to build this application - and for those who worked already in Lumira Desktop, the content should not be surprising as the building concept is not invited by myself.

Shortly, this is a combination of "Ad-Hoc" & "Online Composition". You can also use it as Ad-Hoc Application (when you delete the Compose and Share areas)

The Workflow in few Words...

You can directly start the application in local mode with URL parameter XSYSTEM=<ID from SAP GUI>.

Then, automatically open-search dialog will be shown. here you can search for queries (common method is available in DS 1.4). Having one, you either will be lead to variable screen or can directly start in Define area. Here you can try out all possibilities you can find in any UIs (I hope all work, I tried to test them all). The fragments are saved automatically after every almost every change. Having saved some fragments (the big + button is allowing to create new) you can jump into Compose area. In Compose you can drag/drop some fragments together and save as composition with given name and description. The in Share area you can continue and jump into the composed fragment in full screen.

Sometimes you find buttons w/o functions yet - eg the buttons in fragments on left and right side.. I have some ideas for them, but I need to code some additional SDKs to make the real.

Main Logical Areas

From logical point, the application is divided into 3 areas, you can find the navigation block on the top.

Define - here the majority of the time can be spend. You can change the drilldown, filters, many other properties
Compose - pre-build fragments can be put together into a composition. Sorry, as of today only one page is possible, but I will try extend it in January to more pages
Share - here very simple UI to create an URL for sharing the content (creating direct access URL, need to check if multi-user share is working such way)

Define

The main block in define area is the content, here you can see the components which are used for visualization. Those can be all possible charts (some require special constellations of data sources) or crosstab or Mike's Table 2D.

On the left side, you can find

navigation block for drilldown changes and filtering
fragment type selector - chart types ot tables

On the right side, you can find

Data Source Properties, so everything which is in scripting language and based on data source
Dimension Properties, all changes on concrete dimensions
Measure Properties, all changes on concrete measure
Fragment Properties, something on the fragment level (eg. title)
Filters & Formats, meaning FilterByMeasures and ConditionalFormats (or.. BEx Conditions and Exceptions) which can be activated and deactivated based on the query definition

Today I will not describe all possibilities here in detail, please try this out - but all are based on common accessible scripting methods, so take this also as opportunity to copy out what you would like and integrate into own applications.

Compose

This part is a bit simpler, mainly on Left Side you see again a fragment gallery which can be used for the drag action into the area on the Right Side (Split Cell Container). by this you can build smaller dashboards.

Share

Share is currently quite simple, as I could not find a good control for the visualization - so it is a simple radio button group. When selecting a composition, you can see brand new Mike's QRCode generator. Also, the menu on the right side will allow you to create the URL which will directly link to this composition (and is behind the QRCode.

Used Components form SDK Community

As the main topic was to test the components, I cannot forget this point... As of now, I have following components included:

Basics
- Action Sheet Button
- Application Header
- Fiori Button
- Notification Bar
- QR Code
- Toggle Button
- Tree
- Vali Input
Data Bound
- Multi Level Drop Down
- Table 2D
Utils
- Collection

How To Get The Content?

You need 2 parts:

The Application, here: Release Online Composition V1 · org-scn-design-studio-community/applications · GitHub (as ZIP)
The installable package with community components, here: SCN Design Studio SDK Development Community

Important Settings... as there is no generic method for getting list of available systems.

you have to go into the global script: SCRIPT_STARTUP->setSystemId().
there, you have to place your system ID in order to use the app. Details inside.

Other Functions

You can find also "Undo" button which is reverting back the last action (whatever it was). 10 undos are possible.

If you have simension with active a´hierarchy in rows, you can also try out the brand new Franck's Multlevel Dropdown, accessible via the extra button in header area - i called it "hierarchical filter".

Some Impressions

Open-Search Dialog

As there is only a "search method" for data sources, this dialog is basically executing search against the given system and placing the results into a tree. When commiting with OK, the list will be saved as bookmark, you do not need to search again for the same (idea based on Design Studio 1.4: Portable Fragment Bookmarks - Use for Commentary)

The Left Areas

The Right Areas

Compose Area

Share Area

Prerequisites

Design Studio 1.4 release is a must requirement

Issues or Extensions?

I suggest, we try out the GitHub "Issues" - if someone wants to log some issue to fix or idea, use this link below

Access to GitHub Issues
Issues · org-scn-design-studio-community/applications · GitHub

Summary

I wish you some fun in trying out and also would like to know form you if this is usable content for you. Going forward (in January) we will try out to find a process to include all into ideas and extensions of such applications...

Known Restrictions

you can build compositions based on fragments on one query... as of now, but I have idea how to solve this.
in compositions there is no option for filtering.. as of now, need to check what can be done here, but there is hope...

As this is (most probably) the last blog with bigger content in 2014 - Merry Christmas and Happy New Year 2015!

These days, dashboards and applications are being used more on mobile devices than on desktop modes. With tools like Design Studio, you have the power to leverage both desktops and tablets as delivery device of choice. But with this flexibility comes a trade-off, as a design optimized for one type of device is usually not optimized for the other. For now, we’ll review a design that breaks the monotony of traditional dashboards and delivers something that is highly usable on tablets.

Take a look at the following Gas Utility KPI dashboard that was built using SAP Dashboards (Xcelsius) before the tool supported mobile compatibility.

A sample dashboard built using SAP Dashboards / Xcelsius

The above design on the mobile interface does not score high on usability.

We often hold tablets using both hands – freeing up the thumbs in the process. Now wouldn’t it be cool just to use the thumbs for selection in this case? How about the following design?

Sample dashboard migrated to SAP Design Studio on iPad

It was a delight to experience this layout in action. One feedback from an end-user was that this felt like operating a “joystick”, and something that is natural for the device. Note that this is only one design option, and there are other mobile-optimized designs that you must still consider. For example, if you expect the user to perform drilldowns using charts more often than filter content using selectors, your layout may need to change.

For enterprises looking at driving executive adoption of BI, such design principles and usability best practices hold the key for long-term success. As the initial excitement fades and as mobile dashboards and applications become mainstream, things would boil down (as they have always been) to usability, intuitive design and performance. When that happens, would your dashboards have withstood the test of time successfully.

Additional tabs from the SAP Design Studio application are shown below

Source: http://visualbi.com/blogs/design-studio/sap-design-studio-usability-user-experience/

(I say this is 'Part 1' because I'm not done with this but I promised myself I'd release what I had before end of 2014 and it's Dec 31st, so here we are...)

As I said at TechEd in October and in an ASUG Webinar in November on Design Studio SDK:

"Maps are HARD".

I still believe it to be true, for reasons already stated in those 2 sessions, but again here for SCN.

Maps, unlike Charts, rely on a lot of data to tell their story. With a Chart, you define axes and plot points and you're done. With a Map, you need much more information for the data being visualized to make any sense. Information like geographic layers including coastal boundaries, administrative boundaries (countries, regions, subregions, cities, etc) along with even terrain information, etc. These types of Maps on the Web are usually served up as pre-rastered Slippy Map Tiles (OpenStreetMaps, MapQuest, Mapbox, ESRI) or scalable GeoJSON Vectors (TopoJSON D3). Each of these approaches have their merits which most graphic designers know (vector vs raster).
Even after you've tackled drawing a Map, you need to supply latitude and longitude to a Map in order to even plot your date somewhere. You could 'Bring Your Own Latitude/Longitude' (BYOLL from hereafter) or supply Country/City/State/ZIP to a GIS provider to Geocode for you, or cache your own stockpile of locations and lat/lng entries, which is daunting and a maintenance issue.
Licensing issue related to GIS Providers in general. Let's say you find a GIS Provider to handle the task for you, now call your lawyers or accountants to be allowed to use their GIS Services (Tiles or Geocoding) - Mapbox, ESRI and others each have different license structures and if you are a current ESRI customer hey that's great, knock yourself out but otherwise, get ready to pay someone for something.
Relying on a GIS means poking holes through corporate firewalls since you will be relying on external GIS Tile/Geocoding assets.
Oh yeah, and Maps are HARD, in case I've not said it enough!

Even though they are HARD for technical, practical, and licensing reasons, I wanted to see what I could make that poor man's generic map component that:

Does not (but can) use external Map Tiles
Does not use a Geocoding service because (while I had it working, it was annoying, and also remember licensing...)
Does not HAVE to be fed lat/lng because many times you may not have that data in your dataset but you have probably 0CITY/0REGION/0COUNTRY fields available.

My Approach:

I settled on using Leaflet as my main mapping API. This seems like the defacto JS Map library (aside from Google Maps and Bing). They are also Open-Source. There's also OpenLayers, but I didn't like it as much...
Since I was using a Tile approach, I figure out that there's a TileJSON syntax that you can then easily use across any GIS Map Tile Provider (Example: kartena/leaflet-tilejson · GitHub)
I also wanted a good Advanced Property Sheet experience, as the Default Property Sheet in Design Studio is pretty basic and I find it annoying to write JSON string by hand and I'd never expect a Design Studio designer to do this.
And again, options to use all local resources (no reliance on Map Tile Providers or Geocoding services) - Also using only Public Domain data because I don't want to tie my stuff to a GIS license.

How Far Did I Get? Again, Maps are HARD.

Map Tiles (External and Internal):

I used an application called TileMill (built by Mapbox on open source technology) to create my Map Tiles. This is a subject area all in it's own, but long story short, by using public domain data, I was able to generate license-free Map Tiles in two flavors (Standard and Terrain) - All data is public domain from NaturalEarth. Examples in Tile Mill below:

Standard:

Terrain:

In my opinion, these may not be perfect maps compared to Bing/Google/ESRI/Mapbox, but in my opinion, they are "Good Enough" and free.

So after generating these tiles (in the MPTiles format), I needed to extract just the PNG tiles because I was not interested in uploading these in the proprietary MapBox format. There was a nice tool called MB Liberator that handled the job nicely. I had my PNG tiles!

I'll pause here for a note about Map Tiles. They grow exponentially per Zoom Level (which goes from 1, the highest, to 22 or so, the lowest) - I believe they grow by a factor of 4 for each additional zoom level. This means stuff can get BIG, FAST. Tiles supporting Zoom Level 4 weigh around 5MB in all, while Zoom Level 7 grows to around 80MB!! Since I wanted to embed these tiles, I had to be conscientious of the size of the plugin so I settled for a default lightweight set of Zoom Level 4 tiles for both Standard and Terrain. I also have created separate optional feature installs using the heavier level 7 tiles that can be installed separately (more on this later)

So I was able to both achieve my goal of being GIS-independent, yet supporting GIS Tile Providers as well. Below is a screenshot in Design Studio Design time showing different map providers including my local tilesets in action, from simple, to exotic (Stamen Watercolor):

Not pictured, but also works just fine, are Mapbox and ESRI (I personally find ESRI tiles ugly though) - If you turn your attention to the Additional Properties panel, you can see I've added a few nice things like ability to set your map center with a visual map that you can click to set (or you can use the Default Location property in the default Properties pane) - Also you can control min and max zoom and default zoom levels. If you do not know the TileJSON URLs, that's ok I have added several defaults for you using the 'Pick...' button that will fill out most of the TileJSON stuff for you:

So, there's your tiles!
Geocoding/Geohierarchies

Wow, this one is hard, and I'm still struggling with how much of this is feasible or outgrows what is possible in Design Studio... As mentioned earlier, I was able to make this work with a MapBox Geocoder service but I was quickly annoyed by how you had to batch-pull only 25-50 locations per pull and it was an asynchronous spaghetti callback mess behind the scenes and this was only ONE implementation so what if you wanted to do similar with ESRI? Probably a whole different implementation so I backed this approach out and will revisit it another day or find someone equally as insane as me to help.

So I did something equally insane and found some public domain lat/lng data that went down to Postal/ZIP Code and using NodeJS voodoo, carved this flattened list of 500,000 entries into a Geohierarchy in separate JSON files that only get loaded if needed to help with performance. I was able to get this all into about 45MB size (again, loaded on-demand only, not all in your browser or DS client)

I'm leaving a lot of gory details out here, but basically what I ended up with was an ability to resolve location down to lat/lng (if in my 'JSON database').

In order for this to work, you first begin with building what I am calling a 'Geo Hierarchy' which includes at least Country, then Region, then City, then ZIP. It works best if you can supply Country and Region however it will 'guess' the best it can using reverse lookup JSON but I may pull this out as it's just insane, but for now it works:

I have built an example GeoHierarchy called 'Example':

And a quick glimpse of the Unsolved Locations:

So, we have a GeoHierachy and a poor man's Geocoding, what's next?
Map Layers

Whew. We can now draw a map and resolve lat/lng (mostly). Let's visualize some data already!!!!

Below I've added 2 Marker Layers to my Map, both of which use my 'Example' Geohierarchy to plot with. (Terrain Map in screenshot)

Per-layer, you see we can specify many other properties, including filtering! Example for 'AL Schools' layer:

This allows us to control properties such as Marker type (I used Marker in one layer and Circle in another, in the example above) - So plotting markers seems to work at a basic level.

There's still work to do here, as right now it just plots based on occurrence, so if you have multiple entries with the same location, it's just keeps dropping markers on top of the same spot (even if you cannot see it) so there's no 'aggregation' happening here, but it should be possible, given enough time.

However, we can at least gauge occurrence intensity/density using a Heat Layer, let's see:

As you can see, you can even control the Heat Layer's Blur, Radius, and color gradient and stops. I have also included color presets common in SAP tools and ColorBrewer colors:

And while incomplete, but will eventually get finished, a Cluster Layer:

What's Next/More Ideas

I need a break.
Many bug fixes
Polygon Layers (if feasible)
Chloropleth Layers (if feasible)
Bubble Overlays by occurrence/measure (These are ugly to me, but seem to be popular)
BIAL Methods
Did I mentioned I need a break?

Can I play with what you have today?

Sure! I've updated the Preview Build of SCN Design Studio SDK Development Community distribution. Give it a try!

Source Code:

sdkpackage/src/org.scn.community.geovis at master · org-scn-design-studio-community/sdkpackage · GitHub

Install Links:

Preview Release (Updating online within DS App): http://org-scn-design-studio-community.github.io/sdkinstall/releases/preview
.ZIP Version: https://github.com/org-scn-design-studio-community/sdkinstall/blob/master/releases/preview/org.scn.community.sdk.package…

Optional Zoom Level 7 Feature Installs (90MB each):

sdkgeovis/archives at master · org-scn-design-studio-community/sdkgeovis · GitHub

etc

Something isn't working.
Not surprising, a lot is buggy (hence preview release) - Feel free to leave a polite comment!
I have a crazy idea...
I'd love to hear it.
I think you are crazy for trying this.
Agreed.

Questions/Comments/Feedback welcomed.

Happy New Year!

It is about six weeks now that SAP released Design Studio 1.4 and herewith I would like to share my first experiences with the data source SDK. I was already in the process of thinking of workarounds to become independent of SAP backend systems for offline demo purposes. On that matter SAP made me huge gift for Christmas so to speak.

From the start of the maps extension development process, I wanted test and debug data that could easily be manipulated without switching to any Bex tools or SAP BW. The data source SDK is our chance to do that.

To get the relevant data from the backend system to initialize my first custom data source, I loaded a dashboard containing one of the ConVista maps extensions, the desired data source and finally used SAP scripting language to export the data into CSV (APPLICATION.export(ExportType.CSV)). Some minor cleaning later I had my first custom data source on display with a simple cross tab (find the simple cross tab in the SAP SDK examples).

Figure 1: simple cross tab with custom data source

To mimic the expected structure for the maps extensions some more research need to be done. Therefore I used the browser developer tools to learn the actual structure of the JSON which the Design Studio framework sends to the maps extensions during run time. In particular I focused on the JSON arrays:

dimensions (holds descriptive metadata about rows and columns),
data and
tuples.

Figure 2: OpenStreetMap using custom data source

The SAP example CSV data source serves as a basis for my own data source. I modified the defineDimensions function in the init block and loaded the tuples and the actual data array from an external JSON file. Unfortunately further metadata reduction was necessary because of a jetty form size restriction of 200,000. It is possible to change that parameter but keeping in mind that using the data source should be as easy as possible, this wasn’t the right way to go.

As a result you can now run the ConVista maps extensions in combination with my mapsexampledatasource out of the box without any SAP backend system attached. Find the data source in my GitHub repository:

https://github.com/MartinPankraz/DesignStudioSDK-Components

Me and ConVista love the easy integration and the possibility to get an even quicker hands-on.

References:

MartinPankraz/ConVista-DS-SDK-Visualizations · GitHub

Google Maps and OpenStreetMap component SDK development insights