A look at Design Studio 1.6: Integrated CSS editor

Posted by on Nov 29, 2015

SAP BusinessObjects Design Studio 1.6 has just been released, so it is time to really check out the new features myself! I’ll start with one of the more hidden features in the previews/roadmaps, but in my opinion a very imported productivity gainer: the integrated custom CSS-file editor.

Using a custom CSS-file in Design Studio was pretty frustrating. You had to edit the file in a tool like Notepad++ and upload it to the BI Platform via the Application’s properties; a lot of repeating manual steps. Let’s have a look at how SAP improved this in this update.

Design Studio 1.6 has a new button Edit Custom CSS… in the menu bar.


After clicking this button a CSS-file can be selected from the BI Platform, or a new (empty) CSS-file can be created on the BI Platform.


The CSS-file opens in a new tab. Just as with the Design Studio apps, the asterisk (*) sign before the file name indicates that the file has been changed and hasn’t been saved yet. Here we can define the custom CSS classes. As you can see in the screenshots below, the editor supports syntax coloring/formatting: comments are italic and blue, class names are green,  properties are purple, property values are italic and blue etc.

Also, just as in the Script Editor for JavaScript we can use the CTRL-SPACE shortcut to show proposals for CSS properties and values. This will increase development speed, as less errors will be made searching for the correct syntax and less checking of the W3Schools CSS reference is necessary.

In the examples below I activated the content assistance after typing font and font-weight.


Read More

Posted in: SAP BusinessObjects Design Studio

New SAPexperts article: How to Use CSS in Design Studio

Posted by on May 1, 2014

I wrote another article for the SAPexperts online knowledge base. In line with some of my recent posts here on my blog this one is all about CSS, but now more from a basic, 101 course standpoint.

In this article I give a basic introduction to the language of CSS and explain how it can be used in combination with Design Studio, either on a local installation or with a connection to an SAP BusinessObjects BI4 platform or an SAP NetWeaver BW environment. I also discuss how you can change the default CSS styles of the standard Design Studio components.

If you have an subscription to the SAPexperts BI hub you can check the article here.


Posted in: Knowledge sharing, SAP BusinessObjects Design Studio

Custom Scrollbars in SAP Design Studio

Posted by on Apr 26, 2014

As we have seen in an earlier post we can enhance the looks of our SAP BusinessObjects Design Studio applications with the use of some CSS coding. In this post I will show you how to add scrollbars to Design Studio components and how to change the looks of them. The result of an adjusted Text component will look like this:

Some components, like the Crosstab or the Filter Panel component will activate horizontal and/or vertical scrollbars themselves when there is not enough room to display all the data. The Text component doesn’t do this and just simply expands vertically. The height setting in the component’s layout properties has no effect on this anymore.


Read More

Posted in: DIY, Knowledge sharing, SAP BusinessObjects Design Studio

DIY CSS navigation buttons in SAP Design Studio

Posted by on Mar 30, 2014

In SAP BusinessObjects Design Studio you can use the container components like a Tabstrip or a Pagebook to organize your application. The Tabstrip component already includes the tabs for navigation between the pages. For the Pagebook component we have to create our own navigation buttons.

You can use the standard button components, but these have a pretty basic look. In this example I will show you how to create your own custom navigation buttons with some CSS code and a tiny bit of JavaScript.

We will create two buttons. The button for the selected page should have a blue color, the unselected button should be white. Also, when the user hovers the unselected button with the cursor, the button should turn blue.

For this we need three CSS statements. You can add these to your custom CSS file:

  • .button_show
  • .button_show:hover
  • .button_selected

Read More

Posted in: DIY, SAP BusinessObjects Design Studio

Getting ready for SAP Design Studio with Codecademy

Posted by on Oct 7, 2012

Word got out that SAP BusinessObjects Design Studio (formerly named as ZEN) will be generally available next month! This week (9 October 2012) SAP is doing a Design Studio 1.0 Product roadmap webinar to explain this early GA and show us the future milestones of this product. If you’re unfamiliar with the whole Design Studio thingy check back at my June post on this subject.

As you can read in that earlier post I needed some JavaScript coding to create a basic interactive filter. Of course this opens up tons of options for developers; just like the possibilities ABAP gives us within SAP BI besides the standard out-of-the-box objects. But, I’m still worried about what this means for the entry level of Design Studio for new developers. Especially if they are used to SAP BusinessObjects Dashboards, which is all about drag and drop and where the only ‘coding’ is done in the Excel spreadsheet.

So it might be a good idea to pick up some basic JavaScript and CSS skills beforehand, to have at least some idea what’s going on in Design Studio scripting. I found this great site called Codecademy which offers free courses in JavaScript, HTML, CSS, Python and Ruby.

A Codecademy course starts of at the very beginning, without prior coding knowledge needed. You will learn a small bit, perform a short exercise in a coding console and the go on to the next bit. At the end of a section you have to combine all the bits in a small project. Forums are directly linked to the exercises so you can easily look for help if you got stuck on a specific exercise. This format also allows you to learn at your own speed and quickly do a few exercises if you have some spare minutes.


So start learning to code at Codecademy.com and see if you can get more badges than I got!

Posted in: Knowledge sharing, SAP BusinessObjects Design Studio