Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
mike_howles4
Active Contributor

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

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!

48 Comments
Labels in this area