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>

[Jaspal Singh]

Hi Christine,

Can you try below (untested).

In your cloned widget use below for HTML

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

In the server side code of the widget add below.

var company_id;
var user_id = gs.getUserID();
var gr = new GlideRecord('sys_user');
gr.addQuery('sys_id',user_id);
gr.query();
if(gr.next()){
	company_id = gr.company; 
}

data.companylogovalue=company_id; //gives you sys_id of company which we use in HTML

[Christine24]

So I just changed the scripts and when I load it, it shows nothing.

[Christine24]

So part of the code is off; it's highlighting a lot in Red

[Pranav Bhagat]

Can you check the developer tools and see if there is any error that is coming up .

Make sure this below script (Use backgroud scripts to check that ) is returning something

var user_id = gs.getUserID();
var gr = new GlideRecord('sys_user');
gr.addQuery('sys_id',user_id);
gr.query();
if(gr.next()){
	company_id = gr.company; 
}