From SAP TechEd Las Vegas, I wrote this: World Premiere Design Studio 1.6 #SAPtd SAP TechEd

The legal disclaimer applies that things in the future are subject to change.  This week SAP’s Matt Lloyd provided a webcast on this topic – I will not repeat the slides, but supplement what I learned and include a detailed question & answer below

Figure 1: Source: SAP

With Design Studio 1.4 and 1.5 had 3 deployment platforms; feedback is to go to one due to differences in each one

Most features were in BI platform

Looked at who was using which platform – most were using BI Platform

Future direction, new features will be on BI Platform

It doesn’t mean HANA or NetWeaver platform is going away; keep using

New functionality on roadmap will only be on BI Platform (e.g. broadcasting)

As you look at new projects, look to BI Platform

BI Platform allows access to most data sources.  BI platform has companion mobile application

Figure 2: Source: SAP

Figure 2 was a demo; a sales dashboard for the US

Top left – green if number is higher than previous years; define conditional formatting

Chart with a chart picker with new trellis charts

Geomap zoom in and zoom out; define up to 10 layers.  In 1.6 you can show pie charts in the geo maps

Figure 2a: Source: SAP

New in 1.6 is the custom icons for the markers on the maps; used to be a pin indicator and now you can define how it looks

Figure 3: Source: SAP

Figure 3 is the new scorecard control.  It is a formatted table, unlike the crosstab, you have more control

Figure 3 is a butterfly chart with the dimensions in the middle and key features on the outside

You have more control over how it is represented

Figure 3 shows mini charts with icons

You can page through this; it can be scrollable or page through

Figure 3a: Source: SAP

Figure 3a is the new spreadsheet control to be used for the planning scenario, with a context menu

Figure 4: Source: SAP

Figure 4 shows extra options added to the context menu – dynamic calculations – the settings will differ based on data source

SAP will provide a lookup table which feature is released

You can also drag directly into the crosstab now

Figure 5: Source: SAP

Figure 5 shows the new chart feeding panel

Figure 6: Source: SAP

Figure 6 shows 2 modes – SAPUI5 and SAPUI5 m  - m is a new responsive mode

Templates are in the SAPUI5 mode

Generic template is a “ready to run” template – you can deploy it to BI platform.  Once you have done that the user can see a list of systems. Planning template is using the new spreadsheet component

Ready to run means you don’t have to make any changes to it.

Standard applications use more customization

Figure 7: Source: SAP

Figure 7 is the roadmap

“Today” is 1.6 – more at the end of November / early December

Planned for next year – scheduling and broadcasting, annotations (coming in BI4.2), improve mobile experience using the SAPUI5 m mode, with responsive layouts

Composition reuse is planned – making a reusable control based on 1 or more Design Studio controls

Looking at importing Lumira Stories

Beyond, future direction, looking at variant support, local calculations (not just context menu) on top of the data source to allow you to do data manipulation

Question and Answer

As part of our post Design Studio 1.6 roadmap rollout, was something that many people have noticed; that future platform development will be concentrated on the BI Platform.

What this means

• New development is focused on the BI Platform.  This concentration of development resources means that the vast majority of our customers, who are on the BIP, will see accelerated functionality development.

• The other platforms are still maintained; they just don’t get new features.   There has been some confusion on this point, so let me be clear; If a customer is live with a NW scenario now, we’re not pulling the plug on them.  They’ll just have to use the BIP if they want to add a new scenario (e.g. Scheduling or Smart Object) in the future.

• Existing Netweaver and Hana XS server packages will continue to be maintained as per our standard maintenance policy.  E.g. Scheduling, which is currently planned as one of the major 2016 topics,, will also only ever come to the BIP.

Why we made this decision

It is no accident that we actively seek customer feedback on our roadmaps, so that we can prioritize the functionality most desired by our customers.  The choice of a server platform, or multiple server platforms is one of these cases.  Let’s step back in time a few years, to the early days of Design Studio.  One of Design Studio’s earliest roles was to be a “better BEx”.  If one were to survey our customer landscape then, they would see no clear consensus as to which platform was preferred.  A majority of our customers used the BIP then, but a plurality of customers were using pure Netweaver environments.

Now, three years later, we are looking at a changed customer landscape.  Most Design Studio customers who were running pure Netweaver landscapes now use the BIP for a variety of reasons. At least 90% of our customers worldwide use the BIP.  Having such a clear a platform consensus means that we can feel comfortable concentrating development on that one platform.  We have a responsibility to our customers, to build a better Design Studio for the largest possible number of customers and rather than slowly develop functionality on multiple platforms, we can maximize progress where the customers are.

Concentrating new functionality development on the BIP means that the 90% will see accelerated functionality development.  The rest can continue with their existing scenarios.  We’re confident that the improved functionality will also entice them to make the switch.

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

Before we actually start making use of the properties that we defined in the last session, we need to take a side trip into theory.  We'll do this in order to spare you hair pulling moments, later on, when you can't figure out why your properties are "working" sometimes, but not at other times.

Where the Properties Are

The fist thing to keep in mind is that component properties live in two or three places, depending on whether we are running in the designer, or whether the app is running and being accessed via a browser.  The three possible places are:

1. The Server: During design, this is the copy of the property that is shown in the properties sheet (if it is visible).  During runtime, this is the copy that the server maintains and the copy that scripts interact with.
2. Canvas/Client: This is the copy that lives in the client browser or design studio canvas and this is the copy that you'll be working with in your component.js file.
3. The Additional Properties Sheet: This is the copy that lives in the javascript file of the additional properties sheet.  The APS is only relevant during design time

When and how they are synchronized

There are two simple rules for how properties are synchronized:

1. If the change is happening on the server (in the properties sheet, or via BIAL script), then it is automatically propagated to all other copies.
2. If it happens elsewhere, there must be an explicit JavaScript function call to do this: firePropertiesChanged().Once this is called, the changed value is messaged to the server. (and propagated further, if relevant)

That's it!  Now let's take a look at what this means in practice.

Examples

As we're keeping two or three copies of all of our properties, we need a way to make sure that they are all synchronized.  How exactly this is done depends on where the value is changed.  In the following examples, let's presume that all copies  of some hypothetical property start with the value "A" and we'll change it to "B".

If the change happens on the properties sheet, during design time:

1. The designer changes the value to "B" in the properties sheet.
2. The changed value is messaged out to both the component in the canvas and the APS.  This happens automatically.

These property changes will be saved in the app.

If the change happens on the APS, during design time:

1. The designer changes the value to "B" in the APS.
2. The server update is not automatic and and firePropertiesChanged() must be called to copy it to the server.
3. The property update on the server cascades the change out to the canvas as well.

These property changes will be saved in the app.

If the change happens on the client, during run time:

1. The property value to is changed to "B" in the client.
2. When firePropertiesChanged() is called, the updated property value is copied to the server.

If the change happens on the server, during run time (it was set via BIAL script):

1. The property value to is changed to "A" on the server.
2. The changed property value is propagated to the client.

Mistakes and Pitfalls.  Things go bad when...

So far, we've covered the scenarios that are supposed to work.  There are also mistakes and pitfalls to watch out for.

If the change happens on the canvas, during design time:

1. The property value to is changed to "B" in the canvas.
2. Component.js also has a firePropertiesChanged() implementation, however, it only works at runtime.  Attempts to push a property update to the server copy will fail.

These property changes will not be saved in the app.

There is no "initial push" of property values from the server.  Only changed values are propagated.  This means that if I don't change a value from the default via the properties pane, no property value will be pushed to the client.  So if A is the default value in the properties pane and the designer never changes it, then it will be undefined in the client and APS.  The solution to this is to explicitly initialize every property in the APS and component.js.  Yes, it is tedious, but it will save you from wondering why the property is undefined in the client some times, but not others.

Forgetting to fire firePropertiesChanged() will also result in different property values being on the server and client.

Next time, we'll put this theory into practice and start using our properties to define our gauge.

As with SDK version 1.4 and 1.5 I  want to give you an overview over the new features of the Design Studio SDK in version 1.6.

This time I have more to share than I originally expected.

Using sap.m SAPUI5 Controls

You might know that Design Studio was one of the first SAP products that were based on the  SAPUI5 framework. What you might not know: There are two flavors of SAPUI5 available that are unfortunately incompatible. The team first started with a library of typical controls, e.g. buttons, input fields, containers, etc. in a package called "sap.ui.commons". This library was used in Design Studio from the beginning on. However, they were designed with the desktop browser in mind. Later the SAPUI5 team decided to create a second library especially for mobile devices called "sap.m". It was incompatible to sap.ui.commons, e.g. there was different handling of click and touch events. When SAP Fiori was started, the teams from application development decided to use "sap.m", for both, mobile and desktop. Therefore the meaning of "sap.m" changed from "mobile" to "main".

I know that many of the fellow SDK developers tried to use sap.m controls as SDK components in Design Studio, mainly as there are so many nice controls available in the sap.m library. Unfortunately this doesn't work well, e.g. events are lost and controls don't visually fit to the rest.

Therefore we decided to have a new mode in Design Studio where all components are implemented with sap.m controls.

For the Design Studio user there is not much change in this mode, except the different look and feel and some missing components in the "sap.m" mode.

For SDK components the change could be significant: As we don't know if your component will work correctly in "m-mode", by default, existing SDK components won't show up if an app is in m-mode.

If your SDK component uses handler_type="div", it is likely that it will work. Test your component and mark it in your contribution.xml as "sap.m" compliant:

<?xml version="1.0" encoding="UTF-8"?><sdkExtension  xmlns="http://www.sap.com/bi/zen/sdk"  id="com.sap.sample.coloredbox"  title="Design Studio SDK Extension Sample Colored Box"  version="16.0"  vendor="SAP">  <component  id="ColoredBox"  title="Colored Box"  icon="res/icon.png"  handlerType="div"  modes="commons m"  propertySheetPath="res/additional_properties_sheet/additional_properties_sheet.html">
...

