Skip to Content

With the 1.1 now in GA i thought i would address some of the new features in the new version. In this blog I will look at the CSS Class option and what you can do now using using CSS class with a little help of the Global or local variables.

A very nice feature in version 1.1 is the possibility to add css classes to the application. Upload a custom CSS file to the application and you have the option to set the option CSS class for many components.

A CSS class starts with the name of the class and between brackets {} you are able to set up the lay out.

For example.

If you want to have a really fancy looking button you can insert CSS code like this:

.button

{

border:2px solid #a1a1a1;

padding:10px 30px;

background:#dddddd;

border-radius:25px;

font-family:”Verdana”, Arial, serif;

color:rgb(128,128,128);

box-shadow: 5px 5px 2px #666666;

font-size:150%;

font-weight:500;

}

In my new weather application I use this class mentioned above for textboxes that are used as buttons the user can press. The screen then looks like this:

/wp-content/uploads/2013/06/example_1_227838.jpg

Now we have a look at the same screen but now with a button pressed. The listbox and the textboxes also have css classes appointed. The graphs have been edited by making use of the new layout possibilities.

/wp-content/uploads/2013/06/example_2_227839.jpg

Note that the button that was last pressed is a different color. You can set the css class dynamically. For example if you wish that the last button pressed looks different than the rest you simply add a line of code to the on click handler of the button.

The code for resetting all the buttons then looks like this

/wp-content/uploads/2013/06/code_227861.png

each button has a version of the code above in their on click handler with setting themselves to the class “ButtonSelected”.

More dynamics.

In the scorecard example we had to write a lot of code to set the images of the scorecard. We now can replace this by making CSS classes for a red light, a yellow light or a green light. But why stop there, you are able to set up a CSS class for every conditional format value possible.

We now can be much more flexible with the use of a local variable.

We even could have shrunken it to one line by not assigning the value to the variable first.

var AlertLevel = DS_TEMPERATURES.getConditionalFormatValue(“4SXOC7KKW08KCIPZNU6CUKIWZ”, {});

Text_1.setCSSClass(“alert” + AlertLevel);

The returned value of the getConditionalFormatValue can get a value of 0 (no format) or 1-9. By setting CSS classes alert1 through alert9 you now are able to build a scorecard without big if then trees to catch all the possibilities. Let the bex query worry about the exceptions and you simply use the passed value to apply a CSS class.

This first look at CSS classes shows a lot of new possibilities for layout. By building classes and using them throughout your application you can apply a lot of layout to your application. If a change is made to the CSS file that change will be set for all the components that use the CSS class.

The second very useful part are the dynamics. All kinds of scenario’s become available with setting the CSS class dynamically in your script.

This is only one new feature. In future blogs I will look at other new features of 1.1

To report this post you need to login first.

18 Comments

You must be Logged on to comment or reply to a post.

  1. Florian Kratz

    nice overview to handle css classes.

    but did you ever ran into cache problems?

    i add some classes to my custom css file but they will not show in my report 🙁

    the css class is defined in my panel as well in my css-file

    (0) 
    1. Jeroen van der A Post author

      hi Florian,

      thanks. personally i havent seen any problem with cache problems. Do you have them at design time or run time?

      With the CSS i don’t know what’s happening at your app. If there is a slight error in the CSS it is possible that the application doesn’t pick up the classes.

      kind regards,

      Jeroen

      (0) 
      1. Florian Kratz

        after cleaning the cache of my IE the css code works fine 🙂

        now i have the next css-problem:

        if i use “mobile iPad” as theme for my report, all css defined colors will be shown as black (default color) 🙁

        do you ever faced this problem ?

        (0) 
        1. Murali Balreddy

          Maybe the theme takes precedence over custom styles for certain objects.

          I also have caching issues. I have to close and re-open Design Studio for the new changes to take effect.

          (0) 
  2. Murali Balreddy

    Hi Jeroen,

    Is there anyway to use styles on the button component instead of simulating a button using text component? I would like to use the hover and active styles instead of scripting using SetCSSClass.

    Thanks,

    Murali

    (0) 
    1. Jeroen van der A Post author

      Hi Murali,

      on the button you only have the on click handler, so you cannot do anything if someone hovers over the button. You can use the image component. There you can set an image for standard, on hover and on click.

      If you would place that image over the button you could somehow influence the view of the button without using script. you could upload an image of a yellow square and set the transparency low, if someone hovers over the button the image would give a yellow

      color to the button.

      kind regards,

      Jeroen

      (0) 
  3. Nicolas HARDY

    Hello Jeroen,

    Thank you very much for your useful post  🙂

    Do you know if any enhancements are planed for tables css customization ? Is there at the moment a way to color for example all the even rows in a first color and all the odd rows in another color ?

    Thanks,

    Nicolas

    (0) 
    1. Marco Nielinger

      Hi Nicolas,

      the built-in css-classes for that are..

      – sapzencrosstab-DataCellDefault

      – sapzencrosstab-DataCellAlternating

      Easiest way to format standard components individually ist to use something like the firebug add-in. With that you can see the different css-classes that are used.

      Compare http://scn.sap.com/thread/3365041 .

      Best regards,

      Marco

      (0) 
  4. Daniel Schubert

    Hi Jeroen,

    thanks for this nice overwiew.

    I tried to do something like you pointed out in this post. But it didn’t work.

    So I put your CSS-Class to see if I did anything wrong.

    Even then I can’t see any changes for the button – not at designtime and not at runtime.

    The only thing that changes, is the font-family and the color – nothing else.

    Do you (or anyone else) have any ideas?

    Regards

    Daniel

    (0) 
    1. Murali Balreddy

      Jeroen simulated a button using textbox. Did you use a textbox or an actual button? If you used a button component and added CSS, then not many properties will change.

      (0) 
  5. Tim Allis

    Hi Jeroen,

    I followed the steps in your blog and the button example. I can get the custom CSS to display properly at design time in the application, but only at runtime if I use Chrome. It doesn’t display properly in IE9? Have you seen this before? Is something cached perhaps. I’ve tried restarting Tomcat but that made no difference.

    I’m using Design Studio v1.1 + the same runtime version on the platform.

    BO 4.0 SP5

    Windows server and Tomcat.

    Thanks for any help.

    Tim

    (0) 
    1. Jeroen van der A Post author

      Hi tim,

      i can’t look into it at the moment, but could you clarify what you see in IE9 and in chrome?

      a problem with CSS 3 is that the different browsers do not support all of it, esspecially IE9.

      If your goal is to practice with the css i would grab some basic css from W3school.com and try it out.

      (0) 
      1. Tim Allis

        Thanks for your reply Jeroen.

        Note 1855350 does seem relevant.

        From this: “The local execution mode through Design Studio Client and NetWeaver Add-On is not effected – in those modes also Internet Explorer browser is working correctly”.

        This is what I am seeing. Executing locally and not on the BI platform works correctly in IE9.

        It seems I will need to wait for the coming fix.

        Thanks for your help.

        Tim

        (0) 

Leave a Reply