UPDATE:

1.3 SP1 Uploads all MIME types for you now it seems.  This article is only relevant if you have not gone from 1.3 SP0 to SP1 or higher!!

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:

M0.png

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

M1.png

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:

/wp-content/uploads/2014/06/m2_472116.png

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:

/wp-content/uploads/2014/06/m3_472117.png

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:

/wp-content/uploads/2014/06/m4_472118.png

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

/wp-content/uploads/2014/06/m5_472119.png

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:

/wp-content/uploads/2014/06/m6_472120.png

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

/wp-content/uploads/2014/06/m7_472121.png

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

/wp-content/uploads/2014/06/m8_472122.png

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’.

/wp-content/uploads/2014/06/m9_472123.png

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:

M10.png

.EOT File details:

/wp-content/uploads/2014/06/m_eot_472125.png

.TTF File details:

/wp-content/uploads/2014/06/m_ttf_472126.png

You should now have folder contents similar to this:

/wp-content/uploads/2014/06/m_confirm_472127.png

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

/wp-content/uploads/2014/06/m11_472128.png

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

To report this post you need to login first.

38 Comments

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

  1. pramod k

    Micheal ,

    Thanks for sharing .

    I have set same MIME type options for eot and ttf files. But i still couldnt get ICONS .

    Business objects platform is at 1.2 addon.    Is this works only with  BIP addon 1.3 ?

    ERROR [fee8f341-13f3-4a8a-b7d9-84ccb8b5937d]: Error: “Resource not found: /aad/SAP-icons.ttf, resolved to SAP-icons.ttf

    (0) 
    1. Mike Howles Post author

      The adhoc template relies on resources not available until 1.3.  (Like the Blue Crystal theme, and possibly others)

      I think you will run into a few problems publishing to BIP 1.2 version.  The biggest one will be no Blue Crystal theme so a lot will look strange.  Is that error from the BIP log files or from the Design Studio logs?

      (0) 
      1. pramod k

        Its from Design studio logs.

        I created a new  application without  adhoc template but still using SAP-ICONS .eot and ttf files  ( without Blue Crystal theme )

        Only ICONS are not working . Html styling is working .

        on the other note . Lets say if i work with 1.3 DS client tool , will i  be able to get render ICONS and styling in lcoal mode .(  i am sure it doesnt work when publishling )

        (0) 
        1. Mike Howles Post author

          Pramod,

          What does your .CSS file look like, then?  And can you confirm you are running 1.2 or 1.3 of the Design Studio tool?

          (0) 
          1. pramod k

            Micheal ,

            I took  NEW_DESIGN_FONT.css   SAP-ICON .eot and ttf files and placed in Analysis-workspace\com.sap.ip.bi.zen\repository   and i am running 1.2 Design tool . I am trying to create applciation using 1.2 design studio  tool (BIP 1.2 addon ) using NEW_DESIGN_FONT.css files .

            (0) 
            1. Mike Howles Post author

              To confirm, you’ve placed the .CSS file in the repository folder, and not in the Application Folder?  Example: your application is named EXAMPLE, there should be a subfolder under the repository folder called EXAMPLE.  Place the .CSS file (and font files) inside that folder, and not the main repository folder.

              (0) 
              1. pramod k

                i do have .CSS files inside main repository folder and  i have also placed the same .css and .eot files in BIP with exact MIME type.

                when working in local mdoel html styling is working and SAP icons aren’t rendering .

                (0) 
                  1. pramod k

                    I think so. I will try with 1.3 Design studio client tool and work with local model and see how it works .

                    Thanks a lot for helping out here .

                    (0) 
  2. Faisal Mehmood

    Thanks Michael,

    Had a question on these files. It seems .eot contains all font type.. what does ttf contains and how do we know thier MIME type and benefot of specifying MIME type while uploading on BIP.

    Thanks

    (0) 
  3. Mathivanan M

    Hi Michael,

    This is really helpful blog!! Actually I was struck how to upload css eot and ttf files into launchpad.. This blog did help me a lot.. Thank you so much!!

    Regards

    Mathivanan


    (0) 
  4. Dirk Mayrock

    Hi all,

    if you find it to complicated to upload the font files in to BI Platform like described above you can use the embedded upload function in Design Studio.

    I mean the one you typically use to upload a css file and Michael used to upload the CSS File above.

    Then you do not have to take care of assigning the right MIME content type.

    Dirk

    (0) 
    1. Mike Howles Post author

      Thanks Dirk for the tip.  Anything to cut down on the steps would be preferred!  I will attempt this method and update my blog steps upon success. Appreciate the feedback!

      (0) 
    2. Rémi Dhellem

      Thanks Dirk for this tip, but I’m not sure to understand : even if I see where to operate for css files, I don’t for font files. Where is this “upload local font file” feature?

      Thanks

      Best Regards

      Rémi

      (0) 
      1. Dirk Mayrock

        Hi Remi,

        you use the same dialog like for uploading the css. Simply type “*.*” into the File name field.

        Then you see all the files in the folder and can select the one you want to upload. 😉

        All the best

        Dirk

        (0) 
  5. Diego Torres Luyo

    Hi Michael,

    Great post. I´m having an issue when try to promotion form dev to prod using SAP BO LCM.

    I had passed two things, one by one.First the design studio app, then the folder wich have the .eot and .ttf files togheter with .css files.

    In the prod system doesn´t work the styles. I mean the loading of the images and css.

    Could you help me please?

    Regards,

    Diego.

    (0) 
    1. Mike Howles Post author

      Interesting…  Assuming all the MIME content is there, this should work.  Do you see any 404 or 500 errors in a Fiddler trace or in F12 traffic analysis mode in the browser?

      (0) 
      1. Diego Torres Luyo

        Hi Michael, thanks for your answer.

        I solved my Issue.

        I had deployed my app as a copy of another and then, when I created a new one, the problem disappeared.

        Thanks again.

        Regards,

        Diego.

        (0) 
  6. Alex Cruickshank

    Hi Michael

    THis didn’t work for me either, it works great in BIP mode running locally but once I upload to server and run the app I don’t get anything

    Through fiddler I have got a 404 for this

    GET /BOE/portal/1408201927/zenwebclient/zen/mimes/446735/Root%20Folder/Sales/Tests/NEW_DESIGN_FONT.css?version=8Bug9pLyf%2FW7SSwoUYO%2F%2FQ%3D%3D HTTP/1.1

    Any ideas?

    (0) 
    1. Alex Cruickshank

      Solved my Issue 🙂

      I have BI in Split deployment mode so had to add the following lines to my httpd.conf

      JkMount /BOE/portal/*/zenwebclient/zen/mimes/*.css* ajp13

      JkMount /BOE/portal/*/zenwebclient/zen/mimes/*.ttf ajp13

      JkMount /BOE/portal/*/zenwebclient/zen/mimes/*.eot ajp13

      (0) 
  7. Naveen M

    Does any one know how to update the SAP-Icons eot and ttf files?

    I have some icons which are in the SAP icon library (the library with 507 icons) but they are not present in the SAP icons. CSS file. Even though I add a CSS class for the missing ones in the SAP icons.css file, I am not able to see them in the dashboard.

    is any one else facing a similar kind of problem? or does any one have a solution of what do I need to do in order to see them in the dashboard?

    Thanks,

    Naveen

    (0) 
    1. pramod k

      Naveen,

      Did you add to the following class ?  if you cant find icons then .eot and .ttf  files need to be updated.  I am not sure where can you get udpated .eot file

      Let me know the content IDs  you are looking for , may be i can give it a try

      .ICON_ YOURCLASSS:before {

      font-size: 22px;

      font-family: ‘SAP-icons’;             

      content: “\< ID goes here > “;          

      speak: none;

      }

      (0) 
      1. Naveen M

        Hi Pramod.

        I am trying to use this content ID and I am not able to see it in design studio.

        content: “\e202”;

        Can you see if you are able to use the ID and get the image?

        (0) 
  8. Christian Ettenauer

    Hi Micheal,

    I’ve installed DS 1.3 SP 2 and the Icons as well as the CCS Styles are still missing. Do you now, if this error was also fixed for the netweaver deployment?

    Thanks and Regards

    Chris

    (0) 
  9. mohd fahad

    Hi Michael,

    Thanks for the great post !!

    I replicated the same scenario in “Public Folder” instead of “My Favorites” – BIP, nothings works on my application (fonts SAP- images, css).

    But as long as i keep my .css file in “My Favorites” and Publish application in any FOLDER ( Public or Favorite), its works fine.

    I did change the file path for  -custom css’ on Application.  😕


    Any idea what i’m doing wrong? Please suggest, thanks

    Regards,

    Fahad

    (0) 
    1. mohd fahad

      Update on Solution for this issue.

      Our CSS files was embedded deep into Public Folder.

      For Ex the path looks like

      PublicFolder->Organization->Finance->Department->ABCD->Project->Dashboad->Design Studio-> mimes.

      Therefore on Application level in Design Studio it was enable to digest the CHARACTER LIMIT on PATH.

      -Fahad

      (0) 
  10. Senthilkumar VP

    Hi Michael ,

    First of all I thank for this good work.

    I would like to know is this possible solve the same for the Netweaver mode. Please let me know the steps to proceed.

    Please refer the below image as attached.NetweaverMode.jpg

    (0) 
  11. Christian Ettenauer

    Hi Senthilkumar,

    according to the fact that you are using the netweaver deployment you have to do the upload in the BW backend.  You have to use SE80 for the upload into your MIME repository.

    Regards

    Christian

    (0) 

Leave a Reply