Design Studio 1.3 - Making Adhoc Analysis Template, Images, and CSS Work

[mike_howles4]

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:

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

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:

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:

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:

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

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:

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

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

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

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:

.EOT File details:

.TTF File details:

You should now have folder contents similar to this:

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

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