KPI Tile component customization questions

[Former Member]

Hello everyone,

I have set about in replicating a dashboard in design studio, My attempt for this requires me to add a background image to the KPITile (SDK component), I have created a number of tiles and I want to apply an image in the background, I am 99% sure that this is done through CSS, but I have no idea how to do this correctly (read further info about how I import pictures in components further down).

Here  is a picture of what I am trying to replicate:

Also, what do I refer to in CSS to change KPITile heading background(ie. in the picture this is illustrated in the colour blue).

One Last thing that I need to think about and would like some ideas about. In my case whenever I added background images to text boxes or whatever, I did this with a URL because I have no idea how I would do it otherwise (since this is a clients machine..). Using URL for pictures has a few downsides, it requires a permanent host to hold all pictures, and re-sizing pictures in design studio from URL distorts them (I assume you can resize them accordingly with CSS?). Any suggestions on doing it otherwise?

Thank you in advance

-Stav

[TammyPowlas · Accepted solution]

Hi Stav - while I haven't tried it myself, Reiner provides some good examples in this blog

Could you have a look and try what he suggests?  If that doesn't work, please reply back here.

[Former Member · Accepted solution]

thank you Tammy the topic is very interesting I will take a closer look at it and see if anything from there helps here and try update here. Also 1 more thing I have figured out how to change title background in KPITile.

If anyone is intersted in KPITile properties you can Apply a CSS class to the header, title, footer etc. in my case I named the title css class:kpitiletitle

my css :

.kpitiletitle

{

background:rgb(25, 163, 255);

background-size:10px 15px;

color: white;//font color

font-size:30px;//font size

font-weight:250;/font weight

}

[Former Member · Accepted solution]

Hey again Tammy, went through that guide, was hoping for a different path to achieving my goal. That specific blog post refers to images in the KPItile via SDK, which in my case is pointless, if I was to follow that I would have to create 10 custom KPI tiles (through the sdk) to add a different picture to each..

There must be a way to throw background images via CSS.

I shall not quit! If I find a solution I will keep you posted

[TammyPowlas · Accepted solution]

Hey Stav - I was hoping that blog would help and possibly use the CSS syntax of   "background-image: url("img/Desert.jpg");"

I only spent a few minutes on it this morning but I couldn't get it to work myself; glad to hear you will keep on trying.

I would encourage you to follow what Mustafa mentioned regarding Stephen Few Perceptual Edge - those are some good practices

[Former Member · Accepted solution]

using: image: url("img/Desert.jpg")

won't do the trick because design studio will not know where this image is.

similarly doing this in a CSS file and importing will not work either or I am not sure how to do so, see in the example you gave "img/Desert" is refering to a folder called img and then the actual JPEG (Desert)..

I found a very temporary solution, but it requires the image to be hosted somewhere online.

So the process I followed is : created a CSS file added the class I gave to the KPI tile (myTile) with the following css:

.myTile

{

background: url(webspace the picture is held url);

}

Unfortunately this will rescale and resize the picture by itself (which may seem distorted) and it is not a proper solution as this will require me to create a website just to host pictures:p

I wonder if there is a way to call pictures that are uploaded to design studio with css.. Normally if designing a website you would have your images in your websites' folders where you would use something along the lines of : url("img/Desert.jpg").. but I don't know if there is a way to call uploaded pictures:/ would make life so much easier

pff someone must know;) someone must have had similar issues I will find it sooner or later;)

Thank you once again;)

[MustafaBensan]

Hi Stav,

At the risk of seeming controversial, I would actually encourage you not to use background images as shown in the example since all this does is to detract from the clarity of communication of what is important, the KPIs themselves.  In this context, I support the view that such usage of images in dashboards, although a common (mis)practice, constitutes "chart junk" and should be avoided as a best practice.

You might find this article, The Chart Junk Debate by Stephen Few interesting reading on the subject .

Regards,

Mustafa.

[TammyPowlas]

Mustafa - that's not controversial at all and thank you for bringing up Stephen Few - a great suggestion to consider. 

[MustafaBensan]

Thanks Tammy .

Just for clarification, Reiner's article describes tips for including images in SDK components when creating new ones or modifying existing ones, which probably goes beyond what's needed for Stav's scenario. 

If background images are really required as per the example, this should be a simple case of overlaying the KPI Tile component onto the standard image component (assuming the KPI Tile component background is transparent).

Regards,

Mustafa.

[Former Member]

Hey Mustafa, thank you for the response. It isn't my choice, I was just asked to replicate it;) None the less I had tried to add a picture in the background as you said but the KPI tile isn't transparent:o I had found a post on someone experiencing something similar about 1 week ago but I cant for the sake of things find it now:o was hoping someone might have stumbled upon it!

Thank you once again any help is appreciated;)

-Stav

[MustafaBensan]

Hi Stav,

Here is the discussion you might have been looking for:

Reading the comments, it looks like there is a CSS solution that works for the KPI View component that is included in the SCN Community Package.

Hope that helps,

Mustafa.

[Former Member]

Thats the one I was talking about !  I'll troubleshoot that post and see if I get the answer I am looking for. Thank you so much Mustafa!:)

[MustafaBensan]

By the way Stav, if that discussion thread doesn't get you the result you need, you could evaluate the Graphomate Tiles add-on.  I'm not sure if it supports a transparent background but perhaps Lars Schubert could confirm that.

Regards,

Mustafa.

[lars_schubert2]

Sorry for the late reply, I faced some problems connecting to SCN.
When not using a CSS-theme our tiles are transparent ...

Regards,

Lars