Quantcast
Channel: SAP BusinessObjects Design Studio
Viewing all articles
Browse latest Browse all 662

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

$
0
0

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:

 

m2.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:

 

m3.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:

 

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

 

m5.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:

 

m6.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:

 

m7.png

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

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

m9.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:

m-eot.png

.TTF File details:

m-ttf.png

You should now have folder contents similar to this:

m-confirm.png

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

 

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


Viewing all articles
Browse latest Browse all 662

Trending Articles