Dynamically change image on HTML widget

[Christine24]

I'm using the HTML widget as a way to display different logos depending on which company is signed into our portal. The issue I'm trying to resolve is how to actually make this dynamic so that we can use one portal and display the appropriate logo.

Right now the HTML widget will only display my one logo and I have to change the code to display the other logo. I decided to clone the HTML widget and wanted to make an if statement. This is what I have so far but I don't know how to code in HTML and it's not working.

<div>
  <div ng-if="!c.options.html" class="panel panel-default">
    <div class="panel-body">
    <a class="navbar-brand navbar-brand-logo" ng-if=user.company == '084cc9e64f4f7700eb11eddf0210c795' "
<p style="text-align: center; margin-top: 50px; margin-bottom: -50px;"><img src="cfn.svg" /></p>
<a class="navbar-brand navbar-brand-logo" ng-if=user.company == 'bd2eb1851bd73700762f8596dc4bcbc7' "
<p style="text-align: center; margin-top: 50px; margin-bottom: -50px;"><img src="mml.svg" /></p>
    </div>
  </div>
  <div ng-if="c.options.html" ng-bind-html="c.html"></div>
</div>

[Christine24]

So another thought - is part of the issue that there is no else statement? I know I would do that for JavaScript, but I'm not sure how HTML would handle it.

[Jaspal Singh]

Can you try below.

<div>
  <div ng-if="!c.options.html" class="panel panel-default">
    <div class="panel-body">
    <a class="navbar-brand navbar-brand-logo" ng-if="data.companylogovalue == '084cc9e64f4f7700eb11eddf0210c795'">
<p style="text-align:center; margin-top:50px; margin-bottom:-50px;"><img src="cfn.svg" /></p></a>
<a class="navbar-brand navbar-brand-logo" ng-if="data.companylogovalue == 'bd2eb1851bd73700762f8596dc4bcbc7'">
<p style="text-align: center; margin-top: 50px; margin-bottom: -50px;"><img src="mml.svg" /></p></a>
    </div>
  </div>
  </div>

[Mike Patel · Accepted solution]

try below

<div>
  <div class="panel-body">
    <img style="text-align:center; margin-top:50px; margin-bottom:-50px;" ng-if="data.companylogovalue == '084cc9e64f4f7700eb11eddf0210c795'" ng-src="cfn.svg">
    <img style="text-align:center; margin-top:50px; margin-bottom:-50px;" ng-if="data.companylogovalue == 'bd2eb1851bd73700762f8596dc4bcbc7'" ng-src="mml.svg">
  </div>
  <div ng-if="c.options.html" ng-bind-html="c.html"></div>
</div>

Server

data.companylogovalue=gs.getUser().getCompanyID().toString();

[Christine24]

YES THAT DID IT!!!
I had to remove the line <div ng-if="c.options.html" ng-bind-html="c.html"></div> because that was adding the "hello" again, but it works!! You guys are amazing!

[Pranav Bhagat]

Awesome ,happy to help