This post is just a compilation, or round-up of my previous blog postings on SCN where I've release some source code, in various states and links.  It is also an update to let you know of a new consolidated location of these, as well as to say that I've included a deployable form of these that anyone can install.  If there are other SCN Members who would like to contribute to this Utility Pack, reach out to me and perhaps we could all pool our pieces in one deployable feature.  I know that from time to time other guys like Leandro Cardoso and Jeroen van der A and Manfred Schwarz and Mustafa Bensan share, so having a consolidated list (since SAP Code Exchange is gone) would be a nice thing.

First, a summary of what's included, with links to the original posts:

• HTML Template
  An HTML and JavaScript injection addon for rapid prototyping pre-SDK work.
  Design Studio 1.2 SDK - Rapid Prototyping Addon HTML/JS Templating
• Double Sided Tile
  Similar to the HTML Template, but with CSS flipping
  Design Studio 1.2 SDK - Use both sides - Double Sided Tiles
• Super Image
  An SAPUI5 extended component with a property sheet that will Base64-encode an image (IE10 or higher needed on dashboard author workstation)
  Design Studio 1.2 SDK - An Image Component free of MIME Repository worries
  
• High Charts
  A rudimentary proof-of-concept chart wrapper that binds to a Design Studio datasource.
  Design Studio 1.2 SDK - An adventure in creating a data bound Chart Component wrapper
• Slide Show (New!)
  A fun slide show component for engaging, interactive KPI tiles, inspired by modern web principles like Fiori
  Design Studio 1.2/1.3 SDK - Slideshows

New Github Repo containing all of these:

https://github.com/entmike/DesignStudio1.3UtilityPack

Deployable .ZIP file:

https://github.com/entmike/DesignStudio1.3UtilityPack/blob/master/Design%20Studio%20Utility%20Pack%20SCN.zip?raw=true

To install in Design Studio, download the .ZIP, and go to Tools -> Install Extension to Design Studio -> 'Archive...'

Addons that did not make the cut at this time:

• Design Studio 1.2 SDK - Enhancing the 'Simple Table' SDK Component
• DS 1.2 SDK Example - Embedding Xcelsius SWFs (not for Mobile, of course)
  (APOS has a version that'll most certainly do this job better, and using the HTML5 versions - This won't get included in a future utility pack, but is here for reference)
• Design Studio 1.2 SDK - New approach to a toolbar component using SAPUI5 Handler
  (This may get included later, but did not at this time.)
  
  

As we can see in the new 1.3 Ad-hoc Analysis Template, there seems to be a push to make things look more and more like Fiori.  We see this with the SAP Blue Crystal theme showing up, as well as usage of SAP Icons, and flat, clean design principles.

After looking under the hood at the approaches used in the adhoc template, I observed a few funny things:

