How to change picture based on Selection in Qlik Sense

[Anonymous]

Hi,

     I have company logo showing in Qlik Sense.  Based on the selection of Company we need to show the logo. Suppose if i select Company1, Logo1 should be shown. If Company2 is selected, then Logo2 should be displayed and so on.

     How can we achieve this in Qlik Sense ?

     Thanks in Advance

Warm Regards,

     Bijoy

[beck_bakytbek]

Hi Bijoy,

it is not exactly about your issue, but look at this, maybe you find another better option to resolve your issue

look at this:Conditional Performance Indicators in Tables using HTML Unicode Chr() Values

I hope that helps

Beck

[Anonymous]

Hi Bijoy,

As far as I'm aware this is currently not possible using the built-in features in Sense.

[#4 · Accepted solution]

You can achieve this with an extension or a widget. I tried it out with the latter. Took the lazy way out and just recorded the process, if it works for you feel free to give me a shout and I'll provide more detail.

Change image based on selected dimension(s) - YouTube

[richbyard]

Hi Bijoy, guy.meintjes.eoh‌‌ is showing the easiest way to do this... The other alternative is to host the pictures on an external web server which can be identified through a URL. They cannot be located from the local drive on the server in the same way as QlikView. You may need to use an extension to show the image, I have used the irregular BI image extension in the past and will send through an example application.

Cheers
Richard

[SonnyDelete]

Hi,

I followed the YouTube video and can get this to work when I run it on the Qlik Sense server...

<div ng-repeat="head in data.headers">
<img src="https://localhost/content/CustomerLogos/{{data.rows[0].dimensions[$index].qText}}.png" />
</div>

...but when I try from my local machine the image can't be found...

I thought I might be able to replace https://localhost/content/CustomerLogos/ with a network share, but no joy.

Does anyone know where I might be going wrong with this?

Thanks,

Sonny

[gmi]

On a server you'd need to replace this with the proxy path. So, for example, if I was using the default proxy on server1.abc.com I'd use https://server1.abc.com/content/CustomerLogos/....

Hope that helps. 

[Kalmer]

Hi!

Had the same issue - the only way how i could display the pictures with a widget was to use the FULL PATH in the dimension.

Example:
Widget code:
<div ng-repeat="head in data.headers">
<img class="pic" src="{{data.rows[0].dimensions[$index].qText}}">
</div>

Dimension script:
Images:
Load * Inline [
CustomerID, CustomerPictureName, CustomerPictureFullPath
001, Person01, http://fullpath/person01.jpg
002, Person02, http://fullpath/person02,jpg
];

Dimension i chose for the widget to display the image:
CustomerPictureFullPath

PS: I tried to also edit the widget as:
<img class="pic" src="http://fullpath/{{data.rows[0].dimensions[$index].qText}}.jpg"> - But no luck here

[Rob_Slinger]

We have this working in a Qlik Sense app but can't get it into a Nprinting document.

Any tips/tricks/suggestions?