Skip to Content

UPDATE:

Anyone struggling with CSS/Font/Icon/Image issues, please read this additional blog entry – Design Studio 1.3 – Making Adhoc Analysis Template, Images, and CSS Work

Original Post:

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:

/wp-content/uploads/2014/05/sapfont_464285.png

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):

/wp-content/uploads/2014/05/sapfont2_464286.png

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

/wp-content/uploads/2014/05/sapfont3_464287.png

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!

To report this post you need to login first.

47 Comments

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

    1. Mike Howles Post author

      Tammy,

      I’ve continued to hear SAP refer to Fiori as either an ‘intent’ to deliver consumer-grade quality experience, also a ‘design principle’ in how that experience looks, and also more and less accurate, a manifestation of what SAPUI5 and sap.m components do to make this all happen.  It’s of course also a product they will sell as apps, but so I guess it’s just who is saying ‘Fiori’ and/or how it’s used in a context.  🙂   Maybe it’s just me, but it’s one of those confusing ever-changing terms.

      This is a great site about Fiori Design Principles:

      https://experience.sap.com/fiori-guidelines/index.html#SAPFiori

      Then of course there’s the product perspective:

      http://www.experience.sap.com/fiori/

      And then a SAPUI5 app inspired by those Fiori Design Principles (like the Fiori Launchpad)

      SAPUI5 SDK – Demo Kit

      (0) 
  1. Patrick Schmitt

    Hi Michael,

    that’s an interesting topic. Thanks a lot.

    By using the SDK I have an own symbol component, now. The application builder has just to chose the id as a property value and gets the depending icon.

    For your information, not all Icons are included in the files SAP-icons.ttf and SAP-icons.eot.


    Kind regards


    Patrick

    (0) 
  2. Harald Anton Mueller

    It seems the icon approach in the AdHoc Template is not working on iPad (at least if one consumes the application via the Mobile BI App). It looks as the iDevice replaces the icon-fonts with Emoji 😉

    Any idea on that?

    (0) 
        1. Mike Howles Post author

          Interesting.  I’ve not tried it myself yet from the BI Mobile app, but if it’s falling back to Emoji, I’m wondering if BI Mobile isn’t serving up the font files correctly.  Can you temporarily host the .ttf and .eot font files on a different web server and update the CSS to reflect the new URL and see if it then works?  I’m just trying to rule things out.

          (0) 
  3. Mathivanan M

    Hi Michael,

    Nice blog!! And I am bit confused as I am not much favour of this tool. Could you please tell me how to add css class(script) to design studio. If it is css style we can write the script in particular place (css style ) But What about css class? Do i need to save those scripts somewhere and use the file name?

    Regards

    Mathivanan

    (0) 
      1. Mathivanan M

        Hi Michael,

        Thanks for the blog! It helped me. In design studio I am working in SAP Businessobjects BI platform mode and I have uploaded CSS eot and ttf files in launchpad. I can see all three files in launchpad. I used some Chart ICON’s and I am able to see those chart Icons in design time

        ds mode.png

        and I can see those ICON”s if i execute in local mode also, But If I open saved application from launchpad I couldn’t see the ICON’s Instead its just displaying a rectangle

        run mode.png

        I thought it is loading for a while, But till end it is just as above screenshot.. Could you please help me!! I am able to see icons in design time but not when i execute in launchpad

        Using Design studio 1.3

        Regards

        Mathivanan

        (0) 
          1. Mathivanan M

            Yes!! I have uploaded the font files and I can see three files(.css, .eot, .ttf) in launchpad. I did as you demonstrate in that blog

            I am working in BI platform. that is tools-> preference -> SAP businessobjects BI platform. not in local mode. So whenever i save application it saves in BI launchpad too. correct me if I’m wrong.!


            I am able to see ICON’s before i execute(design time). Its just displaying rectangle box (instead icon) only when i execute on BI launchpad


            Regards,

            Mathivanan

            (0) 
              1. Mathivanan M

                Hi Michael,

                I got it. All working fine now. The mistake what i did is Design studio 1.3 was not updated in BI server. Actually it was till Design studio 1.2(previous version)

                Thanks for all your help and blogs!! Really did help!!

                Regards,

                Mathivanan M

                (0) 
  4. pramod k

    Micheal ,

    Great blog!

    Do i have to upload NEW_FONT_Design.css ,SAP_icons.eot , SAP-icons ttf  to BO repository to launch  DS application from BI launchpad   , while uploading content.biapp ?

    Thanks,

    pramod

    (0) 
  5. Michael Salvatore

    Great Blog, As those above are saying, cant seems to get this to work with BI Platform Startup. I copied the CSS file up to the platform via the Design Studio but when i reference a class in the CSS file it shows blank in the text box. Any ideas, or do you mind sharing the process on getting the right files into the BOBJ platform.

    Thanks

    (0) 
      1. Harald Anton Mueller

        You need to upload the two font-files to the same folder on the BIP, as the CSS file.

        You can do it from Design Studio via the Applications CSS Selector (where you select/upload the CSS File too). You need to use a little trick and remove the file type filter on “cascading style sheet” and the you can select the two files (.ttf and .eot). You will not be able to see these file after uploading them, but upload works.

        (0) 
        1. Michael Salvatore

          Thanks for the response Harald. How do you remove the “Cascading Style Sheet” filter on the dialog to upload the 2 font files. Have tried several things and cant seem to remove it.

          Update: Figured out out how to upload both files from editor, just insert the names of the two font files one at a time and click open, it wont tell it did anything but when you check the folder in the BIP the files will be there.

          Thanks for all your help.

          (0) 
          1. pramod k

            MIcheal ,

            I was able to upload both files to BIP but the images in application arent working . Did it work for you ?

            BIP.PNG

            (0) 
          2. Faisal Mehmood

            How did you upload files on BIP…

            Well it seems you jsut name the file in CSS upload dialog box, thought it is not visible but it still loads. Is there any other way?

            (0) 
  6. Shlomi Weiss

    Hi

    Great article

    I fount the 3 files under the folder

    “C:\Program Files\SAP BusinessObjects\Design Studio\plugins\com.sap.ip.bi.zen.content_13.0.3.201405141058\templates\Desktop\TEMPLATE_ADHOC_ANALYSIS”

    But I don’t know how and where to upload them to the server???

    When I try to build a new app from a template, I get error messages like:

    “MIME object “ADGPC05ZUOFDPFAAIRP01_Q/NEW_DESIGN_FONT.css” does not exist”

    Please help

    Shlomi

    (0) 
  7. Mathivanan M

    Hi,

    Will this work in local mode? I have saved .eot, .ttf and .css in local repository folder. But when I use ICON_MONEY in css class of text component its just blank. I am not able to see any ICON. and do i have to add css file name in custom css of application properties. if so can you please tell me the format? I am new to this tool. Please help me

    Thanks in advance

    Regards

    Mathivanan

    (0) 
    1. pramod k

      You need to add CSS file name in custom CSS property in applicaton .

      I beleive its <filename>.css

      It should work locally . Just make sur you put css file in same folder of your application

      (0) 
  8. Marius Raileanu

    Hi Michael,

    Great article!

    I have a small issue, it seems that i don’t have all the icons from SAP-ICONS

    I don’t even have your .ICON_MONEY example and I also check if we have the same version of files and it seems the size and date are the same (21-03-2014 for .eot and .ttf; 22-04-2014 for .css file).

    Would be really nice if there is a way to have all the icons (or most of them) from SAP-ICONS. (i guess i need them in .eot file and then add them in .css file?will be really helpful if there is any .eot and .css which already have most of them)

    Thanks!

    (0) 
  9. Markus Mehlich

    Hi Michael,

    Thanks for this article!

    Is it possible to create also an mouse-over text for this Buttons?

    many thanks in advance.
    Best regards,

    Markus
    .

    (0) 
  10. Matias Mannino

    Hi Michael,

    Great Post, really help me.

    Now I wanted to know if it is possible to use ICONS inside the crosstab when we use the alerts.

    How to show status icons for BEx Exceptions in Design Studio

    Insted of using the backgroung-image or that image, use the ICON_ARROW_UP

    .myAlerting .sapzencrosstab-DataCellDefault.sapzencrosstab-DataCellAlert1Background

    {

    color: rgba(0,0,0,0.0);

    background-image: url(‘status_1.gif’) !important;

    background-repeat:no-repeat !important;

    background-position:center top !important;

    }

    • .ICON_ARROW_UP:before { 
    • font-family: ‘SAP-icons’;             
    • content: “\e1e4”;     
    •  

    Hope someone can help me with this, I think is going to be very usefull for everybody.

    Thanks and best regards,

    Matias

    (0) 
    1. Mike Howles Post author

      Matias,

      That’s a really good idea.  I don’t have time this week to figure out if we can do this but I’d really like to try to get that to work.  I agree that would be a useful approach.

      (0) 
      1. Matias Mannino

        Hi,

        Well with the help of a friend we were able to make it work.

        .myTrend3 .sapzencrosstab-DataCellDefault.sapzencrosstab-DataCellAlert1Background:before
        {
        color:green;
        font-size: 15px;
        line-height: normal;
        text-align: center;
        font-family: ‘SAP-icons’;
        content: “\e1c1”;
        speak: none;

        }

        .myTrend3 .sapzencrosstab-DataCellDefault.sapzencrosstab-DataCellAlert1Background .sapzencrosstab-DataCellContentDiv
        {
        display: none;

        }

        the only thing missing is to fix the width of the columns

        .

        sapzencrosstab.PNG

        If someone got any clew how to fix this, I will be grateful

        Thanks and best regards

        (0) 
        1. Mike Howles Post author

          That looks awesome 🙂   I think resizing the header cells will prove to be tricky but don’t let me discourage you!  (The reason being I think the width measurements are done in JS and then applied inline to the TD cells themselves, but I might be off-base here)

          I’d love to see you get it working!

          (0) 
          1. Matias Mannino

            Well got it working

            Change the Display:none with visibility:hidden; because it broke the format of the columns

            .myTrend3 .sapzencrosstab-DataCellDefault.sapzencrosstab-DataCellAlert1Background:before
            {
            color:green;
            font-size: 15px;
            line-height: normal;
            text-align: center;
            font-family: ‘SAP-icons’;
            content: “\e1c1”;
            speak: none;

            }

            .myTrend3 .sapzencrosstab-DataCellDefault.sapzencrosstab-DataCellAlert1Background .sapzencrosstab-DataCellContentDiv
            {
            visibility:hidden;
            text-align: center;
            height:0px;
            }

            .sapzencrosstab-DataCellAlert1Background.sapzencrosstab-DataCellDefault {

            text-align: center;

            }

            But to a friend of mine it worked with the display none like this, don’t know why it didn’t with me. Maybe because I was using the Blue Crystal template

            .myTrend3.sapzencrosstab-DataCellDefault.sapzencrosstab-DataCellAlert1Background

            {

            width: 65px;

            }

            .myTrend3.sapzencrosstab-DataCellDefault.sapzencrosstab-DataCellAlert1Background:before

            {

            font-size: 14px;

            font-family: ‘SAP-icons’;            

            content: “\e1c1”;      

            speak: none;

            color: yellow;

            }

            .myTrend3.sapzencrosstab-DataCellDefault.sapzencrosstab-DataCellAlert1Background .sapzencrosstab-DataCellContentDiv

            {

            display: none;

            }

            Michael, I am having troubles hiding the folder where I put all the images and css. If I hide it with Access to the subobjects. The dashboard doesn’t show the images and the icons., everything else Works even links to reports in that folder. 

            When I grant Access to the folder the images and icons work.

            User security for the Hide folder

            Security.PNG

            This is how I want it to look, but the images and icons dont work

            Folders.PNG

            Changing the security to allow access to the object and not only the Subobjects, everything works but I want it to be hidden

            Hide_Folder.PNG

            How you guys do it, leave a folder with access to everybody on the bottom?

            Cheers Matt

            (0) 
  11. Denis Reis

    Hi Michael, great post. Thank you.

    By the way, you can easily create your own icons using css.

    For instance, we want to use the world icon from Earth – Free Shapes icons instead of SAP’s icon.

    Just add following css to your element (or create a correspong class):

    max-width:            16px;

    max-height:           16px;

    background-image: url(‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAABAklEQVR4AYXRoUskAQBG8d8MWEwLY1BYw4qT1rRBBKsmNZptK1gmeDBcuYObgSsHB8vVKxeOy7rDgoYNhsU/4Noa1jKuGDYJLsq4aap88b3wwQMglimUSoVMDAAEEqWvdkXWffPPs0Sgxn1zTcAvlVeVSl8AJCq/wZLIZ1W9hFDs3KFTNN149AUA38WBTOQMbItMDOW6tgB5qOMvSI38tKltRRtAJ1C61LXhDjDTAMBDiDGWATRw4cix1AwKOyD1VL+fuwWfFGR+ANirlX2Qy4hNrAL4b4ENQGQshsS1EPDHQnCC0EBCiJ4XQy0wAldaht70UMeayh1Yk7qXm9axPsr9DgweWHFP23znAAAAAElFTkSuQmCCcdf96efa4c63b6b285a45a466e0d497e’);

    This principle allows you to add a ton of different icons.

    Best regards

    Denis

    (0) 
      1. Mike Howles Post author

        This blog was specifically about SAP’s approach which was using a font file approach.  There’s nothing wrong using an actual image (base-64 or not.)  I used that approach (or even the sprite sheet approach) a lot.  The nice thing about using a font is that it’s scalable with CSS and can be colored with CSS also.  Of course the trade-off is that it’s only one color.

        Pros and Cons of both!

        (0) 
    1. Mustafa Bensan

      Hi Denis,

      If I understand correctly, it seems that under your suggested approach we are really just embedding a PNG image of the icon as described in the post How to embed images inside of a Design Studio App without uploading to server, which means it is not scalable.  So why not just use the technique described in the Design Studio 1.2/1.3 – New Icons with minimal CSS and no uploading font files! post to embed additional icon fonts?

      Regards,

      Mustafa.

      (0) 
  12. Tobias Maier

    Hi,

    i built a design studio application using the CSS with the SAP Fonts. When i open the application from the BI Launch Pad with an Administrator account i can see the icons. If i try it with a user account i cannot see them.

    Which kind of acces rights  should a user have to the folder where the CSS an the fonts files are stored ?

    Regards,

    Tobias

    (0) 

Leave a Reply