For SDK components with handler_type="sapui5" it depends on the controls you use: If you use only "sap.ui.commons" controls, leave the "modes" attributes out or set modes="common". For components that use only "sap.m" controls, set modes="m". Never mix "sap.ui.commons" and "sap.m" controls in the same component. You can however create a dynamic component that uses different implementations depending on the mode: You could have one require.js module for "m" and one for "commons".

Full Require.js Support

In version 1.4 I announced limited support to load JavaScript files with require.js . This was sufficient for some use cases, but often our old loading mechanism had disadvantages. E.g. some some browsers (e.g. Firefox) have problems loading JavaScript files synchronously.

Now we completely switched to require.js to load our own JS files - and SDK components can also do so.

The old loader is still in place to stay compatible. However, I strongly recommend to use the require.js feature also in your SDK components, as you will gain several benefits.

As example we look at the contribution.xml of ColoredBox as it was in 1.5:

<?xml version="1.0" encoding="UTF-8"?><sdkExtension xmlns="http://www.sap.com/bi/zen/sdk"  title="Design Studio SDK Extension Sample Colored Box"  version="15.0"  vendor="SAP"  id="com.sap.sample.coloredbox">  <component id="ColoredBox"  title="Colored Box"  icon="res/icon.png"  handlerType="div"  propertySheetPath="res/additional_properties_sheet/additional_properties_sheet.html">  <jsInclude>res/js/component.js</jsInclude>  <cssInclude>res/css/component.css</cssInclude>
...  </component></sdkExtension>

And component.js looked like:

sap.designstudio.sdk.Component.subclass("com.sap.sample.coloredbox.ColoredBox", function() {
// Content here
});

To load you extension with require.js, use the new <requireJs> tag:

<?xml version="1.0" encoding="UTF-8"?><sdkExtension  xmlns="http://www.sap.com/bi/zen/sdk"  id="com.sap.sample.coloredbox"  title="Design Studio SDK Extension Sample Colored Box"  version="16.0"  vendor="SAP">  <component  id="ColoredBox"  title="Colored Box"  icon="res/icon.png"  handlerType="div"    modes="commons m"  propertySheetPath="res/additional_properties_sheet/additional_properties_sheet.html">  <requireJs modes="commons m">res/js/component</requireJs>
...  </component></sdkExtension>

The tag name <jsInclude> is replaced by <requireJs> and the extension ".js" is omitted - simple. You also need to specify for which modes (sap.ui.commons, sap.m, or both) the module is loaded. Using this feature you can have different modules for different modes.

The <cssInclude> and potential <stdInclude> tags can be removed. Why?

Let's look at the changed component.js:

define(["sap/designstudio/sdk/component", "css!../css/component.css"], function(Component, css) {  Component.subclass("com.sap.sample.coloredbox.ColoredBox", function() {
 // Content here  });
});

Using "define" we make our handler a require.js module. The fist parameter is an array of other require.js modules or CSS files that your module needs. As an SDK module it requires the base "class" for all SDK handlers. Before this, the base class was requested using the global variable "sap.designstudio.sdk.Component". Now the same is "injected" as  a local variable "Component" in response to the required module "sap/designstudio/sdk/component". The second required module is a CSS file - or to be more precise: "css!" marks a requirs.js plugin for loading CSS files which is always available. The path "../css/component.css" is the relative path to the CSS file. The result of the css file is injected into local variable "css" - which is not really needed for a CSS file and is here only to show the symmetry between the required modules array and the callback function's parameters.

The require.js support also makes the <stdInclude> feature obsolete. The following snippet from Sparkline's handler JavaScript file:

define(["d3", "sap/designstudio/sdk/component"], function(d3, Component) {  Component.subclass("com.sap.sample.sparkline.Sparkline", function() {  var that = this;  var sparkline_data = undefined;  var cssstyle = undefined;  var path = undefined;  this.init = function() {  var container = this.$()[0];  var graph = d3.select(container).append("svg:svg").attr("width", "100%").attr("height", "100%").attr("viewBox", "0 0 1000 1000").attr("preserveAspectRatio", "none");  //appending an svg:path element  path = graph.append("svg:path");  };
...

The D3 library is required as "built-in" library and injected into local variable "d3".

Currently we support the following built-in libraries:

Note: Don't use the backward compatible global in required modules, this could give strange results!

Instead requiring a built-in module, you can also require your own modules or third-party libraries that come with your extension. You could even use your own copy of d3 - if you are sure that it comes as AMD-enabled module that doesn't create global variables:

define(["./tp/myd3", "sap/designstudio/sdk/component"], function(d3, Component) {  Component.subclass("com.sap.sample.sparkline.Sparkline", function() {
// ...

Commercial SDK components still must not bring their own copy of built-in libraries, as this will bloat the loaded JavaScript files, but at least it works now.

Technical Components

Since a few releases Design Studio supports so-called technical components that have no visual representation and accordingly don't appear in the Components palette. Now such component can be implemented with the SDK. A good example is the "Timer" sample component that triggers an event after a configurable time. The sample has been productized as official component in Design Studio 1.6, but it still ships as a sample.

The most important change is setting group="TECHNICAL_COMPONENTS" in contribution.xml. This will remove the component from palette and let it appear in the "Technical Components" context menu. The second change is in in the JavaScript handler

this.init = function() {  this.$().css("display", "none");
};

You see that a technical component is still a normal SDK component with handler_type="div", but the root DIV is not rendered.

Complex Properties and Arrays

So far the type system for properties of SDK components was quite limited: Besides the data-bound properties there were only primitive types available. But most components need some structured or array-like properties.

SDK components often simply used a String-typed property and encoded some data via JSON.stringify. But this approach has several disadvantages:

• In biapp-files and bookmarks, such properties appear as an unstructured blob, while regular structured properties have an XML format that is better for diagnostics.
• Users can't directly enter such JSONs, thus the component need an additional properties sheet to enter data in such a property.
• Working with ZTL script functions on such a property is quite cumbersome, e.g. you have to JSON.parse it, modify, serialize it back etc.

Now he added native support for structures properties and arrays. Here is the concept:

If a property has the new type "Object", it must contain nested properties. This will form a structure.

      <property        id="item"        type="Object"        title="Item">        <property          id="text"          type="Text"          title="Text"/>        <property          id="key"          type="String"          title="Key">         </property>          </property>

You can nest all property types into an Object property, except data-bound properties and ScriptTexts. But you can could nest properties of type Object into others, producing a deep structure.

The standard property view has built-in editing support for nested properties.

The other new property type is "Array". It must contain exactly one property specifying the type of the array. The following example creates a so-called simple array for integers:

<property      id="intArray"      type="Array"      title="Int Array">      <property        id="item"        type="int"        title="Item">        </property>    </property>

You can also use a property of type "Object" as array type - forming a table-like property.

<property      id="items"      type="Array"      title="Items">      <property        id="item"        type="Object"        title="Item">        <property          id="text"          type="Text"          title="Text"/>        <property          id="key"          type="String"          title="Key">          <option name="keyfield" value="true"/>         </property>        <property          id="image"          type="Url"          title="Image">  <option name="kind" value="Image" />        </property>      </property>    </property>

The standard property view has built-in support for simple and table-like arrays. Deep nesting however is not supported in arrays.

The example screenshot and XML snippet above are taken from the new UI5List sample component. They also demonstrate the new <option> features"keyfield" and "kind" that can be applied to properties. Option "keyfield" tells the editor that the property value in this columns should be unique. The option "kind" for properties of type "Url" gives the editor a hint to provide automatic browse and upload feature for pictures and some other file types.

Both, structured properties and arrays are passed to the JavaScript handler as a JSON or JSON array. Thus your setter will receive a valid JavaScript object - and the setter must return a JavaScript object that can be serialized with JSON.parse.

The same is also the case for accessing the property in ZTL functions. You can access the property via this.<propertyName>. Because of some internal logic you must however re-assign it back in case your changed it. Here  a snipped from UI5List's contribution.ztl:

void addItem(String key, String text) {*    var current = this.items || [];    current.push({      key: key,      text: text,      image: ""    });    this.items = current; // Write back changed object  *}

You can access and modify structured properties and arrays also via your Additional Properties Sheet (APS). Again you access them via JSON:

this.items = function(value) {  if (value === undefined) {  return this._items;  } else {  this._items = value;  return this;  }  };
// ...
$("#form").submit(function() {  var array = that.items() || [];  array.push({  key: $("#key").val(),  text: $("#text").val()  });  that.items(array).firePropertiesChanged(["items"]);  return false;  });

Call ZTL Functions from Component and APS

One powerful feature that came into the SDK in 1.4 is the possibility to enrich the SDK component's possibilities calling BIAL functions whenever needed: The JavaScript handler running in the browser could call a function written in server-side JavaScript defined in contribution.ztl. However, this was more a concept than a feature and hard to use. E.g. you had to define private properties and events to transport data from browser to sever and vice versa.

Now the SDK provides a handy function that does all this under the hood.

E.g. assume your SDK component at some point of time needs a list of dimensions. Then define a private function in your contribution.ztl:

@Visibility(private)  // The method is called by the callZTLFunction feature. The return type is not correct,  // but as it can't be used in scripts, this doesn't care.  String getDimensions(String axis) {*     if (!this.getDataSource())        return null;     if (axis) {        return this.getDataSource().getDimensions(axis);     }     return this.getDataSource().getDimensions();  *}

The call "this.getDataSource().getDimensions()" consists of a navigation to the data source of your component (this.getDataSource()) and the BIAL script function "getDimensions()" returning a list of dimensions.

Now you can easily call this private function from your component.js code:

that.callZTLFunction("getDimensions", function(result) {  // do something with the dimension array
}, "ROWS");

The function callZTLFunction(sFunction, fResultCallback, parameters...) expects the name of the function to call (parameter sFunction), a callback function that receives the result (parameter fResultCallback) and an arbitrary number of parameter to pass in to your ZTL function.

Internally this feature uses the same principles that came with 1.4 - but under the hood uses some built-in properties and events. Therefore all parameters and results must be JSON-serializeable and the execution is asynchronous.

There was the wish from some famous Design Studio SDK coder to be able to use the same trick also from a

Additional Properties Sheet - and voilá, here you are: You can use the exact same API from an APS JavaScript. Internally is works differently, but the ZTL script is executed in the normal runtime - also in Design Mode. You can however only read data with such a script. Modifying operations, e.g. setFilter are not allowed to be called from the APS and will bring up an error message in the Designer's error log.

Examples for using callZTLFunction, both from component and APS are contained in the new UI5List sample.

APS Improvements

By the way, there are a few little improvements in APS API:

1. Now there are also beforeUpdate and afterUpdate callbacks available that have the same behavior as the corresponding functions in component JS.
2. The order for finding changed properties has changed a bit. This makes transactional behavior easier to achieve. The order is now:
   1. init or componentSelected
   2. beforeUpdate
   3. getter for property 1.
   4. getter for property 2.
   5. ...
   6. setter for propertyv 1 - in the case that new value and value returned from getter are different
   7. setter for property 2 - in the case that new value and value returned from getter are different
   8. ...
   9. afterUpdate
   10. ...
3. There is a new function "log(severity, message)" available, where "severity" is "info", "warn" or "error" and "message" is your text. Depending on the given severity and the configured log level, the message will appear in Design Studio's Error log view and in Debug mode also in the JavaScript console.

Update SDK Components without Restart

The logging feature is one of the features to make SDK component development easier. Another is a feature that virtually removes the need to restart your target Design Studio while developing your component.

You might know that you can easily debug and change your JavaScript code without restarting Design Studio: Regardless if there are problems in Design Mode, simply launch a test app with your component in your favorite external browser. In the debug tools of the browser disable the browser cache and debug. Whenever you need to change something, change your JavaScript file and hit F5 on your browser.

If the change was however in the contribution.xml or contribution.ztl file - e.g. because you added a property - you had to restart Design Studio. Now you simply switch to Debug mode by pressing Ctrl+Alt+Shift+D. Now you will see the new menu entry Tools->Refresh SDK Extensions. This function will clear several caches and make almost all changes immediately active. For some changes it might be necessary to close and reopen the current editor or the additional properties view.

The Debug mode also makes development of Design Mode behavior easier. The JavaScript console shows detailed information about what's happening in the main browser, and the scripting tab allows to evaluate JavaScript there. For APS debugging it also greatly helps to  increase the log level in Tools->Preferences->Application Design->Support Settings and to configure the Error Log viewer to have a very high limit of logging events.

For in-depth debugging of APS logic however is still best to attach a Microsoft Studio Web debugger to your target Design Studio's Internet Explorer instances. In most cases the free Express edition should be sufficient.

The SDK component update without restart is also available on the BI Platform. The runtime will detect changes in deployed SDK extensions and make the changes available without BIP restart. As within the Designer this is the case for most changes, but not for completely new SDK components - which still require a restart.

One More Thing

Besides the stuff mentioned so far I have worked on a new feature that makes it easy to bind Design Studio data to SAPUI5 controls. It might later become a part of the Design Studio SDK but was not fully finished for 1.6. I only mention here that something will be coming to save you from investing a lot of time and energy in other solutions to map SDK Result Set JSONs to SAPUI5 tables etc.

You see that you still have an interesting job creating Design Studio extensions and I'm looking forward to seeing more interesting ones from you - the Design Studio SDK community.

Currently, Design Studio does not support color palette for chart component. To use different colors in chart, designer has to specify color code one series by one series in the Additional Property.

It can be time consuming. Besides, we can only specify existing series in Additional Property. In other words, if there is more series in the future, those series will have default colors.

One workaround is to modify .biapp file in the notepad directly.

Step1: put a chart in canvas

Step2: close the application, go to repository and open .biapp

Step 3: locate the Chart component

Step 4: Paste color palette code under the chart component

<bi:property name="ADDITIONAL_PROPERTIES">                                      

     <bi:value><![CDATA[{"dataSeriesFormat":{"data":["color1","color2"],"changedData":{"0":" color1","1":" color2"}}}]]></bi:value>

</bi:property>

For example,

<bi:value><![CDATA[{"dataSeriesFormat":{"data":["#000000","#272727","#3C3C3C","#4F4F4F","#5B5B5B","#6C6C6C","#7B7B7B","#8E8E8E","#9D9D9D","#ADADAD"],"changedData":{"0":"#000000","1":"#272727","2":"#3C3C3C","3":"#4F4F4F","4":"#5B5B5B","5":"#6C6C6C","6":"#7B7B7B","7":"#8E8E8E","8":"#9D9D9D","9":"#ADADAD"}}}]]></bi:value>

Step 5: Save the .biapp, open application, and bind the data source

Note that we have to paste for all the charts one by one. But I believe this is much faster than to modify in Additional Property.

Enjoy!

Design Studio does not support cascading filter usage with unx data sources if you want to follow classical way as you could find at official tutorial :

Simply filter a datasource based on a selection from a dropdown box , and use getmemberList method on that data source to fill another dropdown box.

If you use this method with unx data sources, you would realize that all members are added to the second dropdown_box, that means this method doesn't work, obviously.

You can use cascading filters with the method i mentioned below. But i must warn you that as much as members you have to be cascading filtered (for instance, if you have thousands of material ids), you will have worse performance. Because this method takes dimensions member by member, and use them all to check if they needed to be added to the second dropdown box (or listbox )

We will select country from dropdown box 1 (DD_BOX_1) and fill DD_BOX_2 with cities belongs to this country

1- create an array with members of a dimension which you want to use in your dd box( to be cascading filtered)

2- do a for loop through this array, and add items if the result set is not empty.

Basically let's say you filled first DD box with DS_1 dimension members like (Country) and selected a country and with that selection you will filter DS_2.

After that; you will filter DS_2 with each City member. if result set is not empty, which means that city belongs that country, you add this city to your DD_Box_2, else simply ignore this city.

sample:

//on startup

DD_BOX_1.setitems(DS_1.getmemberlist(Country),..,...,...);

// on dd_box_1 on select event

var array = DS_2.getmembers(City;999 (tool suggests not to enter a value above 100 btw but if you need more members you can write 999 for ex.));

DS_2.setfilter(Country;DD_BOX_1.getselectedmember());

array.foreach(function(element,index)

{DS_2.setfilter(City, element.internalKey (or text doesnt matter at unx);

if(DS_2.isResultSetEmpty())

{

//do nothing

}

else { DD_BOX_2.addItem(element.text , element.text)  ;}

});

Regards,

Onur

This post is about styling and define the check box as apple style swiping as we use regularly in iPhone /iPad

To Achieve this we have to use check box and below CSS styles

After creating project

Step 1:

drag check box in container and create style sheet

Step 2 :

Add the following code in css file

/* added for swipe functionality - Start */

.sapUiCb > label {

            color: #ffffff;

            display: block;

            height: 18px;

            line-height: 15px;

            vertical-align: middle;

            position: relative;

            width: 66px;

            /*border-radius*/

            -webkit-border-radius: 18px;

            -moz-border-radius: 18px;

            border-radius: 18px;

            background: #00b0f0;

            cursor: pointer;

            padding-left:0px;

            padding-right:0px;

}

.sapUiCb > label:before {

            content: '';

            display: block;

            position: absolute;

            z-index: 1;

            line-height: 34px;

            text-indent: 40px;

            height: 12px;

            width: 12px;

            /*border-radius*/

            -webkit-border-radius: 100%;

            -moz-border-radius: 100%;

            border-radius: 100%;

            top: 2px;

            left: 1px;

            right: auto;

            background: white;

            /*box-shadow*/

            -webkit-box-shadow: 0 0 0 2px transparent, 0 2px 2px rgba(0,0,0,.3);

            -moz-box-shadow: 0 0 0 2px transparent, 0 2px 2px rgba(0,0,0,.3);

            box-shadow: 0 0 0 2px transparent, 0 2px 2px rgba(0,0,0,.3);

            /*transition*/

            -webkit-transition:5000ms ease-in-out 2s;

            -moz-transition:5000ms ease-in-out 2s;

             -o-transition:5000ms ease-in-out 2s;

                transition:5000ms ease-in-out 2s;

}

.sapUiCb > label:after {

            content: attr(data-off);

            display: block;

            position: absolute;

            z-index: 0;

            top: 0;

            left: -300px;

            padding: 10px;

            height: 100%;

            width: 300px;

            color: #bfbfbf;

            white-space: nowrap;

            /*transition*/

            -webkit-transition:5000ms ease-in-out 2s;

            -moz-transition:5000ms ease-in-out 2s;

             -o-transition:5000ms ease-in-out 2s;

                transition:5000ms ease-in-out 2s;

}

.sapUiCb input[type=checkbox]:checked + label {

            /*box-shadow*/

            box-shadow: inset 0 0 0 20px rgba(146,208,80,1), 0 0 0 0px rgba(146,208,80,1);

                -webkit-box-shadow: inset 0 0 0 20px rgba(146,208,80,1), 0 0 0 0px rgba(146,208,80,1);

                -moz-box-shadow: inset 0 0 0 20px rgba(146,208,80,1), 0 0 0 0px rgba(146,208,80,1);

            height: 18px;

            color: #000000;

            display: block;

            vertical-align: middle;

            position: relative;

            width: 66px;

            /*border-radius*/

            -webkit-border-radius: 18px;

            -moz-border-radius: 18px;

            border-radius: 18px;

            background: #f8f8f8;

            cursor: pointer;

            /*transition*/

            -webkit-transition:5000ms ease-in-out 2s;

            -moz-transition:5000ms ease-in-out 2s;

             -o-transition:5000ms ease-in-out 2s;

                transition:5000ms ease-in-out 2s;

}

.sapUiCb input[type=checkbox]:checked + label:before {

            left: calc(100% - 14px);

            /*box-shadow*/

                -webkit-box-shadow: 0 0 0 2px transparent, 0 2px 2px rgba(0,0,0,.3);

                -moz-box-shadow: 0 0 0 2px transparent, 0 2px 2px rgba(0,0,0,.3);

            box-shadow: 0 0 0 2px transparent, 0 2px 2px rgba(0,0,0,.3);

            /*transition*/

            -webkit-transition:5000ms ease-in-out 2s;

            -moz-transition:5000ms ease-in-out 2s;

             -o-transition:5000ms ease-in-out 2s;

                transition:5000ms ease-in-out 2s;

}

.sapUiCb input[type=checkbox]:checked + label:after {

            content: attr(data-on);

            left: 60px;

            width: 36px;

}

.sapUiCb {

            line-height: 14px;

            font-size: 16px !important;

            width:20px;

            overflow:visible !important;

            /*Custom Style on 28-june-15*/

            text-align:center;

            font-weight:bold;

            /*transition*/

            -webkit-transition:5000ms ease-in-out 2s;

            -moz-transition:5000ms ease-in-out 2s;

             -o-transition:5000ms ease-in-out 2s;

                transition:5000ms ease-in-out 2s;

}

.sapUiCb:focus {

            outline: 0 !important;

}

.sapUiCb input[type=checkbox] {

            display: none;

}

/* added for swipe functionality - End */

Step 3:

After saving, select check box and  in  the left side panel  choose on Click option enter  following code as shown in the below images

That is All You can get following way of design

Thank you if any quires revert me

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

Now that we have a handle on how properties are kept synchronized between the client and server, we can go about making it happen.  We're not yet making use of the the additional properties sheet (APS), we don't have any machinisms yet for altering the properties at runtime and changes made in the canvas can't be posted back to the sever copy, property synchronization only goes in one direction; from server copy to canvas.  Therefore, all of our changes will be happening in the component.js file of our gauge component.

We're going to do four things:

• We need to initialize all properties on the client side.  Recall that only changes from the default state are sent from the server to the client, so we'll need to perform a separate initialization on the client side.

• We'll adapt the configurable javascript code that we created in Part 3a to use our properties.

• Whenever the server sends an updated property value, we'll need to update the property on the client side.

• Whenever a property changes on the client side, we're going to need to redraw the gauge to reflect the property updates.   The best way to do this is to encapsulate the redrawing of the gauge, so that it can be done in initialization, or whenever a property value changes.

Property Initialization

This is the easy part.  For every property, we're going to need a counterpart in the component subclass, within the component.js file.  We're going to use the naming convention _<propertyName> for these properties, so that if we have a property, called foo, we'd have a variable in the component subclass, called _foo.

In the following code, we do two things.  We declare a variable, called me, which is a pointer to this.  This is an alternative to the variable named that, which we've been using up to now.  We're also going to declare all property variables.

var me = this;

 

//Properties

me._colorCode = 'blue';

me._innerRad = 0.0;

me._outerRad = 0.0;

me._endAngleDeg = 90.0;

me._startAngleDeg = -90.0;

me._paddingTop = 0.0;

me._paddingBottom = 0.0;

me._paddingLeft = 0.0;

me._paddingRight = 0.0;

me._offsetLeft = 0.0;

me._offsetDown = 0.0;

Important!  Make sure that you initialize them to the same values as are in the properties sheet!  Otherwise, you'll have discordant property values on the client and server.  Properties with no defaultValue defined in component.xml default to 0.

Repackaged Redraws

This is rather simple.  Let's start with the last time we worked on the component.js, in the component.  First, we're going to create a new function, called redraw().  We can cut and paste everything from init().  Then we can simply tell init() to call redraw().

me.redraw = function() {

    //Draw the gauge

};

me.init = function() {

    me.redraw();

};

The new redraw() function

Now let's update redraw to incorporate the configurable gauge code from Part 3a.  We're going to do a couple of refactors on that code, while doing this.

• All of the properties that are actually called me._<propertyName> need to be renamed.

• Remove the check on inner radius size.  We'll move that check to the setter function.

• Redraw means that we remove any existing copies of the gauge and draw a new copy.  We'll use D3's remove() method to do this.  So the following will remove any existing svg objects from the component and add a new one for the redrawn gauge.

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

 

// Clear any existing gauges.  We'll redraw from scratch

d3.select(myDiv).selectAll("*").remove();

 

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

Our redraw() function now looks like this:

me.redraw = function() {

 

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

 

  // Clear any existing gauges.  We'll redraw from scratch

  d3.select(myDiv).selectAll("*").remove();

 

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

  var pi = Math.PI;

 

  // Find the larger left/right padding

  var lrPadding = me._paddingLeft + me._paddingRight;

  var tbPadding = me._paddingTop + me._paddingBottom;

  var maxPadding = lrPadding;

  if (maxPadding < tbPadding){

  maxPadding = tbPadding

  }

 

  me._outerRad = (me.$().width() - 2*(maxPadding))/2;

 

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

  me._offsetLeft = me._outerRad + me._paddingLeft;

  me._offsetDown = me._outerRad + me._paddingTop;

 

  var arcDef = d3.svg.arc()

  .innerRadius(me._innerRad)

  .outerRadius(me._outerRad)

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

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

 

 

  var guageArc = vis.append("path")

     .style("fill", me._colorCode)

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

     .attr("transform", "translate(" + me._offsetLeft + "," + me._offsetDown + ")")

     .attr("d", arcDef);

};

Being Defensive

When setting the inner radius, we're going to want to sanity check the value and warn the designer if it is nonsensical.  So we'll add function for checking this; which we can call from the setters that need it.  If the new value of inner radius is greater than the calculated outer radius, then post an alert.  We won't be able to modify the property sheet value from component.js, so instruct the designer to change the last value with another alert.

//Validate the Inner and Outer Radii

me.validateRadii = function(inner, outer) {

     if (inner <= outer) {

          return true;

     } else {

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

          return false;

     }

};

Whenever the designer attempts to change one of the bounding box properties (height, width, padding), we also need to recalculate the new outer radius and perform a sanity check.  If the newly calculated radius is valid, then we can apply it.  If not, then we'll have to reject the change.

//Recalculate Outer Radius.  Also, double check that the new value fits with me._innerRad

me.recalculateOuterRadius = function(paddingLeft, paddingRight, paddingTop, paddingBottom){

  // Find the larger left/right padding

  var lrPadding = paddingLeft + paddingRight;

  var tbPadding = paddingTop + paddingBottom;

  var maxPadding = lrPadding;

  if (maxPadding < tbPadding){

  maxPadding = tbPadding

  }

  var newOuterRad = (me.$().width() - 2*(maxPadding))/2;

  var isValid = me.validateRadii(me._innerRad, newOuterRad);

  if (isValid === true){

  me._outerRad = newOuterRad;

  return true;

  }

  else {

  return false;

  }

}

Property Updates

Whenever a property change is initiated on the server side, the corresponding setter is fired on the client side.  The Design Studio SDK framework uses a standard pattern for property getters and setters.  There should be a single function called <property>(), with a single parameter, value.  It returns either the value of the property, or the parent object (this).

• If the getter/setter is called without a value, it is being used as a getter and should return the value of the property.  E.g. this returns the value of foo.

var propertyValue = this.foo();

• If the getter/setter is called with a value, it is being used as a setter.  It should update the property value and return the parent object.  E.g. this changes the value of foo.

this.foo(updatedValue);

If the property is relevant to the inner or outer radius of the gauge, we need to validate the change before actually setting it.  For these five properties, innerRadius, paddingLeft, paddingRight, paddingTop and paddingBottom (hieght and width are also relvant, but are standard properties and we can't control them), we need to perform a sanity check before actually setting the value.  If it is valid, we set the value, as on the other setters.  If it is invalid, we won't change the value and we'll need to alert the designer to this fact, so that they can modify the value.

If the setter is being called (and sanity checks are valid), be sure to call me.redraw(), before returning the object!

//Getters and Setters

me.colorCode = function(value) {

  if (value === undefined) {

  return me._colorCode;

  } else {

  me._colorCode = value;

  me.redraw();

  return me;

  }

};

 

 

me.innerRad = function(value) {

  if (value === undefined) {

  return me._innerRad;

  } else {

 

  var isValid = me.validateRadii(value, me._outerRad);

  if (isValid === false){

  alert("Warning!  The gauge arc can't have a small inner radius than outer!  Inner Radius must be equal to or less than " + me._outerRad);

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

  } else {

  me._innerRad = value;

  me.redraw();

  }

  return this;

  }

};

 

 

me.endAngleDeg = function(value) {

  if (value === undefined) {

  return me._endAngleDeg;

  } else {

  me._endAngleDeg = value;

  me.redraw();

  return this;

  }

};

 

 

me.startAngleDeg = function(value) {

  if (value === undefined) {

  return me._startAngleDeg;

  } else {

  me._startAngleDeg = value;

  me.redraw();

  return this;

  }

};

 

 

me.paddingTop = function(value) {

  if (value === undefined) {

  return me._paddingTop;

  } else {

  var isValid =me.recalculateOuterRadius(me._paddingLeft, me._paddingRight, value, me._paddingBottom);

  if (isValid === false){

  alert("Warning!  The gauge arc can't have a small inner radius than outer!  Outer Radius must be equal to or greater than " + me._innerRad);

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

  } else {

  me._paddingTop = value;

  me.redraw();

  }

  return this;

  }

};

 

 

me.paddingBottom = function(value) {

  if (value === undefined) {

  return me._paddingBottom;

  } else {

  var isValid = me.recalculateOuterRadius(me._paddingLeft, me._paddingRight, me._paddingTop, value);

  if (isValid === false){

  alert("Warning!  The gauge arc can't have a small inner radius than outer!  Outer Radius must be equal to or greater than " + me._innerRad);

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

  } else {

  me.me._paddingBottom = value;

  me.redraw();

  }

  return this;

  }

};

 

 

me.paddingLeft = function(value) {

  if (value === undefined) {

  paddingLeft = me._paddingLeft;

  return paddingLeft;

  } else {

  var isValid = me.recalculateOuterRadius(value, me._paddingRight, me._paddingTop, me._paddingBottom);

  if (isValid === false){

  alert("Warning!  The gauge arc can't have a small inner radius than outer!  Outer Radius must be equal to or greater than " + me._innerRad);

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

  } else {

  me._paddingLeft = value;

  me.redraw();

  }

  return this;

 

 

  }

};

 

 

me.paddingRight = function(value) {

  if (value === undefined) {

  paddingRight = me._paddingRight;

  } else {

  var isValid = me.recalculateOuterRadius(me._paddingLeft, value, me._paddingTop, me._paddingBottom);

  if (isValid === false){

  alert("Warning!  The gauge arc can't have a small inner radius than outer!  Outer Radius must be equal to or greater than " + me._innerRad);

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

  } else {

  me._paddingRight = value;

  me.redraw();

  }

  return this;

  }

};

The new component.js

The new component.js, in its entirety:

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

 

  var me = this;

 

//Properties

  me._colorCode = 'blue';

  me._innerRad = 0.0;

  me._outerRad = 0.0;

  me._endAngleDeg = 90.0;

  me._startAngleDeg = -90.0;

  me._paddingTop = 0;

  me._paddingBottom = 0;

  me._paddingLeft = 0;

  me._paddingRight = 0;

  me._offsetLeft = 0;

  me._offsetDown = 0;

 

 

//Validate the Inner and Outer Radii

  me.validateRadii = function(inner, outer) {

  if (inner <= outer) {

  returntrue;

  } else {

  returnfalse;

  }

  };

 

 

//Recalculate Outer Radius.  Also, double check that the new value fits with me._innerRad

  me.recalculateOuterRadius = function(paddingLeft, paddingRight, paddingTop, paddingBottom){

  // Find the larger left/right padding

  var lrPadding = paddingLeft + paddingRight;

  var tbPadding = paddingTop + paddingBottom;

  var maxPadding = lrPadding;

  if (maxPadding < tbPadding){

  maxPadding = tbPadding

  }

  var newOuterRad = (me.$().width() - 2*(maxPadding))/2;

  var isValid = me.validateRadii(me._innerRad, newOuterRad);

  if (isValid === true){

  me._outerRad = newOuterRad;

  returntrue;

  }

  else {

  returnfalse;

  }

  }

 

//Getters and Setters

  me.colorCode = function(value) {

  if (value === undefined) {

  return me._colorCode;

  } else {

  me._colorCode = value;

  me.redraw();

  return me;

  }

  };

 

  me.innerRad = function(value) {

  if (value === undefined) {

  return me._innerRad;

  } else {

 

  var isValid = me.validateRadii(value, me._outerRad);

  if (isValid === false){

  alert("Warning!  The gauge arc can't have a small inner radius than outer!  Inner Radius must be equal to or less than " + me._outerRad);

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

  } else {

  me._innerRad = value;

  me.redraw();

  }

  returnthis;

  }

  };

 

  me.endAngleDeg = function(value) {

  if (value === undefined) {

  return me._endAngleDeg;

  } else {

  me._endAngleDeg = value;

  me.redraw();

  returnthis;

  }

  };

 

  me.startAngleDeg = function(value) {

  if (value === undefined) {

  return me._startAngleDeg;

  } else {

  me._startAngleDeg = value;

  me.redraw();

  returnthis;

  }

  };

 

  me.paddingTop = function(value) {

  if (value === undefined) {

  return me._paddingTop;

  } else {

  var isValid =me.recalculateOuterRadius(me._paddingLeft, me._paddingRight, value, me._paddingBottom);

  if (isValid === false){

  alert("Warning!  The gauge arc can't have a small inner radius than outer!  Outer Radius must be equal to or greater than " + me._innerRad);

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

  } else {

  me._paddingTop = value;

  me.redraw();

  }

  returnthis;

  }

  };

 

  me.paddingBottom = function(value) {

  if (value === undefined) {

  return me._paddingBottom;

  } else {

  var isValid = me.recalculateOuterRadius(me._paddingLeft, me._paddingRight, me._paddingTop, value);

  if (isValid === false){

  alert("Warning!  The gauge arc can't have a small inner radius than outer!  Outer Radius must be equal to or greater than " + me._innerRad);

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

  } else {

  me.me._paddingBottom = value;

  me.redraw();

  }

  returnthis;

  }

  };

 

  me.paddingLeft = function(value) {

  if (value === undefined) {

  paddingLeft = me._paddingLeft;

  return paddingLeft;

  } else {

  var isValid = me.recalculateOuterRadius(value, me._paddingRight, me._paddingTop, me._paddingBottom);

  if (isValid === false){

  alert("Warning!  The gauge arc can't have a small inner radius than outer!  Outer Radius must be equal to or greater than " + me._innerRad);

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

  } else {

  me._paddingLeft = value;

  me.redraw();

  }

  returnthis;

 

  }

  };

 

  me.paddingRight = function(value) {

  if (value === undefined) {

  paddingRight = me._paddingRight;

  } else {

  var isValid = me.recalculateOuterRadius(me._paddingLeft, value, me._paddingTop, me._paddingBottom);

  if (isValid === false){

  alert("Warning!  The gauge arc can't have a small inner radius than outer!  Outer Radius must be equal to or greater than " + me._innerRad);

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

  } else {

  me._paddingRight = value;

  me.redraw();

  }

  returnthis;

  }

  };

 

 

 

  me.redraw = function() {

 

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

 

  // Clear any existing gauges.  We'll redraw from scratch

  d3.select(myDiv).selectAll("*").remove();

 

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

  var pi = Math.PI;

 

  // Find the larger left/right padding

  var lrPadding = me._paddingLeft + me._paddingRight;

  var tbPadding = me._paddingTop + me._paddingBottom;

  var maxPadding = lrPadding;

  if (maxPadding < tbPadding){

  maxPadding = tbPadding

  }

 

  me._outerRad = (me.$().width() - 2*(maxPadding))/2;

 

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

  if (me._outerRad <= me._innerRad){

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

  }

 

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

  me._offsetLeft = me._outerRad + me._paddingLeft;

  me._offsetDown = me._outerRad + me._paddingTop;

 

  var arcDef = d3.svg.arc()

  .innerRadius(me._innerRad)

  .outerRadius(me._outerRad)

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

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

 

  var guageArc = vis.append("path")

      .style("fill", me._colorCode)

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

      .attr("transform", "translate(" + me._offsetLeft + "," + me._offsetDown + ")")

      .attr("d", arcDef);

 

  };

 

 

  me.init = function() {

  me.redraw();

  };

 

 

});

Testing the Component

So when the component comes up, it should look like this in the designer, with a height and width of 200em, a starting angle of -90 degrees (relative to 12 O'clock) and an end angle of 90 degrees.  It should also be blue.

Altering the start and end angles to -45 and +45 respectively and choosing red from the color picker should result in a component that looks like this in the canvas.

Epilogue

Testing the Padding properties makes me realize that the gauge is left justified by default.  Either we need more sophisticated placement options, or we need to drop the padding rules entirely.  If this were a normal project, I'd opt for the latter as controlling the gauge size via height and width is simpler.  Instead, we'll use it as an opportunity to introduce the Additional Properties Sheet (APS), by building a small "Padding Visualizer".

In Design Studio 1.6, we are introducing a new type of charting component: Info Charts. Visually they are nearly identical to the old chart component, but their configuration is much more flexible. In this post I will give an overview of the component, how to configure it and what are its main features.

Overview

Info Charts are a new charting component that you will find under "Analytic Components" in Design Studio 1.6. The key difference between charts and Info Charts is the fact that Info Charts can be configured independently of the initial view. In the configuration dialog for Info Charts, dimensions from the data source are bound to specific areas of the chart. This means that if two dimensions are in the rows in the initial view, they can be displayed in different areas of the chart. This was not possible with charts in previous versions of Design Studio.

Other differences include:

• New chart types (bullet, trellis charts, combination charts)
• Missing chart types (waterfall planned to be added in a future release)
• Better integration with the Chart Type Picker
• More properties

An Info Chart component and its configuration dialog

Going forward, Info Charts will be the main charting component of Design Studio, and all new charting features will be available on Info Charts. The recommendation for customers is to use Info Charts when creating new dashboards in Design Studio 1.6. However, Charts will still be supported.

Configuring Info Charts

Creating an Info Chart requires the same steps as creating a Chart: dragging the component onto the canvas and assigning it a data source. Once the data source is assigned to the chart, a default configuration will be generated and a chart will be displayed.

To configure the Info Chart, click on the "Chart Configuration" property, where the chart type is displayed. In the Configure Chart dialog you can:

• Change the chart type
• Change where each dimension is assigned by dragging a dimension from one group to another. The available groups depend on the chart type. For instance, only a Trellis chart will have Trellis Rows and Trellis Columns available.
• Change where each measure is assigned. For instance, Value Axis 1 and Value Axis 2 for a dual axis chart.

Each change to the configuration will be reflected in the chart on the right of the dialog.

Configuring a Trellis Info Chart using the Configure Chart dialog

Swap Axis is not a relevant property any more: Since dimensions are assigned directly to chart areas, the chart is not bound to the initial view any more. Moving a dimension from the columns to the rows will have no impact on an Info Chart. To change the look of an Info Chart at runtime, the recommendation is to use the Info Chart Feeding Panel component.

Main features

In no particular order, here are the main features of Info Charts. Some are copied from the Chart component.

Integration with Chart Type Picker and Info Chart Feeding Panel

Two components are meant to be used in parallel with Info Charts: the Chart Type Picker and the Info Chart Feeding Panel.

The Feeding Panel is a component that should be bound to an Info Chart via the properties. It allows you to configure the chart at runtime and change where the measures and dimensions are bound.

The Chart Type Picker works with both Charts and Info Charts. It will allow to change the type of the Info Chart. For Info Chart, it will automatically reflect which type is currently set.

An application with an Info Chart, a Feeding Panel and a Chart Type Picker

Conditional Formatting

This feature is different from the Chart component. In Info Charts, only exceptions coming from the BW query will be displayed. They will display the exact same way they are in the crosstab. To enable conditional formatting, set the "Conditional Formatting Visible" property to true in the Info Chart properties.

An Info Chart component displaying the same conditional formatting as the crosstab

Properties

Similar to the Chart Component, the Info Charts have additional properties to configure the look and feel. The tabs are:

• General: allows to change the Info Chart title, background and padding
• Plot area: allows to configure the area where the shapes are drawn, for instance show/hide data labels, gridlines, etc.
• Axes: allows to configure each axis of an Info Chart
• Legend: allows to configure the legend area
• Data Series: allows to change the color palette and define which measures should be a bar or line for combination Info Charts
• Interaction: allows to configure tooltips and Info Chart selectability
  

Chart Selection

Info Charts support the same scripting methods than the Chart component regarding selection and behave the same way:

• INFOCHART_1.getSelectedMember(dimension);
• INFOCHART_1.getSelectedMembers(dimension);

In Design Studio 1.6, we are adding a few functionalities to the Geo Map component. In this post I will give an overview of what's new with Geo Maps.

Pie charts

Pie charts are a new layer type for the Geo Map component. A pie chart layer contains the following properties:

• Latitude / Longitude: to be set if the pie charts are meant to be displayed at specific latitude / longitude.
• Measure: the measure to be used for the pie chart. Only one measure can be displayed in a pie chart.
• Custom GeoJSON file: to be set if the pie charts are meant to be displayed at the center of a GeoJSON shape
• GeoJSON Mapping property / type: similar to the Shape Layer

To display a pie chart layer, the data source needs to be configured in the following way:

• Measures should be in the columns
• The first dimension in the rows should be the geo dimension (similar to a shape layer)
• The second dimension in the rows will be used to display the slices of a pie chart

Example of an initial view that could be used to display a pie chart layer

A Geo Map component displaying a shape and a pie chart layer

Changing the colors of the pie slices: The only way to change colors for the pie chart layer is through CSS. A color picker will be added in the next version of Design Studio, but in the meantime a workaround is to use CSS to override the default colors. The example below will overwrite the first 3 colors of the color palette.

path[fill="#748CB2"] {

  fill: #9FCB46;

}

path[fill="#9CC677"] {

  fill: #2D8383;

}

path[fill="#EACF5E"] {

  fill: #DA4B4B;

}

The default color palette used is the same as the Info Chart component. The first 6 values are: #748CB2, #9CC677, #EACF5E, #F9AD79, #D16A7C, #8873A2

Lines and multi-lines

If a GeoJSON file contains lines and multi-lines, they will now be rendered in a shape layer. Their color will vary depending on the measure associated.

Example of lines displayed on a Geo Map

Custom markers

It is now possible to override the default marker for a point layer. To do so, you must upload a raster image (typically GIF, JPEG or PNG) using the "Custom Marker File" property of the point layer.

Use the "Vertical Anchor" property to define where the center of the marker is. For instance in the example below, the vertical anchor is set to "Bottom Center".

Example of custom markers on a Geo Map

Classification types

For a shape layer, it is now possible to choose between 2 classification types. This defines the distribution of values in the different categories of a shape layer.

• Equal interval: each category is equal in size. The entire range of values is divided equally into 7 categories.
• Quantile: each category contains the same number of values, which means that their size will differ depending on the data set

GDP of world countries: quantile classification on the left, equal interval on the right

So I decided in the last minute to submit an entry for the Data Genius Competition and create a small dashboard around the CO2 Emission data using SAP BusinessObjects Design Studio. The data is available on SAP's Data Genius website, so all I needed to do was to do a little bit of a clean up start creating my dashboard.

Looking at the data it was quickly clear that just the data on the CO2 Emission does not deliver a very strong message, so I decided to enrich the data set with other information - such as the Oil Consumption, Total Energy consumption, Coal Consumption, and Electricity consumption for the different countries.

So the first page of my dashboard look like this:

The user has the option to choose which KPI is being used for the X-Axis and which KPI is being used for the Y-Axis.

The data set is group by regions and each region is represented by a color in the scatter plot.

The user also has the option to filter the complete data set to a specific region.

And the user can decide to include the Total Population of each country as a third measure, which then means that we will switch from a scatter plot to a bubble chart.

On the second tab I am following the same concept but I am using maps to visualize the information and when filtering the data to a specific region, the map will focus on the selected region - for example Europe.

Now the interesting part in the data is to see how the data has changed over the years - for example how our Oil and CO2 consumption has changed in the last 50 years.

For that I added a slider component to the dashboard in Design Studio and created the option to simply "play" the years and the see the changes in the data.

Here a short video of that.

Once again - a compilation on all blogs to get you started into the release 1.6! More content will follow in next weeks, I will also accumulate here blogs from others as in the release 1.5 (Design Studio 1.5: What's New in? A (technical) View).

Intro

Taking a while in the release of Design Studio 1.6, I want to give you some introduction to some "bigger" features in the this release. Of course there are also other areas of enhancements, which can be valuable for your scenarios.

View on...

Today here the compilation of links for the topics which I could prepare until now. More will follow until New Year.

1. Scorecard Component

A new component for highly customizable tables, also with micro charts. You can define a view on your data - independent of your drill down (to some extend of course).

2. Spreadsheet Component

A component which is capable of planning with copy and paste support. Looks like an excel grid for data entry.

3. Offline Data (CSV files)

Small, but practical feature for offline demonstrations (works only in local mode). You can export any data source to CSV version using the "Initial View Editor" and then use the CSV later for data access. The value is - also filter components are supporting this data source.

4. Global Filters in Online Composition Dashboards

With small scripting you can achieve a global filter function. Somply look for scripts on Slit Cell Cell Container - getDataSources(). With this, you can get a list of data sources in the container and distribute the filters on it.

5. Custom Measures and Top N at Runtime

In Context Menu you will find some options for local calculations and top N function which helps you data analysis.

6. Drag and Drop capability for Crosstab

Crosstab is now also supporting the drag & drop.

7. Integrated CSS Editor in Designer

Small, but effective - in designer you can directly edit your CSV file. This reduces effort also in upload to BIP repository.

8. SAP UI5 Mobile Mode as Component Library

The complete new mode "M" (called main) which is available when you create new application. Some functions are not supported yet, but you can already try out.

9. Graphics and Icons Library (main mode only)

A component for better display of icons, available in main mode.

10. Action Sheet Technical Component (main mode only)

A small, but interesting technical component to allow additional action menu in the selected context.

If you find other interesting content you would like to ask about, feel free - I will try the best. Also, if you have some blog with examples of new functions, I will link it here for others.

The action sheet technical component - available only in the new main mode - will allow you to create custom context based action lists.

Example

an example of Action Sheet connected to a button.

Content

The action sheet gives in this case 3 options to execute. The available items can be defined in properties. Each item can have key, text and icon.property.

Position

It is bound to a button component, by this the position can be defined in relation to the assigned component.

Events

There is one event available, you can use it to react on the chosen action by the user. with scripting you can access the selected key or text and with IF statements you can execute corresponding function. The scripting is then as usual.

An example of Event implementation

Where to Find?

In the technical components you can see following components. Action Sheet is one of them. Pay attention that this one is available only in the new main mode.

Summary

In cases you have previously created such action lists on your own by placing panels and buttons / labels together - this component is a good improvement fro your application.

SCN Community Content

This component relates also to the SCN community package Action Sheet Button component - Action Sheet Button 2.0 - SCN Design Studio Community. There difference between those components is in the available scripts and other properties. You can chose the one which is better fitting for you.

Hi All,

Here is my Entry for Data Genius IV Challenge for the Category, Health & Social Impact Alliance. This analysis is based on the Farmer Suicides which has become a major concern for our nation, India.

India is an agrarian country with around 60% of its people depending directly or indirectly upon agriculture. Farmer Suicides account for 11.2% of all suicidesin India which is affecting the GDP of country.

India is a country which has abundance of resources but they are not put into effective utilization. Here, we analyze the land utilization pattern which shows that over the period of ten years i.e. 2001-2011, on an average 57.41% of land, available for cultivation is not being put to use effectively. This leads to less production of food and lesser income for farmers. They are unable to pay the loans which they took for farming equipments and fertilizers to grow crops. Hence, it leads to farmer suicides. The highest number of farmer suicides were recorded in 2004 when 18,241 farmers committed suicide.

By Mapping Growth rate of Irrigation and Production, the statistics show that from 2001 to 2011, with 14.58% Growth in Irrigation, Food Production rate has increased to 64.99%.

This has resulted into good income for farmers and hence, farmer suicides have gone down with the declining rate of 21.9%.

So, if the available cultivable land is irrigated effectively, statistics show that with every 1% increase in area of irrigation land farmer suicides tend to fall by 1.5%.

All this analysis has been done on the data for over 10 years, i.e. from 2001 to 2011 using SAP BusinessObjects Design Studio which allowed to create intuitive design pattern as a dashboard based on analytic content. The stats used for the analysis were xls sheets available online and provided by Indian Government portal data.gov.in/catalogs.

Check out more on https://ideas.sap.com/D30232

Warm Regards,

Antarjot

Problem description: you use HANA calculation view with multiple input parameters (for more details see http://scn.sap.com/community/hana-in-memory/blog/2013/12/30/using-multiple-values-in-input-parameter-for-filtering-in-graphical-calculation-view) in SAP Design Studio and you need to generate appropriate input parameters values based on user choice.

• We have two calculation views as data sources: master data view and transactional view. User chooses values from master data view and then applies complex filters on transactional data source. Filters should recalculate available master data values depending on chosen values.
• For example master data view contains organization structure data. First we should join master data tables in one analytical view:
• Then include analytical view in a graphical calculation view projection:
• Create 3 pairs of input parameters. I_<DIM_NAME>_VAL_DIC is for chosen values:
• I_<DIM_NAME>_EXC_DIC is include/exclude/all_values flag:

I_<DIM_NAME>_EXC_DIC = 0 – include

I_<DIM_NAME>_VAL_DIC = 1 – exclude

I_<DIM_NAME>_VAL_DIC = 2 – all_values

• Apply the next filter in the projection node:

((in("PLANT",'$$I_PLANT_VAL_DIC$$') AND ($$I_PLANT_EXC_DIC$$ = 0)) OR (not in("PLANT",'$$I_PLANT_VAL_DIC$$') AND ($$I_PLANT_EXC_DIC$$ = 1)) OR ($$I_PLANT_EXC_DIC$$ = 2)) AND ((in("SALES_OFF",'$$I_SALES_OFF_VAL_DIC$$') AND ($$I_SALES_OFF_EXC_DIC$$ = 0)) OR (not in("SALES_OFF",'$$I_SALES_OFF_VAL_DIC$$') AND ($$I_SALES_OFF_EXC_DIC$$ = 1)) OR ($$I_SALES_OFF_EXC_DIC$$ = 2)) AND ((in("SALES_GRP",'$$I_SALES_GRP_VAL_DIC$$') AND ($$I_SALES_GRP_EXC_DIC$$ = 0)) OR (not in("SALES_GRP",'$$I_SALES_GRP_VAL_DIC$$') AND ($$I_SALES_GRP_EXC_DIC$$ = 1)) OR ($$I_SALES_GRP_EXC_DIC$$ = 2))

• Move on to Design Studio and add the next components to a report:
• FILTERPANEL_MD properties:

• Function ORG_STRUCTURE_FILTER.REFRESH_PLANT_DIC():

     GLOBAL_SCRIPTS.APPLY_VARIABLE_PAIR(DS_MD, "SALES_OFF", "I_SALES_OFF_VAL_DIC", "I_SALES_OFF_EXC_DIC");

     GLOBAL_SCRIPTS.APPLY_VARIABLE_PAIR(DS_MD, "SALES_GRP", "I_SALES_GRP_VAL_DIC", "I_SALES_GRP_EXC_DIC");

     GLOBAL_SCRIPTS.APPLY_VARIABLE_PAIR(DS_MD, "PLANT", "I_PLANT_VAL_DIC", "I_PLANT_EXC_DIC");

• Function GLOBAL_SCRIPTS.APPLY_VARIABLE_PAIR(DS, DIM, VAR_MAIN, VAR_SPRT):

     var fltrstr = DS.getFilterExt(DIM);//Get selected values

     var var_marray = fltrstr.split("; ");//Spliting

     var var_mstr = '';//Val variable

     var var_sstr = '';//Exc variable

     var_marray.forEach(function(element, index) {

            if (element.substring(0,1) == "!") {

             //Exlusion

             var_mstr = var_mstr + element.substring(1) + "'',''";

             var_sstr = '1';

       } else {

             //Inclusion

             var_mstr = var_mstr + element + "'',''";

             var_sstr = '0';

       }

     });

     var_mstr = var_mstr.substring(0,var_mstr.length-5); //Cut extra "'',''"

     //All values

     if (var_mstr == '') {

       var_mstr = '*';

       var_sstr = '2';

     }

     //Update available filter values

     DS.setVariableValueExt(VAR_MAIN, var_mstr);

     DS.setVariableValueExt(VAR_SPRT, var_sstr);

• BUTTON_CALC - TRANSAC_DATA.APPLY_FILTERS():

     //Calculate transactional data

     APPLICATION.setVariableValueExt("I_SALES_OFF_VAL", DS_MD.getVariableValueExt("I_SALES_OFF_VAL_DIC"));

     APPLICATION.setVariableValueExt("I_SALES_OFF_EXC", DS_MD.getVariableValueExt("I_SALES_OFF_EXC_DIC"));

     APPLICATION.setVariableValueExt("I_SALES_GRP_VAL", DS_MD.getVariableValueExt("I_SALES_GRP_VAL_DIC"));

     APPLICATION.setVariableValueExt("I_SALES_GRP_EXC", DS_MD.getVariableValueExt("I_SALES_GRP_EXC_DIC"));

     APPLICATION.setVariableValueExt("I_PLANT_VAL", DS_MD.getVariableValueExt("I_PLANT_VAL_DIC"));

     APPLICATION.setVariableValueExt("I_PLANT_EXC", DS_MD.getVariableValueExt("I_PLANT_EXC_DIC"));

• Result:

     Apply Sales Office filter:

     And move to Sales group:

     There are only corresponding Sales groups:

     Also we can exclude Sales Office Values:

     Sales groups corresponding values:

     Example of generated SQL:

     SELECT DISTINCT "PLANT", "PLANT_TXT" FROM "SCHEMA"."MD_VIEW_NAME"  ORDER BY "PLANT"  ASC LIMIT 1001 WITH PARAMETERS      ('PLACEHOLDER' = ('$$I_ZCTYPBUS_VAL_DIC$$','*'), 'PLACEHOLDER' = ('$$I_ZCTYPBUS_EXC_DIC$$','2'), 'PLACEHOLDER' =      ('$$I_SALES_OFF_VAL_DIC$$','10'',''40'), 'PLACEHOLDER' = ('$$I_SALES_OFF_EXC_DIC$$','1'), 'PLACEHOLDER' =      ('$$I_SALES_GRP_VAL_DIC$$','201'',''204'',''503'), 'PLACEHOLDER' = ('$$I_SALES_GRP_EXC_DIC$$','0'), 'PLACEHOLDER' =      ('$$I_PLANT_VAL_DIC$$','*'), 'PLACEHOLDER' = ('$$I_PLANT_EXC_DIC$$','2'))

After implementation of all Master Data filters we can calculate transactional data using TRANSAC_DATA.APPLY_FILTERS() script:

NBA – one of the very few abbreviation which does not require expansion most of the times because of its humongous fame all over the world. It has more than 21 million fans on Facebook and 17 million followers on Twitter, having its Playoff Season as one of the most sought after sports seasons around the globe.

How would it be to visualize the entire data set of NBA from 2006 to 2011 using SAP Design Studio 1.5?

Scroll down the blog to view Data Analysis of how Dallas Mavericks won the NBA Championship in 2011, how Carmelo Anthony performed in NBA 2006 Season, how NBA All Stars 2008-09 was played and lot more.

This Package of Visualization contains 5 Applications with one HOME Application.

1. Playoffs Analysis
2. Conference Analysis – Eastern & Western
3. All Stars Game Analysis
4. Player Analysis along with Player by Player Comparison
5. Basketball Hall of Fame (From 1959)

Home Application:

The HOME application has the link to jump to any of the other applications and from any other application, you can jump back to the Home application. Every icon in the View, when clicked will take you to the particular application in a new window.

All 5 Applications have a “HOME” Icon in their Header, which when clicked will take you to the HOME Application in a new window.

Playoffs Analysis application:

This application gives an overall analysis of how the Playoffs for the particular year was held. Statistical data like Wins, Losses, GB and PCT% of the Top 8 teams of each conference can be analysed using this application.

When the VIEW POINTS TABLE icon is clicked:

Features:

• Year Selector– swipeleft/righton the year selector, Playoff League Stands change for the particular Year.
• Points Table– When you click on the SHOW POINTS TABLE selector, the points table with points of Top 8 teams in each conference is displayed.
• Quick Team Stats– When you click on the left most/right most Team icons, the Team Name flips and shows you the Quick Stats of the Team in the League.

Conference Analysis application:

In this application, the statistics can be analysed based on each conference separately, either Eastern Conference or Western Conference. In each of the conference views, the teams are divided into 3 divisions and analysis of the teams is based on 8 Performance Indicators, which are grouped division wise.

An important factor used in this analysis and All Stars Game Analysis is FOUR FACTORS OF SUCCESS which was developed by Dean Oliver. This is calculated by the formula: 40% of Shooting + 25% Turnovers + 20% Rebounds + 15% Free Throws. 

Eastern Conference:

Western Conference:

Features:

• Year Selector– If you click left/right arrowon the year selector, it changes the Conference Stands for the particular Year.
• Conference Selector– When you click on Particular conference logo on Top right of the application, teams in selected conference can be analysed.
• Performance Indicator Selectors –There are 8 Performance Indicators with which each Team can be analysed. So when clicked on a particular selector, all teams in 3 divisions can be analysed based on the selected Performance Indicator.
• Team Selector– There are 8 Performance Indicators with which each Team can be analysed. So when clicked on a particular selector, all teams in 3 divisions can be analysed based on the selected Performance Indicator.
• OFFENSIVE/DEFENSIVE Radio button – This is used to switch the FOUR FACTORS OF SUCCESS from defensive to offensive factors and vice versa.
• COMPARE FOUR FACTORS– When you click the action button - “Compare Four Factors”, then the FOUR FACTORS OF SUCCESS of all the teams are analysed, division wise, in the right most charts.
• 
  

Player Analysis application:

This application helps you to analyse a particular player’s performance and his contribution from 2006 – 2011 in more than one team. The Head to Head compare option is also available where one player is the selected player by default and you can choose the other player for comparison.

Features:

• Player search– You can search for a desired player and view the statistics of that player. Any part of the player’s name can be used as a keyword to search the list of relevant players.
• Year selector– When the year selector is selected, player statistics for the desired year is displayed. The year selectors also display the teams in which the selected player has played.
• Comparison– Here you will be able to compare the selected player’s statistics vs the top player for each statistic. Use the Top Player/Average radio button to switch comparisons between the top player and average for each statistic.
• Player Contribution– Here you can view the selected player’s contribution for each of the stat, for the selected year.
• Player comparison– When this option is clicked, you will be able to compare the statistics of two players. You can use the search inside the “Comparison View” to select the desired player for comparison. The comparison view shows the player stats using charts and miscellaneous information using texts.

All Stars Game Analysis application:

In this application, 12 players who played for Eastern conference and 12 Players who played for Western conference in the All Stars game has been listed according to their Four Factors percentage – from highest on the top to the lowest at the bottom. Three players, along with their Game Statistics are displayed in one Page of every conference. When swiped Up/Down, the statistics of other players can be analysed.

Features:

• Year Selector – Whenleft/right arrowon the year selector is clicked, the List of All Stars Players will change according to the selected Year.
• Player Photo – If a photo of a Player is clicked, it navigates to the Player Analysis application of the particular player in a new window.
• Page Swipe – When Eastern/Western conference side is swiped Up/Down, other sets of All Stars Players can be analysed.

Basketball Hall of Fame application:

  This application can be used to analyse the data of the Basket Ball Hall of Fame decade/year wise. You can also drill down to a particular Role such as players, coaches, contributors, referees and teams.

Features:

• Role Selectors – When you click on specific roles like players or coaches, Hall of Fame entries for the selected role will be displayed year wise and decade wise.  If “TOTAL” is selected, Hall of Fame entries for all roles can be analysed. 
• Decade Selector – When a particular decade is selected, entries for the years in the selected decade will be shown in the bottom chart.

All the applications have a “Help” button in the bottom right corner which when clicked will show the help screen for each application. This help screen will have instructions for you to use the application, utilizing all options provided.

Similar visualizations and stories can be developed for any sport and can be used for promoting the sport among the followers and to the sponsors who are ready to invest their money for the sport. Even to those who are not very familiar with the sport can also understand the data and compare the teams or players when it is visualized effectively. We have done this package of Analysis Applications to demonstrate that Sport Analytics is effectively possible using Design Studio 1.5.

The above work was a team effort which includes contributions from : Ramya VaradharajanHari Prasad Sanjivi ArulNirmal Kumar BaskaranNaveen Kumar Pukazhenthi .

Disclaimer: The images and logos used are properties of NBA and respective franchises. These applications are designed only for demonstrative purposes. 

You’ve got Design Studio installed, you’ve heard great things about it, and you’ve also heard tell it can do great things with bookmarks. However, you’re not quite sure how to exploit this exciting feature in your own dashboards. Well, you’ve come to the right place! Here’s a quick overview on Design Studio bookmarks and how to make them work for you.

What they are!

Design Studio Bookmarks are in layman’s terms like a snapshot of your well-crafted, well-sliced and diced dashboard that you can save and reload. You can also share these Bookmarks with your colleagues as a URL in order for them to see the same interesting insights you’ve just found instantly!

Why would I need it!

Well take the following example:

• You have been slicing and dicing your data source using our new Nav panel
• You have also added a filter to the data source using our new Filter line component.
• You then possibly decide to change the visualization from a bar chart to a line chart with our new Chart picker component as it represents this data set really well.

Now, you have spent all that hard work getting your data to a point where it told the story you wanted, wouldn’t it be great to save that point in time data visualization….and to share with your colleagues instantly via a URL hyperlink?

Well Design Studio Bookmarks can help you here by enabling you to save any visual and data source changes you have made to your dashboard as a Design Studio Bookmark. All these bookmarks (as many as you want), can be stored in a drop-down list and recalled when needed. The inbuilt Design Studio sharing functionality also allows you to send a URL hyperlink of these bookmarks to your colleagues.

The technical bit!

Design Studio bookmarks are controlled through scripting, and along with a large catalog of features available to them, the application designer can create all the functionality required to make this re-use and sharing of bookmarks a reality. There is plenty of detail on this in the ‘Application Designer Guide: Designing Analysis Applications’. However the following describes at a high level the main technical features of the three bookmark types: standard bookmarks, fragment bookmarks and portable fragment bookmarks.

Standard Bookmarks

• are dependent on application version
• bookmark the entire application
• can be opened via UR

Fragment Bookmarks

• are not dependent on application version
• bookmark a selected part of application
• can be opened via URL

Portable Fragment Bookmarks

• are not dependent on application version
• bookmark a selected part of application
• can be opened via URL and used in Fragment
  Gallery and Split cell Container

Introduction

One of the important new features introduced with Design Studio 1.6 is the SAPUI5 M rendering mode.  In this blog I'll summarise the important aspects of the new feature based on the available documentation and my experience so far.

Background

When Design Studio was first released, its rendering framework was based on the UI5 Commons library, the only suitable library available at the time.  Since then UI5 has evolved considerably, with the addition of the sap.m library, initially with a focus on mobile while also supporting desktop.  When Fiori apps were introduced, they were based on the sap.m library, which is where the development effort is going now and the library has become known as the "main" library instead of "mobile".  Given SAP's UX strategy to converge all applications and UI technologies to the SAP Fiori UX it certainly makes sense that Design Studio should follow this direction with the addition of the M Mode for rendering.

How Does It Work in Practice?

Now, when creating a BI app, we are presented with two rendering options, SAPUI5 and SAPUI5 M, as shown below, with corresponding templates and component palettes:

SAPUI5 M Mode

SAPUI5 Mode

The components and templates in both modes are compared in the following sections.  Once a rendering mode is selected it cannot be changed manually.  However, there is an option to migrate from SAPUI5 mode to SAPUI5 M mode from the Tools menu:

Component Comparison

For the most part, components are available in both modes but there are some exceptions, as shown in the table below:

Component Group	Component	New	SAPUI5 M Mode	SAPUI5 Mode
Analytic Components	Chart
	Crosstab
	Dimension Filter
	Filter Line
	Filter Panel
	Geo Map
	Info Chart	Yes
	Navigation Panel
	Scorecard	Yes
	Spreadsheet	Yes
Basic Components	Button
	Chart Type Picker
	Checkbox
	Checkbox Group
	Date Field
	Dropdown Box
	Formatted Text View
	Fragment Gallery
	Icon	Yes
	Image
	Info Chart Feeding Panel	Yes
	Input Field
	List Box
	Radio Button Group
	Text
	Tree	Yes
Container Components	Grid Layout
	Pagebook
	Panel
	Popup
	Split Cell Container
	Tabstrip
Technical Components	Action Sheet	Yes
	Backend Connection
	Global Scripts Object
	PDF
	Text Pool
	Timer	Yes

New Components

A number of new components have been added as described below:

Properties

Both rendering modes now default to the Blue Crystal theme, the importance of which is described in the blog Why Use Blue Crystal Style in Design Studio Apps? 

Also, there is a Compact Form Factor property in M Mode for choosing between the "Compact" style which is optimised for desktop and the "Cozy" style which is optimised for touch devices.  For those that are interested in further background about these modes, the Cozy and Compact Form Factors section of the Fiori Design Guidelines provides a comparison of the two.

The differences in component properties across the two rendering modes are summarised in the table below:

Item	Property / Event	New	SAPUI5 M Mode	SAPUI5 Mode
Application	SAPUI5 m Mode	Yes
	Position of Message Window
	Compact Form Factor	Yes
Dimension Filter	Display Mode
	Popup Width
	Popup Height
	Popup Position
	Popup is Modal
	Auto Apply
Filter Panel	Display Mode
	Drag and Drop
	Auto Apply
	Direct Input for Filter
	Desktop Style for Popup
	On Cancel event
List Box	Multi Selection
	Selection Mode	New
Pagebook	Transition Effect
	Transition Direction

Templates

The templates have been rationalised as shown in the table below:

Template Group	Template	New	SAPUI5 M Mode	SAPUI5 Mode
Standard	Blank
	Basic Analysis Layout	Yes
	Basic Layout	Yes
	Planning Layout
Ready-To-Run	Data Discovery and Visualization
	Generic Analysis
	Online Composition

You'll notice that there are only two templates available in SAPUI5 M Mode.  Presumably the Basic Analysis Layout and Ready-To-Run templates are not available as the Filter Line, Fragment Gallery and Split Cell Container components required by these templates are not yet supported in SAPUI5 M Mode.  I expect we'll see support for these in a future version of Design Studio.

Furthermore, the following templates have been removed:

Ad-Hoc Analysis Template

Basic Analysis Template

KPI Dashboard Template

KPI Details Template

iPad Template 1

iPad Template 2

iPad Template 3

iPhone Template 1

iPhone Template 2

Implications for SDK Components

With the two rendering modes, SDK components must now specify which rendering mode they support.  This can be either or both.  In my view though, a more important benefit of the new SAP M mode is that it means the sap.m library is now officially supported for SDK component development.  In the past, there have been many discussions on the SCN about the use of sap.m controls in SDK components, with issues related to click events and mobile scrolling requiring workarounds to be implemented.  With Design Studio 1.6 it's great to see that these issues appear to have been resolved and we should now be able to take advantage of sap.m controls more freely when needed.  This is especially relevant for the Fiori-style components in the SCN Design Studio SDK Development Community component set.

More information can be found in the blog What's New in Design Studio 1.6 SDK.

SDK Development Community Fiori Components

The M Mode contains a subset of Fiori-style components from the UI5 sap.m library.  To complement these in the development of Fiori-style BI applications I recommend considering the following components from the SCN Design Studio SDK Development Community.  I expect a version 3.0 adapted for M Mode will be released when ready.

Action Sheet Button 2.0

Fiori App Header

Fiori Bar

Fiori Toolbar

Launch Pad

Segmented Button 2.0

Multi ComboBox

KPI Tile 2.0

Area Micro Chart 2.0

Bullet Micro Chart 2.0

Harvey Ball Micro Chart 2.0

Process Flow 2.0

Radio Button Group 2.0

Conclusion

I think the M Mode rendering is a very welcome new feature in Design Studio 1.6 which brings us significantly more capability for easily building Fiori-style BI apps combined with related SDK components such as those listed above.  Going forward, I would recommend that at least for new applications, you give serious consideration to using SAPUI5 M Mode.  It should fulfil most requirements compared to the standard SAPUI5 mode, with the current exception of online composition scenarios but I expect we'll see support for this in future.

Recommended Reading:

Design Studio 1.6:  What's New in?  A (Technical) View 

Blog Series Index:  Design Studio Innovation Series - Welcome

The Info Chart Feeding Panel component allows to change the look of Info Charts at runtime. Here's a quick cheat sheet on which CSS classes to override in order to change its style.

The class .ui-state-highlight is the highlighted area when dropping is allowed (.ui-state-error when dropping is not allowed)

The default padding around a feeding-sortable-item is not centered, this should be fixed in a service pack.

Here is the full CSS used to achieve this result:

.feedTypeTitle{

background:#ddddff;

}

.feedTypeContainer.feedTypeTitle{

color:#5151ae;

}

.feedContainer.bucketContainer{

background:#ffffa8;

}

.feedTypeContainer.feedContainer{

background:#d3d3d3;

}

body>.feeding-sortable-item{

background:black;

color:red;

font-size:12px;

}

.bucketList.ui-state-highlight{

background:green;

}

.bucketList.ui-state-error{

background:red;

}

.bucketElement{

color:#1e6220;

}

.bucket{

color:#b32f61;

}