1. A heavy reliance on CSS to make the app have the look and feel like a Fiori-esque app.
2. A heavy reliance on absolute positioning and dynamic visibility to simulate contextual pop-overs/menus.
3. Usage of CSS pseudo-elements for iconography (which is where I'm going to explore in this post)

I think there's a big divide on the legitimacy of the whole CSS pseudo-element thing.  Basically the argument can be made CSS shouldn't carry content, but the :before and :after kinda cheat.  But whatever, looks like SAP has taken their stance that for Design Studio, this may be ok.  (This is just all conjecture, by the way )

So what exactly is going on in the Ad-hoc template's CSS?  A lot of cosmetic/formatting stuff I mentioned in bullet 1 which I won't cover, but also pseudo-elements for icons that I want to shed more light on:

First, I noticed they are using @font-face to use a web font approach for referencing their SAP-Icons font files:

/* Formating Style in Fiori Style */
/* BEGINNING */
@font-face {
font-family: 'SAP-icons';
src: url('SAP-icons.ttf'),
url('SAP-icons.eot'); /* IE9+ */
font-weight: normal;
font-style: normal;
}

Then around line 148 or so, we see a lot of these CSS Classes:

/* Icons */
.ICON_BOOKMARK:before {
font-size: 22px;
font-family: 'SAP-icons';             
content: "\e19b";          
speak: none;
}
.ICON_PLAN:before {
font-size: 22px;
font-family: 'SAP-icons';             
content: "\e0ba";          
speak: none;
}
.ICON_COPY:before {
font-size: 22px;
font-family: 'SAP-icons';             
content: "\e039";          
speak: none;
}

(and so on)

These are the CSS Classes being applied to Text components in the Ad-hoc template.  The content fragments are escaped character codes for certain characters in the font.  It's an interesting approach, if a little "unconventional".

So anyways - How many of these Icons could we as dashboard authors use and do our own icons?  Let's visit this SAP page: Icon Explorer

It appears that there are 507 icons at our disposal, according to the Icon Explorer.  So armed with this information, we can derive a few important things to make our own icon CSS classes:

By using the Icon Explorer, let's look at adding this icon:

You'll notice on the bottom right, it gives you an id with a code of 'e116'.  This is the same code that is used in the CSS selector for the examples mentioned earlier.  So let's make our own.

.ICON_MONEY:before {  font-family: 'SAP-icons';  content: "\e116";
}

You'll notice I left out the font-size and speak stuff.  I want to show just the bare bones of what you need for this to work, but you can leave the extra stuff or customize if you want.

So next, let's drop in a Text Item, remove its default Text, and assign it the CSS Class 'ICON_MONEY'.  If you do this, you'll notice the icon is pretty small (like an average letter in a text box):

Let's use the CSS Style property to size it how we wish:  'font-size: 3rem;line-height: 3rem;'

There, that looks better...  And there you have it.  By using SAP's pseudo-element approach, along with their supplied SAP-Icons font family, you can use over 500 icons without having to use image files.

Enjoy!

SAP BusinessObjects Design Studio 1.3 has been released at 28th May 2014. Here you can find collection of all release information which is available.

Entry Point is the Product Availability Matrix with links to:

• Essentials: PAM Additional Information (direct link)
  • in this document you can find the supported systems for data sources, platform and functionality prerequisites.
• Documentation Site (direct link to Help Portal)
  • at this site all relevant documentation documents are available:
    • What's New
      • summary of features delivered with this Design Studio release, see
        • What's New Guide
    • Installation, Configuration, Security and Administration Information
      • Installation guides for BI Platform, NetWeaver and Client deployment, see
        • Section for administration guides
    • Development Information
      • All information for Software Development Kit (SDK) of Design Studio, also with package containing simple components build with SDK as examples, see
        • Developer Guide: Design Studio SDK
        • Design Studio SDK Templates and Samples"
    • Application Help
      • contains documentation for application developers, see
        • Application Designer Guide
    • End-User Information and Additional Information
• Release Notes
  • Release note for Initial Shipment (Note 1948049)
    • this note will also be actualized as soon some important information needs to be published
  • Release note for Support Package Schedule (Note 1760372)
• Link to Download Area:
  • Download of initial package (all software components in ZIP format - separated by deployment type)
  • Download of SP0 per software component (selective download is possible)

Additional Information

• Official product Tutorials at SCN
• Official Road Map - will be actualized soon based on planning of 1.3 release

Important help in case of support - notes which help you and SAP in support process      

Sizing Note

Known Issues and Solutions     Design Studio BI Platform Add-On

• 1942899 - Application Service could not be established after the installation of an SDK component in a distributed environment

     Design Studio NetWeaver Add-On

• 1897054 - SBOP Design Studio: NetWeaver Add-On SP Deployment with JSPM

     Design Studio Client (documentation will follow)

• Installation does not start, currently the solution is to backup and remove 2 folders in user folder:
  • folder: %USERPROFILE%\Analysis-config
  • folder: %USERPROFILE%\Analysis-workspace
• Upgrade Issue from Design Studio 1.1 release with support package smaller than SP3 - solution is to uninstall the 1.1 release first and then make fresh install of 1.2 release.

Feel free to ask any questions related to technical aspects of this release - I will try to answer and actualize this site.

SAP Design Studio 1.3 is packed with lot of new features and improvements and the most important feature out of them is its ability to run in HANA platform. With this new feature, it can consume data, publish applications and execute applications on top of SAP’s revolutionary In-Memory technology. The combination of both SAP Design Studio and SAP HANA has pioneered a new vision in Visualization tools. Using HANA as a platform, Design Studio completely utilizes the computing power and speed of the HANA platform.

Installation:

Installing Design Studio addon in HANA platform is simple, faster and easier. The installer is provided as a “Delivery Unit” and it can be directly imported to HANA server.

Please refer to this link for a detailed step-to-step guide on Design studio - HANA server installation .

Native HANA Services:

While using HANA as a platform, Design Studio makes use of HANA components and HANA’s native languages. Design Studio applications are stored in HANA repository and it uses XSJS (Server side JAVA Script) to handle server requests.

Whenever a request is made by Design Studio to HANA server, it is processed by a XSJS service.

For example: Following is an error message shown by Design Studio when it communicates with XSJS service.

Using the Repository:

Design Studio applications are saved in the HANA repository. However all the applications are saved to a common package named “designstudio”. So the applications published by all users will be available in the same repository package. As the applications are maintained in packages, this makes “Promotion”/”Transport” of Design Studio applications easier than ever. HANA specific promotion concept of “Delivery Units” can be used to promote apps from one environment to another.

Custom Addons:

The most important reason for an enterprise to use Design Studio for Analysis is its ability to interoperate with custom addons built by developers. Design Studio on HANA platform has the option to host custom addons as Design Studio on BOBJ does. However the installation of custom addons in HANA platform is easier than the BOBJ platform. Unlike Business Objects, there is no need for complex steps like restarting APS servers hosting “Analysis Application Service”. Installing the component to platform is enough for the applications to make use of the addon.

The custom components installed in HANA platform is also saved in the repository. The custom components are maintained in a separated package named as “designstudio_extensions”.

Roles and Authorizations:

Design studio on HANA Platform makes use of Roles and Authorizations setup in the HANA system. Whenever user executes an application, he can see only the data what he is authorized to see. There is role named as “sap.bc.ina.service.v2.userRole::INA_USER” , which should be granted to users who need to execute Design Studio applications on HANA platform. If this role is not granted to the user, then he cannot see any data in his application though he has authorization to see that data.

Performance

Design Studio on HANA platform performs better than Design Studio on BOBJ/NW. Since Design Studio applications are hosted in HANA repository and executed in XS Engine, the performance and rendering is faster.

We tried a small benchmarking on response time between Design Studio on HANA and Design Studio on BOBJ using SAP’s HANA EPM Demo data. The results prove that Design Studio on HANA provides better performance than Business Objects, where the data is retrieved from same server and rendered to same client tool.

Benchmarking data set consisted of 23M records

These are our initial observations on SAP Design Studio 1.3 using HANA as Platform. Please keep following us for more information on SAP Design Studio.
 
Happy Learning!.

Republished from www.visualbi.com/blogs

With the release of SAP BusinessObjects Design Studio 1.3 it's now possible to use SAP HANA as the platform for Design Studio. SAP HANA is used as repository to store analysis applications and images, and also as a back-end system, providing the business data for data analysis in analysis applications. There is a current limitations however: you can only connect to one SAP HANA system and you can only add data sources to your analysis applications from one SAP HANA system.

In this blog I will show you how easy it is to install and run Design Studio directly on SAP HANA.

The prerequisites to use SAP HANA as the platform for Design Studio are listed below (these can be found in Administration's Guide):

• SAP HANA SPS 08 is correctly installed. For more information, see SAP Note 1993123
• SAPUI5_1 Delivery Unit is installed on the SAP HANA system.
• HCO_INA_SERVICE Delivery Unit is installed on the SAP HANA system.
• A suitable version of SAP HANA Studio is installed on the local machines of your application designers.

After downloading the DS HANA 1.3 installation package from the location below unzip the file.

After unzipping the file use the SAPCAR utility to 'unzip' the HCOBIAAS00_0.SAR file.

Next step is to install Design Studio in SAP HANA Studio. Start the SAP HANA Studio and choose 'File' - 'Import' - 'SAP HANA Content' - 'Delivery Unit'.

Click 'Next'. Select the Target System and click 'Next'.

Select 'Client' and browse to the HCOBIAAS.tgz file.

Click on 'Finish'. Validate in the 'Job Log' whether the Import is Completed successfully.

By importing the Delivery Unit successfully the packages designstudio and designstudio_extensions are created in SAP HANA Studio. Analysis applications and images used in the applications are stored in the designstudio package. SDK extensions deployed to SAP HANA are stored in the designstudio_extensions package.

The final step is to validate whether we are actually able to store analysis applications on SAP HANA and use it as the platform to run the applications. Start the SAP BusinessObjects Design Studio 1.3 client.

Go to 'Tools' - 'Preferences' and change the 'Preferred Startup Mode' to 'SAP HANA'. Click on 'OK'. The Design Studio client will prompt you to restart the application so changes will become affective. Click on 'Restart'.

During the restart of the Design Studio client you will be prompted with your SAP HANA credentials and the URL of your SAP HANA XS Engine. After submitting the information please click 'OK'. Your XS Engine URL would be like: http://<server><port>.

After you succesfully logged in you can see you are connected in the bottom right of your screen. Click on the SAP HANA System name and view the properties of your system.

Now let's create a new application. Click on 'Application' - 'New'.

Hint: Make sure that before you create any new application your SAP HANA user has sufficient priviliges on the 2 packages created during the 'Import'. If your user has the standard 'Modeling' role this should be sufficient. You can fine tune the authorizations on these packages later.

Click 'Next' if you want to select a template. For now just click 'Finish'. In the bottom right corner a 'Message from Backend' will appear. In this case we successfully created the 'HANA_TEST' application.

To ensure that a user on SAP HANA can Execute an analysis application on SAP HANA you need to assign the sap.bc.ina.service.v2.userRole::INA_USER role to the user executing the application.

I created a very simple application with 1 crosstab containing 10 rows of data from an Analytic View. Now let's Save the application and go to 'Application' - 'Execute on SAP HANA'.

After being prompted for your SAP HANA credentials the analysis application is presented!

I will run some further tests next week to validate the functionality!

Please let me know if you have any questions!

With kind regards,

Martijn van Foeken

Below is a screenshot (taken in IE10) which contains some different Tabstrip CSS customizations/designs for the Application Theme Platinum.

Feel free to use any of them.

Attached you can find the css definitions for the custom css classes.

I have created the following 8 custom css classes:

• platinum-tabstrip-1
• platinum-tabstrip-2
• platinum-tabstrip-3
• platinum-tabstrip-4
• platinum-tabstrip-5
• platinum-tabstrip-6
• platinum-tabstrip-7
• platinum-tabstrip-8

To use a design: copy the corresponding code into your custom css file which must be of course also linked to your design studio bi app and add/assign the css class name to your tabstrip component (clear browser cache if needed and view result in browser).

Related blog post:How To: Create a manila folder like vertical tabs using CSS

Last week we had an in-depth session on the latest news on Design Studio at ASUG Annual Conference (co-located with SAPPHIRENOW)

Below are my notes.  Note many things are subject to the legal disclaimer and subject to change.

Figure 1: Source: SAP

Figure 1 shows the usual legal disclaimer applies that things are subject to change.

Figure 2: Source: SAP

Now I know we've seen this slide before but last week I think the message was made clear at the conference that the many BI clients are or will be native to BI, like Lumira is now.  Design Studio has a native HANA deployment option in 1.3.

Figure 3: Source: SAP

Figure 3 shows a partner SDK add-on by Graphomate.  What I like about this as an accountant is that it explains the details behind the return on assets KPI.

Figure 4: Source: SAP

Figure 4 shows the CubeServ SDK with micro charts (reminding me of Web Intelligence) and status and trend icons.

Figure 5: Source: SAP

Figure 5 shows the KPI tiles (this is a common question here on SCN)

Figure 6: Source: SAP

Figure 6 shows geo reporting with the CubeServ SDK - this is another common question about Design Studio.

I believe these partner SDK's can be located on SAP Store.

Figure 7: Source: SAP

Coming with a Design Studio SP, Figure 7 shows the ability to import a SAP Lumira CVOM SDK into Design Studio.  So if you build an SDK in either application you will have the capability to share them in both.

Figure 8: Source: SAP

Figure 8 shows sample Lumira CVOM chart extensions, developed mostly by SAP.

Figure 9: Source: SAP

Figure 9 shows the details on the ad hoc analysis template available now in Design Studio template and how to use it as a URL string.  Be sure to check out the options in the lower right/left of the ad hoc template as shown in Figure 9.

Figure 10: Source: SAP

Figure 10 shows more details in-depth of the ad-hoc analysis template.  I share this as these are slides I had not seen before.

More details to share in the next blog.  Part 2 is coming.

This is part 2 of Latest News on Design Studio - ASUG Annual Conference Part 1 from last week's ASUG Annual Conference, co-located with SAPPHIRE NOW.

This part of the session mostly discusses interoperability between Design Studio and Lumira.  Note the usual legal disclaimer applies that things in the future are subject to change (Figure 1 from part 1 applies).

Figure 1: Source: SAP

Figure 1 shows Design Studio is for designers while Lumira is for business analysts (and now decision makers too).

Figure 2: Source: SAP

We first heard this message last year at conference but we are hearing more and more that HANA is the new target BI Platform.  Figure 2 is an update to Figure 3 from last year's Design Studio Updates at ASUG Annual Conference

More BI clients will be native to HANA, like SAP Lumira and Design Studio currently are.

Figure 3: Source: SAP

Figure 3 shows the Lumira Server, which is already GA and more information can be found at SAP Lumira

Figure 4: Source: SAP

Figure 4 is a preview of the new, not-yet released SAP Lumira 1.17 desktop, showing you can connect Lumira to a BEx Query or an InfoProvider.  Today you can only connect to BW universes with Lumira.

Figure 5: Source: SAP

Figure 5 shows that coming in a Design Studio SP you will be able to use the Lumira SDK in Design Studio and import Lumira boards into Design Studio (next Figure).

Figure 6: Source: SAP

Figure 6 on the left shows the Lumira desktop visualization and on the right importing it into Design Studio.  So the workflow is your business user creates a visualization and but wants more updates than Lumira can provide, so you import the visualization to Design Studio.

Figure 7: Source: SAP

Figure 7 shows the latest roadmap.  The midterm shows what is in the works for the next release OR the next 12-18 months.  The future has no timeline commitment.

Lastly, one of the reasons I wrote this blog was to support Your mission, should you decide to accept it...Marilyn Prattmission to blog about the event.  I hope others will share their experiences as well.

I think I've seen a recurring theme since the new adhoc analysis template came available in 1.3 - And it's related to CSS, Images and/or icons and how to get them working properly outside of Local Mode.  I'll walk you through how I got it working in my scenario, click-by-click:

First and foremost, make sure you are running in the right mode, and let's also grab an important folder path along the way.  Go to Tools -> Preferences, and check the following 2 items:

After making sure you are running in BI Platform Mode, create a New Application, selecting the 'Template AdHoc Analysis' template.

Alright, let's next configure the template to point to an OLAP system in our environment - This will of course be customer-specific, but below is where to click to set that up.  Note: if you skip this step, you may get a generic 'Analysis Application' error when running on the platform (I did) - So spend the time to select one:

Next, I was able to leave the Data Source blank (and in another case, I wasn't - It's kind of quirky) - However, just get to where it accepts the data source change from blank to whatever your connection may be:

Now, SAVE your Application to your BI Platform, and let's see what it has saved in BI Launchpad.  In my example, I saved under Favorites in a 'Demo Apps' folder.  You'll notice that Design Studio has saved a few items, shown below:

So, this is kind of convenient from a template perspective.   It looks like it'll handle some degree of automated image resource uploading for an application (note the branding image that was uploaded, as an example)

So you may wonder, why does the rest of the template look so crazy?:

This is hardly how Local Mode looks...  It would appear that in BI Platform Mode, that some additional needed resources have not been added to the BI Platform.  Specifically some CSS and Font Files.  Let's correct this manually.  Let's start with the CSS by highlighting the application in the Outline, and locating the Custom CSS property and click the '...' button to show the Upload dialog:

(Note: You can decide how you'd like to manage the organization of these resources, I chose the sub-folder that was created when initially saving the application in this example.) - After navigating to your intended folder location, click 'Upload Local CSS'.  Now, browse to your templates folder that you noted down in the first step:

So, what is the effect of the BI Application now that we've uploaded the missing .CSS file?:

Looking better - It looks like the HTML styling has taken effect, however it looks like we are still missing some icons.  As others have noticed, SAP decided to use their SAP-Icons font pack for their iconography, so lets now upload those font files to the server.  Sign into BI LaunchPad, and navigate to the folder where you uploaded the .CSS file.  Then, go to the New -> Local Document dialog.  Click 'Choose File'.

Navigate to the same templates folder where you found the .CSS file, and upload the 2 SAP-icons files in the illustration.  Make SURE you re-add the file extension AND set the appropriate MIME content type.  If you forget to set the MIME type, you'll have to delete the file and re-upload because you cannot change it later.  See the following illustrations:

.EOT File details:

.TTF File details:

You should now have folder contents similar to this:

Switch back to Design Studio, and click the Reload button:

We now have icons!

By following these steps, this should leave you with a template the works in Internet Explorer as well as Chrome and Safari.  I didn't bother testing with Firefox.  I did test from my iPhone using QRReader mode and the icons DO show up.  I will test from the BI Mobile application when I have my iPad however I do not see why this should not work based on all my tests.

Hope this guide helps those who are struggling with the template, as well as gives some insight into what MIME types and resources go where, automatically in some cases (Image files) and manually in others (CSS/Fonts).

Building off a few techniques and observations I wrote about in 3 other posts, I now have what is an example of a single CSS file containing all the resources you need to illustrate how to use a font-based Icon pack, without having to upload various files after the fact.

The technical approaches can be found in these related posts, but I won't go into detail here.:

Design Studio 1.2 - Embedding Bullet-proof Web Fonts

Design Studio 1.2/1.3 - SAP Fonts Usage for Icons

Design Studio 1.3 - Making Adhoc Analysis Template, Images, and CSS Work

Free font pack I chose:

Batch - 300+ Icons for Web & User Interface Design

The end result is a CSS file (attached) that contains the font files base-64 encoded directly into the .CSS file as a web font family 'Batch', along with one CSS class called .batch (and really, this is even optional, as it just specifies the encoded font family 'Batch'.

/*
Batch Icons
by Adam Whitcroft
http://adamwhitcroft.com/batch/
Adapted for SAP BusinessObjects Design Studio
by Mike Howles
http://scn.sap.com/people/mike.howles4
*/
@font-face{  font-family: 'Batch';  src:  url(data:application/octet-stream;base64,LONG BASE64 STRING REMOVED FOR BLOG POST) format('truetype'),  url(data:application/vnd.ms-fontobject;base64,LONG BASE64 STRING REMOVED FOR BLOG POST) format('embedded-opentype');  font-weight:normal;    font-style:normal;
}
.batch {  font-family : Batch;  line-height : 1;
}

As you can see, not a lot of complexity here.  If you'll notice, I've opted not to have a :before pseudo selector per-icon as there are hundreds of icons and that's just too much CSS work.  So instead, I've created a BI Application that works as a handy copy and paste cheat sheet to be able to simply copy the desired Icon's Unicode character and then paste it into your application if you use the Batch font.

Example screenshot below:

The Design Studio BI App (1.3 format) is attached (remove .txt extension and extract the .zip), which includes the complete CSS within it.  Everything you need to either use this as a starting point with the CSS and as an easy copy and paste reference cheat sheet of all the Unicode characters.

Again, the intent here was all about convenience.  One CSS file to keep up with, no font uploading needed, and an easy approach to add icons without a lot of CSS classes involved.  You could take a similar approach with the SAP Icons font family, but I wanted so additional variety and found this nice (and free) font pack.

Enjoy!

Is Design Studio Prime time ready? :

Design Studio has been GA for more than a year now and has gone thru significant functionality enhancements since the first beta release in late 2012. DS 1.3 was released at the end of May 2014 and has major feature enhancements which make it a serious contender for any Dashboard project you have coming up.  Design Studio, with the current release, provides the ability to create great looking dashboards which can be consumed from both desktops and mobile devices.

Design Studio definitely has shortcomings, and whether you can use Design Studio for your project will depend on the specific features you are looking for and also the data sources you are planning to use.

In this blog we will look at the current state of Design Studio (strength, limitations and also some frequently asked questions from customer who are considering Design Studio).

What are the strengths and limitations with the current release of DS 1.3?

Strengths:

• Tight Integration with SAP BW and SAP HANA datasources and the ability to leverage the native datasource functionality for variable handling, filtering, drilldown etc.

• SDK: Availability of SDK for custom component development for partners and customers. SDK definitely helps with filling some of the gaps in Design Studio by creating custom components and increasing customer adoption.  The SAP Partner ecosystem has been very active in developing Design Studio add-ons, which fills some of the gaps in the current Design Studio release. The ability to use of D3JS and other JavaScript based visualizations library makes Design Studio easily extendable for creating any custom visualization.

• Mobility: You can easily create Design Studio dashboards which can be accessed from your mobile devices. SAP also provides templates which can be used as a starting point for the dashboards, then can be deployed on mobile devices.

• HTML5 Support: HTML5 allows developers to create state of the art UI, leveraging some of the latest functionality available for standard web development.

• Ability to create Planning applications: With the release of Unified BPC, this becomes more relevant for customers who are using BPC and SAP BW-IP.

• Flexible deployment options: Design Studio provides various options for deploying the application (BOBJ BI Platform, SAP HANA and SAP BW/BI JAVA)

• SAP has been providing FIORI based templates which can be used as a great starting point for application design.

• Integration with Lumira (future roadmap)

• Alignment with SAP’s roadmap for Dashboard Design.

Limitations:

• Lack of advanced visualization and customization capabilities:

1. Fewer Chart Types

2. Less control over chart properties at design time and runtime

3. Lack of lasso charts

4. Inability to use themes

• Lack of Out of the box Geo visualization:* (this is planned to be addressed in the next couple of releases). More clarity on the solution details will be helpful, whether this will be based on a 3^rd party provider (ESRI, Navteq etc.) where the customer needs to buy additional licenses etc.

• Performance with multiple datasources: Design Studio processes each datasource defined in an application sequentially, and this seems like a major drawback from an application performance standpoint. There are different options to do background processing of datasources to optimize the performance.

• Lack of local calculation: Ability to do calculations at the data source level.

• Lack of seamless integration with other BOBJ BI tools. It will be great to see BW RRI type functionality to integrate various BOBJ tools without having to use custom OpenDoc URLs to pass parameters.

• Limited support for Universe based data sources:

1.     Multisource Universe support

• Lack of more data source support.

1.     Local Data: This was a great feature in Dashboard Designer where the developer could use local data from a local Excel file to create a rapid prototype. This helps in an agile development environment.

2.     Web Service data source

• Lack of ability to schedule in the background and broadcast. *

• Lack of ability to use standard HTML and JavaScript functionality. BIAL is great, but if SAP can also provide support for standard HTML and JavaScript functionality for advanced developers, Design Studio can be more powerful.

• Lack of Advanced analysis capabilities*: This is feature lot of BW/BEx Web customers have been waiting for migrating some of the existing BEx Web scenarios.

• SDK Limitations:

1.     10,000 cell limitation

2.     Lack of true hierarchy support

3.     Ability to manipulate datasources in SDK. Example: It could be used for what-if analysis.

*In the list features available in Design Studio roadmap

See below a comparison of some of the core features between Design Studio and Dashboard Designer

How is Design Studio Performance?:  The answer here is “it depends” on various factors:

a.    Design Studio Application Design

b.    Datasource query design/performance

c.    BI Platform performance (or the Platform which you are using for Design Studio deployment)

d.    The Version of Design Studio - There have been several performance enhancements available with the latest Design Studio releases.

Please note that Design Studio executes each Data Source defined in the application sequentially, and the performance of the Dashboards depends on the number of data sources defined in the application.

There are also several blogs and OSS notes on this topic available on SCN.

How easy is it to learn Design Studio?

For people who are used to WAD, getting up to speed with Design Studio is relatively easy.  Design Studio provides an easy to use UI and scripting using BIAL, and is easier than JavaScript based script generator in WAD (even though WAD was more flexible since we had full JavaScript features). If you are coming from a Dashboard Designer/Xcelcius background, it will take some time getting adjusted to the new UI and scripting, but the learning curve is not steep.  I want to stress the fact that scripting in Design Studio is not hard and the editor provides input help for various properties which we can use, it just takes some getting used to. For more complex application design CSS knowledge will be helpful.  SDK based add-on development requires HTML and JavaScript knowledge.

Overall, Design Studio is a great tool with a lot of potential for creating Powerful BI Applications. It is still not at a point where you can cover all the use cases supported in Dashboard Designer/Xcelcius and Web App Designer (WAD). With the enhancements in the current release, we can see SAP’s commitment towards closing these gaps in Design Studio.  I am really looking forward to the future releases where we can see the gap becoming narrower and also a tighter integration with Lumira.

I recently received a request to incorporate a gauge component in my Design Studio dashboards. The higher-ups had seen an Xcelsius dashboard utilizing gauges, and wanted the same functionality in the dashboards I was building. As we all know, a gauge component is not included out-of-the-box with Design Studio, and searching on SCN turned up nothing but requests from others for the same component. So, with my limited knowledge of HTML and absolutely zero experience with JavaScript, I decided to roll up my sleeves and build one myself. The following is a brief chronicle of the process. This is not meant to be a literal step-by-step tutorial, but to demonstrate the thought process behind the creation of the component and provide direction to those looking to create something similar.

I started with a copy of the clock component provided in the DS 1.3 SDK Samples pack, and followed the steps in section 3.2 of the Design Studio SDK Developer Guide to rename the proper components of the extension.

I removed the hour and minute hands by deleting the appropriate sections of the component.js file. I recolored the outer boarder with a gradient fill and added an inner boarder with the reverse gradient fill to give a 3 dimensional look to the exterior ring. To achieve the correct dimensions, I increased the UNIT variable to 145 (from 100) and moved the tick marks outwards by changing their respective start/end variables.

I wanted the number of tick marks to be dynamic, so I created user inputs in the contribution.xml for the number of major and minor tick marks to create. Using these variables, I changed the for-loops which draw the hour and minute tick marks to create the specified number of tick marks with equidistant spacing across the upper 2/3 of the gauge face.

I then changed the look of the gauge needle by editing the "draw second hand" section of the component.js file. To set where the needle is pointing, I replaced the variable "seconds" with one that the user can input either in the properties pane (in the contribution.xml) or with a setValue method (in the contribution.ztl). I created three triangles which together form the needle. The shading of the needle changes as the needle crosses the direction from which the light appears to come from (top left corner). I also embellished the "boss" by adding some transparency and a linear gradient.

To emulate the Xcelsius color ranges in the gauge component, I created arcs that rest above the ticks that are colored red, orange, yellow, and green. The positions of these ranges should be input by the user, so I created inputs in the contribution.xml for the ends of the red, orange, and yellow ranges (each range begins where the previous one ends -- red always begins at the minimum, green always ends at the maximum). I also created a setting that allows the user to select a continuous color distribution across the range instead of the discrete sections.

I wanted the option to have numbers on the dial, so I again created a user option to display numbers. The numbers are created when the tick marks are drawn by rotating the canvas inside of the "for" loop, placing the number text in the correct location, and rotating the canvas back before the next loop iteration. Correct placement of the numbers was moderately difficult to accomplish, mostly because by this point I had lost track of which direction the canvas was rotated and, subsequently, how to place the labels in the correct position relative to the center of the gauge. I created user inputs for the minimum and maximum of the dial, and allowed the gauge values to scale with the number of major tick marks the user selects (calculated based on the loop counter, the step size, and the min). One side effect of this approach: Since the labels are integers, we get some interesting results if the user selects a number of tick marks which does not evenly divide the range, as seen below.

The position of the needle is calculated based on the value (input by the user either in the properties pane or with the setValue method) relative to the max-min range (as seen above, if the value is 50, the needle points to 50 regardless of the min and max). As a finishing touch, I created a label in the bottom portion of the gauge to display the value the gauge is currently pointing to, as well as a user definable unit for the value (such as '%' or '$'). This label can also be turned on and off.

I decided to add a bit of a "reflection" to the dial to simulate it being covered in glass. Then, last but not least, I let the user choose a "theme": the default 'silver' or a slick 'black'

So ends my first adventure using the Design Studio SDK, the creation of my first custom component, and my first contribution to SCN. Your questions, comments, and suggestions are always welcome in the comments section below.

-- Nick Stein

Hi all,

in my training sessions for Design Studio I often get the question if it is possible to make the "drill" navigation style like known in web Intelligence available in Design Studio.

If you do not know what I mean with the drill navigation here is a short description:

Lets say you have a pre defined navigation path like Country, Region, Customer and a crossable showing the Country.

The user wants to click on the Country he is interested in and automatically this table navigates down to the Regions of the selected Country.

Clicking on one of the Region it shows the Customers. It is like what BEx clients know as "Filter and drilldown" functionality in the context menu of tables.

To navigate back the path upwards you can think of having a back button or something like that. And to visualize the actual navigation status you will have a bread crump text information.

In the end this szenario might look like this:

If you like use these reproduction steps to adopt it to your applications.

1. Create your Datasource (DS_1) showing Country in the Rows

2. Add a Crossable showing DS_1 and a Text component with Text "You are here: Country"

3. Add a button with the label "Back to start"

4. Create a Global Script Variable called "level" and define the default value as "country"

5. In the properties of your Crossable enable the selection option

6. Now define the onSelect code. The logic is...

• depending on the actual level the filter for DS_1 has to be set,
• the level variable has to be set
• the actual dimension has to be removed from Axis,
• the next dimension as to be placed on the Axis,
• the Breadcrump Text has to be changed.

Find the detail code for the Crossable and the Button in the attached code.txt file

Of course there are adoptions to more levels possible or e.g. that you jump back to the start or the region when you select a customer, and so on...

General Remark: This scenario only make sense if you have a real predefined way to drill through your data. This is not suitable if you want to enable "free-style" navigation for your user.

Update (July 3):

The Utility Pack has been updated with this example: Design Studio 1.2/1.3 SDK - Design Studio Utility Pack

Original Post:

I've been playing around with D3 again and thought I'd see how well some of Mike Bostock's example visualizations would port over to Design Studio.  I decided to focus on hierarchies in this experiment.  Thinking through what hierarchies are about, they are a parent-child relationship and in terms of visualizations, that usually comes in the form of a tree, or a sum of parts chart like a treemap or heatmap.  One of Mike Bostock's visuals that I liked was the packed circles visualization:

References:

1. Circle Packing:
   Circle Packing
2. Flattened Version:
   Bubble Chart
3. Zoomable Version:
   Zoomable Circle Packing

Each of these charts has a few advantages and I'll leave it to the eye of the beholder to decide which, if any, offer some meaningful functionality.  For the scope of this exercise, I focused on the flattened version and the zoomable version.

Let start at the end (pictures!) for those who do not care about the coding part:

And, an animated GIF showing the zooming at runtime.  (Click Image if not playing):

Note: Labels can be shown however I've turned them off so that I didn't have to black out a bunch of data for this blog.

With the end out of the way, some boring technical code stuff for those still reading...

1. The first thing I had to do was figure out a way to convert an SDK hierarchy into something that D3's pack functionality would take.  Refer to the getHier function in my code to see how this conversion was done.  This was pretty straightforward however I'd still love for SAP to make available a means for interacting with the datasource with our SDK components instead of relying on a standard component to expand nodes.
2. I then took Mike Bostock's sample D3 code and began to port it over to the SDK.  Both are JavaScript based so not much had to change, aside from some 'this' and 'that' scoping, and changing how the zoom out event handler worked for the zoomable chart.
3. I ran into one little wrinkle with the zoomable chart, where the d3.interpolateZoom was not available to me.  It turns out that this does not come out-of-box with D3 v2 that DS comes with, but rather as a plugin.  This wasn't a huge showstopper however I'd love to see SAP include d3 v3 in their next release.  After pulling down the javascript plugin, I added it as another jsInclude in the contribution.xml and moved on.

The end result was pretty cool from a visualization standpoint.  Since this was just a Monday morning mental calisthenics exercise, there's a lot that could be added to it later, but are not included in this version:

1. An onclick handler to provide a mechanism to use a selected node in BIAL scripting.  This would be cool to make the visualization work as a selector component.
2. Different color palettes
3. Selecting a measure column (right now it'll just pick the first column in your Measures structure, if you need to specify a different column, use the 'Sizes' data selector in the property panel)
4. Showing the measure values in the labels or tooltips.  I just didn't get around to it but would be trivial to get working by studying the code.

I will release the source code later today on my GitHub repo link that you can find in my Utility Pack blog post (Design Studio 1.2/1.3 SDK - Design Studio Utility Pack).  I will also update the deployable version for those of you who don't want to package it themselves in Eclipse  (Same post).

Enjoy!

AS Design Studio is executes BW Queries in serial mode. I hope in feature release parallel execution process would be included. To show the data from the same data source in multiple charts/components without editing the initial view of the DS- You can follow the below process.

Example:

In this example I need to show 0FIAR_CO3 data in Cross_Tab and Chart.

Just in the Applicationa-->  Properties--> Events--> On Startup

Browse and mention below script. Modify the script according to your requriment.

if (CROSSTAB_1.isVisible() == true)

{

       DS_2.setFilter("0COMP_CODE", "2000"); 

}

if (CHART_3.isVisible() == true)

{

       DS_1.setFilter("0COUNTRY","GB");

}

You can set filter on array of the values also.

Result:

Reference Link:

http://scn.sap.com/community/businessobjects-design-studio/blog/2013/06/15/new-in-ds-11-variables-and-calculations

Hi all,

I would like to create a summary where all the Design Stuio SDK components are listed. This is my starting point... feel free to send me information to other components and I will add them to this list asap.

SDK Extension for sale

SDK Extension for free

The following question was asked in the SCN forum: Convert String to Date - DS 1.2

"Has anyone converted a string date value i.e. 41517 = 8/31/2013 in Design Studio 1.2?

Is there a CAST function or a method that would convert the example to a Date data type?"

I have only the newest version of Design Studio 1.3 so I have used whatever is available in DS 1.3 to accomplish this requirement.

Design Studio 1.3 offers currently the following functions/methods that can be utilized in some way:

I have used the following 4 of them:

• Convert.indexOf()
• Convert.subString()
• Convert.stringToInt()
• Convert.floatToString()

I managed to implement a solution via scripting that would extract the year, month and day from a string number like: 41517

See the attached txt file which contains all the scripting code and is the main part of this blog post.

I have used it in the "Application > On Startup" Event.

The code contains also some hopefully useful comments. (actual code is maybe only half of the file, at the top there are a lot of comments and at the bottom only some debug related information)

I hope you can get some new ideas about the scripting possibilities and how can some of them be used in a real world example.

The script is not intended for production use. Further testing would be required. It can be used as a starting point. Some things can possibly be written/accomplished in an other and perhaps better way too.

The main challenge was to figure out a logic to deal with leap years. An interesting information about leap years that was new to me is: "Years that are divisible by 100 are not leap years, unless they're also divisible by 400."

But this was not considered in my code logic so far anyway. So starting with the year 2100, dates after that might not be correct. It is left as an exercise to whoever would like to calculate such a date conversion in Design Studio without date functions to think about all the pitfalls, if possible extend the code and test it properly.

I have tested the code for some other string number dates too. I tested it up against MS Excel. If you copy such a number to an excel cell and change the formatting of the cell to a Date format, it will convert it to an actual Date with year month and day. The numbering begins from 1 which equals/represents the date 1.1.1900. Here is the list of numbers that I tested and passed the test comparison with Excel:

My test DS application has only some text components:

Result in a Web Browser (input is the string 41517, output is the correctly extracted date 31th August 2013):

My recommendation:

Because of the currently missing built-in Design Studio functions for such date conversions you should rather prepare the data beforehand (BW, ABAP, HANA, SQL, ...) in a way you need it later in Design Studio so that you do not need to implement any complicated time-consuming error-prone logic there for something for which already standardized solutions exist in other technologies.

But I do hope that in a future release there will be some further helpful scripting functions for data manipulation that will simplify and accelerate the scripting experience/development.

I recently came across a customer who wants to use a Design Studio result set into a custom table component, but wanted the result set as an array, instead of a JSON.  Those of you who have played around with the Design Studio SDK have probably encountered the two different kinds of result sets before. The first kind comes into play when the designer is asking for a subset of the result set (e.g. a single column), she gets two files back; one with the metadata structure and the second with the actual data.  The second kind of result set comes when the designer asks for the entire result set. It combines both into different forks in the same JSON structure.

This is a bit more complex than a simple array.    So I created a small github project with a javascript library for doing this kind of transformation.

davidhstocker/SAPDSResultSetTransformer · GitHub

The centerpiece of the project is a javascript file containing a single function.  tuplesformatTransform.js contains the reformatIntoSimpleTuples() function.  reformatIntoSimpleTuples() transforms the single JSON result set into a list of tuples for easier consumption in some cases. 

reformatIntoSimpleTuples() takes two parameters:

• zenResultSetJSON = the result set that you wish to transform.  It must be of the single JSON result set type as described in the Design Studio developers’ Guide.
• displayType = the display type (‘key’ or ‘text’) that you wish to use.  You fill your result set tuple list with either key or text values.

reformatIntoSimpleTuples() holds most of its variables in the local scope.  It creates two in the global scope for use in other places:

• headerTuple compresses the (potentially) multi-leveled header into a single header line, with the stacked text concatenated into each cell.
• rowTuples contains each row with the following format: [row measure members1, rmm2, ..., rmmN, row dimension members1, rdm2, ..., rdmN, data1, data2, ..., dataN]

So a the headers of a result set that looks like this:

Would be transformed to this headerTuple: ["", "Sales Q1 2014", "Cost Q1 2014", "Sales Q2 2014", "Cost Q2 2014"]

Also included in the github repo are two sample files to demonstrate the function in action.

• entureResultset.js contains an example result set; what resultset being fed to a Design Studio SDK component might look like.
• html5.html is an example html file, with an SAP UI5 table.  The html file’s script calls reformatIntoSimpleTuples(), using the sample data from entureResultset.js and puts that data into the UI5 table.

Hi there!

I approached to design studio 3 weeks ago and i started developing some custom components.

My first work is based on this blog post:

Design Studio 1.3 SDK - Creating a custom gauge component 

by Nicholas Stein

Following his design i wrote my code with some changes/perks.

The component is completely scalable and customizable.

You can choose:

• Main Color.
• Tick and text color.
• Needle Color.
• Color and scale(and if gradient).
• If you want numbers and the start and end.
• Title and showed value in the middle.

I added an animation on the needle, and a method that you can call from DS for moving it.

That is the base version and the properties page.

And these are some custom versions:

Here the GitHub Repository:

Antoninjo/DesignStudioCustomGauge · GitHub

I'm sorry for my really chaotic code and my multilanguage comments, i will fix it soon.

I hope it could be usefull.

For any problem or suggestion please write a comment below and i will solve it as soon as possible.

Best Regards

AC

Hi there!

Today i want to share with you my second "self-made" component.

Since SAP DS1.3 still does not have a built-in pdf export system, i implemented a component by myself.

The component is client side(totally javascript), so it could not work with some browsers (IE).

I used many MIT Licensed javascript libraries.

First of all, the jsInclude tags in "contribute.xml"

<jsInclude>res/js/jspdf.js</jsInclude><jsInclude>res/js/jspdf.plugin.addhtml.js</jsInclude><jsInclude>res/js/jspdf.plugin.addimage.js</jsInclude><jsInclude>res/js/jspdf.plugin.autoprint.js</jsInclude><jsInclude>res/js/jspdf.plugin.cell.js</jsInclude><jsInclude>res/js/jspdf.plugin.from_html.js</jsInclude><jsInclude>res/js/jspdf.plugin.javascript.js</jsInclude><jsInclude>res/js/jspdf.plugin.png_support.js</jsInclude><jsInclude>res/js/jspdf.plugin.sillysvgrenderer.js</jsInclude><jsInclude>res/js/jspdf.plugin.split_text_to_size.js</jsInclude><jsInclude>res/js/jspdf.plugin.standard_fonts_metrics.js</jsInclude><jsInclude>res/js/jspdf.plugin.total_pages.js</jsInclude><jsInclude>res/js/html2canvas.js</jsInclude><jsInclude>res/js/FileSaver.js</jsInclude><jsInclude>res/js/component.js</jsInclude>

As you can see, i use a set js files from jspdf library - Link here : MrRio/jsPDF · GitHub

Then html2canvas that jspdf requires for working. html2canvas

And finally FileSaver.js that jspdf uses for saving pdf. eligrey/FileSaver.js · GitHub

Followin my component.js code:

this.init = function() {  this.button   = document.createElement("button");  this.button.type = "button";  this.button.innerHTML = text;  this.$().append($(this.button));
};

In the init function, i create and append the button to the handler div.

//FUNCTION CALLED AFTER RENDERING
this.afterUpdate = function() {            that.$().click(function() {            that.fireEvent("onclick");            var svgElements = $('body').find('svg');            svgElements.each(function(){                 var svg = this;                 var img = document.createElement("img");                 img.className = "screenShotTempCanvas";                 svgAsDataUri(this,1,function(uri){                      svg.className = "tempHide";                      $(svg).hide();                      var parent = svg.parentNode;                      img.src=uri;                      parent.appendChild(img);                      img.onload = function(){                      };            });  });

Since jspdf library cant process svg part of code i have to convert them in something else, i choose to convert all the svg tags of the application in base64 images. In the code above i look for all the svg tags in the document and then i replace them with img tag containg themselves as Base64 image.

var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(document.body,function() {  if(pdfMethod == 1){            pdf.output('save','example.pdf');  }else if(pdfMethod == 2){           pdf.output('dataurlnewwindow');  }else{           pdf.output('datauri');  } $('body').find('.screenShotTempCanvas').remove();           $('svg').show();  });
});
that.button.innerHTML = text;
};

Then i use jspdf addHTML method to generate a pdf with all the visible content of the page(including the img tags created before) and, basing on pdfMethod variable, save the file or open it in new or same window. Then i remove all the img tags and show again the svgs.

Here some screenshot of the results:

                                                                         pdf-browser

and the github repo:

Antoninjo/DesignStudioPDFExportComponent · GitHub

That's it.

I hope that it will be useful.

Cheers

AC