Skip to Content
author's profile photo Former Member
Former Member

KPI Tile component customization questions

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

Add a comment
10|10000 characters needed characters exceeded

Related questions

2 Answers

  • Best Answer
    Posted on Mar 23, 2015 at 09:34 AM

    Hi Stav - while I haven't tried it myself, Reiner provides some good examples in this blog SDK Tips and Tricks: Resources and Images

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

    Add a comment
    10|10000 characters needed characters exceeded

    • Former Member Tammy Powlas

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

  • Posted on Mar 23, 2015 at 09:36 AM

    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.

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.