Dynamically change image on HTML widget

Christine24 · ‎10-29-2020

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>

Mike Patel · ‎10-29-2020

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

View solution in original post

Jaspal Singh · ‎10-29-2020

Ooh.. I used your code as is thinking tags are closed but seems there were few not closed.

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 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>
    </div>
  </div>
  <div ng-if="c.options.html" ng-bind-html="c.html"></div>
</div>

Mike Patel · ‎10-29-2020

Fixed the HTML code

<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'"></a>
<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="data.companylogovalue == 'bd2eb1851bd73700762f8596dc4bcbc7'"></a>
<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 · ‎10-29-2020

Thank you all for your quick replies!

I adjusted the code (I actually realized that I messed up those tags and fixed them but used your fixes instead) and now I'm getting the "Hello" message but still no display of the images.

Pranav Bhagat · ‎10-29-2020

Where is 'hello' message defined in script?

Christine24 · ‎10-29-2020

Not sure, which is what confused me too.