How to get Dynamic logo on Service Portal?

User177031
Kilo Guru

Hi All,

I am trying to get the dynamic logo as per the below link from community. But I am not getting the output. Can anyone help me with the script where am I missing.

https://community.servicenow.com/community?id=community_question&sys_id=75f287a1dbd8dbc01dcaf3231f96...

find_real_file.png

HTML Script

<div>

<nav class="navbar-inverse" ng-class="::{'navbar':!isViewNative, 'is-native': isViewNative}"
role="navigation">
<div ng-show="::!isViewNative" class="navbar-header">
<a class="navbar-brand" ng-if="::!portal.logo && !data.company_logo_url" href="?id="><span></span></a>
<a class="navbar-brand navbar-brand-logo" ng-if="::portal.logo && !data.company_logo_url" href="?id=">
<img ng-src="" />
</a>
<a class="navbar-brand" ng-if="!data.company_logo_url" href="?id="><span></span></a>
<a class="navbar-brand navbar-brand-logo" ng-if="data.company_logo_url" href="?id=">
<img ng-src="" />
</a>

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sp-nav-bar">
<span class="sr-only">${Toggle navigation}</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

</div>

<div sp-navbar-toggle="" class="collapse navbar-right" id="sp-nav-bar">
<!-- Include The Menu -->
<sp-widget widget="::data.menu"></sp-widget>
<ul ng-if="(!user.logged_in && page.id != portal.login_page_dv && !data.hasLogin)" class="nav navbar-nav" role="presentation">
<li role="presentation"><a href ng-click="::openLogin()">${Login}</a></li>
</ul>
<ul ng-if="user.logged_in" class="nav navbar-nav" role="menubar">
<!-- chat, avatar, and logout -->
<li ng-if="::(data.connect_support_queue_id && !isAgentChatConfigured)" role="presentation"><a href ng-click="openPopUp()" role="menuitem">${Live Chat}</a></li>
<li ng-if="showAvatar" class="hidden-xs dropdown" role="presentation">
<a href class="toggle-dropdown" data-toggle="dropdown" aria-expanded="false" title="{{::data.profileBtnMsg}}" aria-label="{{::data.profileBtnMsg}}: {{::user.name}}" id="profile-dropdown" role="menuitem" aria-haspopup="true">
<span class="navbar-avatar" aria-hidden="true"><sn-avatar class="avatar-small-medium" primary="avatarProfile" /></span>
<span class="visible-lg-inline">{{::user.name}}</span>
</a>
<ul class="dropdown-menu" role="menu" aria-label="{{::data.profileBtnMsg}}">
<li role="presentation"><a tabindex="-1" ng-href="?id=user_profile&sys_id={{::user.sys_id}}" role="menuitem">${Profile}</a></li>
<li ng-if="::!(isViewNative || isViewNativeTablet)" role="presentation"><a tabindex="-1" href="{{::portal.logoutUrl}}" role="menuitem">${Logout}</a></li>
</ul>
</li>
<li ng-if="showXSAvatar" class="visible-xs-block" role="presentation"><a role="menuitem" ng-href="?id=user_profile&sys_id={{::user.sys_id}}" ng-click="collapse()">
<span class="navbar-avatar"><sn-avatar class="avatar-small-medium" primary="avatarProfile" /></span>{{::user.name}}</a>
</li>
<li ng-if="::!(isViewNative || isViewNativeTablet)" class="visible-xs-block" role="presentation"><a role="menuitem" ng-href="{{::portal.logoutUrl}}" ng-click="collapse()">${Logout}</a></li>
</ul>
</div>
</nav>
</div>

Server Script

// Defines the support queue ID that will be linked to by the Live Chat link in header
var company_id = gs.getUser().getCompanyID();
var grCompany = new GlideRecord('core_company');
if(grCompany.get(company_id)) {
data.company_logo_url = grCompany.getDisplayValue('banner_image');
}
if(data.company_logo_url =='') {
data.company_logo_url = false; // When you don't get dynamic image path
}

data.connect_support_queue_id = $sp.getValue('sp_chat_queue');
data.login_page = $sp.getValue('login_page');
data.profileBtnMsg = gs.getMessage("User options");
var menu = $sp.getValue("sp_rectangle_menu");
data.menu = $sp.getWidgetFromInstance(menu);
if (data.menu && data.menu.data) {
data.menu.data.replace = true;
// Hide login if menu already has link to login
data.hasLogin = false;
if (data.menu.data.menu.items) {
for(var i in data.menu.data.menu.items) {
var item = data.menu.data.menu.items[i];
if (item.type == 'page' && item.sp_page == data.login_page)
data.hasLogin = true;
}
}
}
data.loginWidget = $sp.getWidgetFromInstance('login-modal');

- Thank you.

1 ACCEPTED SOLUTION

Harsh Vardhan
Giga Patron

Try now. 

 

HTML script.

 

 

<div>
<nav class="navbar-inverse" ng-class="::{'navbar':!isViewNative, 'is-native': isViewNative}"
role="navigation">
<div ng-show="::!isViewNative" class="navbar-header">
<!--<a class="navbar-brand" ng-if="::!portal.logo" href="?id={{::portal.homepage_dv}}"><span ng-bind="portal.title"></span></a>
<a class="navbar-brand navbar-brand-logo" ng-if="::portal.logo" ng-href="?id={{::portal.homepage_dv}}" ng-click="collapse()" aria-label="${Go to homepage}">
<img ng-src="{{data.company_logo_url}}" title="ServiceNow" role="presentation" alt="${Portal Logo}" />
</a> -->


<a class="navbar-brand" ng-if="::!portal.logo && !data.company_logo_url" href="?id="><span></span></a>


<a class="navbar-brand navbar-brand-logo" ng-if="::portal.logo && !data.company_logo_url" href="?id=">


<img ng-src="{{data.company_logo_url}}" />


</a>

 

<a class="navbar-brand" ng-if="!data.company_logo_url" href="?id="><span></span></a>


<a class="navbar-brand navbar-brand-logo" ng-if="data.company_logo_url" href="?id=">


<img ng-src="{{data.company_logo_url}}" />


</a>



 

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sp-nav-bar">
<span class="sr-only">${Toggle navigation}</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>

<div sp-navbar-toggle="" class="collapse navbar-right" id="sp-nav-bar">
<!-- Include The Menu -->
<sp-widget widget="::data.menu"></sp-widget>
<ul ng-if="(!user.logged_in && page.id != portal.login_page_dv && !data.hasLogin)" class="nav navbar-nav" role="presentation">
<li role="presentation"><a href ng-click="::openLogin()">${Login}</a></li>
</ul>
<ul ng-if="user.logged_in" class="nav navbar-nav" role="menubar">
<!-- chat, avatar, and logout -->
<li ng-if="::(data.connect_support_queue_id && !isAgentChatConfigured)" role="presentation"><a href ng-click="openPopUp()" role="menuitem">${Live Chat}</a></li>
<li ng-if="showAvatar" class="hidden-xs dropdown" role="presentation">
<a href class="toggle-dropdown" data-toggle="dropdown" aria-expanded="false" title="{{::data.profileBtnMsg}}" aria-label="{{::data.profileBtnMsg}}: {{::user.name}}" id="profile-dropdown" role="menuitem" aria-haspopup="true">
<span class="navbar-avatar" aria-hidden="true"><sn-avatar class="avatar-small-medium" primary="avatarProfile" /></span>
<span class="visible-lg-inline">{{::user.name}}</span>
</a>
<ul class="dropdown-menu" role="menu" aria-label="{{::data.profileBtnMsg}}">
<li role="presentation"><a tabindex="-1" ng-href="?id=user_profile&sys_id={{::user.sys_id}}" role="menuitem">${Profile}</a></li>
<li ng-if="::!(isViewNative || isViewNativeTablet)" role="presentation"><a tabindex="-1" href="{{::portal.logoutUrl}}" role="menuitem">${Logout}</a></li>
</ul>
</li>
<li ng-if="showXSAvatar" class="visible-xs-block" role="presentation"><a role="menuitem" ng-href="?id=user_profile&sys_id={{::user.sys_id}}" ng-click="collapse()">
<span class="navbar-avatar"><sn-avatar class="avatar-small-medium" primary="avatarProfile" /></span>{{::user.name}}</a>
</li>
<li ng-if="::!(isViewNative || isViewNativeTablet)" class="visible-xs-block" role="presentation"><a role="menuitem" ng-href="{{::portal.logoutUrl}}" ng-click="collapse()">${Logout}</a></li>
</ul>
</div>
</nav>
</div>

 

 

Server side Script:

 

// Defines the support queue ID that will be linked to by the Live Chat link in header

var company_id = gs.getUser().getCompanyID();


var grGetCompanyLogo = new GlideRecord('core_company');

grGetCompanyLogo.get(company_id);

data.company_logo_url = grGetCompanyLogo.getDisplayValue('banner_image'); 

if(data.company_logo_url =='') 
	data.company_logo_url = false; // When you don't get dynamic image path


data.connect_support_queue_id = $sp.getValue('sp_chat_queue');
data.login_page = $sp.getValue('login_page');
data.profileBtnMsg = gs.getMessage("User options");
var menu = $sp.getValue("sp_rectangle_menu");
data.menu = $sp.getWidgetFromInstance(menu);
if (data.menu && data.menu.data) {
	data.menu.data.replace = true;
	// Hide login if menu already has link to login
	data.hasLogin = false;
	if (data.menu.data.menu.items) {
		for(var i in data.menu.data.menu.items) {
			var item = data.menu.data.menu.items[i];
			if (item.type == 'page' && item.sp_page == data.login_page)
				data.hasLogin = true;
		}
	}
}

data.loginWidget = $sp.getWidgetFromInstance('login-modal');

 

 

Note: i have tested this script. seems like you did not pass the data.company_logo_url value in html img src value. 

 

 

View solution in original post

9 REPLIES 9

Priyanka136
Mega Guru

Hi Sai,

You would need to create a mapping between the company and the image, then in the server script portion of the script grab the correct image for the current company, and then update the html section to show the correct image.

Thanks,

Priyanka

Harsh Vardhan
Giga Patron

just confirming here, did you check,  value exist on "banner_image" field on your core_company table ?

 

can you add some log in server side code to validate the "data.company_logo_url" value ?

Harsh Vardhan
Giga Patron

Try now. 

 

HTML script.

 

 

<div>
<nav class="navbar-inverse" ng-class="::{'navbar':!isViewNative, 'is-native': isViewNative}"
role="navigation">
<div ng-show="::!isViewNative" class="navbar-header">
<!--<a class="navbar-brand" ng-if="::!portal.logo" href="?id={{::portal.homepage_dv}}"><span ng-bind="portal.title"></span></a>
<a class="navbar-brand navbar-brand-logo" ng-if="::portal.logo" ng-href="?id={{::portal.homepage_dv}}" ng-click="collapse()" aria-label="${Go to homepage}">
<img ng-src="{{data.company_logo_url}}" title="ServiceNow" role="presentation" alt="${Portal Logo}" />
</a> -->


<a class="navbar-brand" ng-if="::!portal.logo && !data.company_logo_url" href="?id="><span></span></a>


<a class="navbar-brand navbar-brand-logo" ng-if="::portal.logo && !data.company_logo_url" href="?id=">


<img ng-src="{{data.company_logo_url}}" />


</a>

 

<a class="navbar-brand" ng-if="!data.company_logo_url" href="?id="><span></span></a>


<a class="navbar-brand navbar-brand-logo" ng-if="data.company_logo_url" href="?id=">


<img ng-src="{{data.company_logo_url}}" />


</a>



 

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sp-nav-bar">
<span class="sr-only">${Toggle navigation}</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>

<div sp-navbar-toggle="" class="collapse navbar-right" id="sp-nav-bar">
<!-- Include The Menu -->
<sp-widget widget="::data.menu"></sp-widget>
<ul ng-if="(!user.logged_in && page.id != portal.login_page_dv && !data.hasLogin)" class="nav navbar-nav" role="presentation">
<li role="presentation"><a href ng-click="::openLogin()">${Login}</a></li>
</ul>
<ul ng-if="user.logged_in" class="nav navbar-nav" role="menubar">
<!-- chat, avatar, and logout -->
<li ng-if="::(data.connect_support_queue_id && !isAgentChatConfigured)" role="presentation"><a href ng-click="openPopUp()" role="menuitem">${Live Chat}</a></li>
<li ng-if="showAvatar" class="hidden-xs dropdown" role="presentation">
<a href class="toggle-dropdown" data-toggle="dropdown" aria-expanded="false" title="{{::data.profileBtnMsg}}" aria-label="{{::data.profileBtnMsg}}: {{::user.name}}" id="profile-dropdown" role="menuitem" aria-haspopup="true">
<span class="navbar-avatar" aria-hidden="true"><sn-avatar class="avatar-small-medium" primary="avatarProfile" /></span>
<span class="visible-lg-inline">{{::user.name}}</span>
</a>
<ul class="dropdown-menu" role="menu" aria-label="{{::data.profileBtnMsg}}">
<li role="presentation"><a tabindex="-1" ng-href="?id=user_profile&sys_id={{::user.sys_id}}" role="menuitem">${Profile}</a></li>
<li ng-if="::!(isViewNative || isViewNativeTablet)" role="presentation"><a tabindex="-1" href="{{::portal.logoutUrl}}" role="menuitem">${Logout}</a></li>
</ul>
</li>
<li ng-if="showXSAvatar" class="visible-xs-block" role="presentation"><a role="menuitem" ng-href="?id=user_profile&sys_id={{::user.sys_id}}" ng-click="collapse()">
<span class="navbar-avatar"><sn-avatar class="avatar-small-medium" primary="avatarProfile" /></span>{{::user.name}}</a>
</li>
<li ng-if="::!(isViewNative || isViewNativeTablet)" class="visible-xs-block" role="presentation"><a role="menuitem" ng-href="{{::portal.logoutUrl}}" ng-click="collapse()">${Logout}</a></li>
</ul>
</div>
</nav>
</div>

 

 

Server side Script:

 

// Defines the support queue ID that will be linked to by the Live Chat link in header

var company_id = gs.getUser().getCompanyID();


var grGetCompanyLogo = new GlideRecord('core_company');

grGetCompanyLogo.get(company_id);

data.company_logo_url = grGetCompanyLogo.getDisplayValue('banner_image'); 

if(data.company_logo_url =='') 
	data.company_logo_url = false; // When you don't get dynamic image path


data.connect_support_queue_id = $sp.getValue('sp_chat_queue');
data.login_page = $sp.getValue('login_page');
data.profileBtnMsg = gs.getMessage("User options");
var menu = $sp.getValue("sp_rectangle_menu");
data.menu = $sp.getWidgetFromInstance(menu);
if (data.menu && data.menu.data) {
	data.menu.data.replace = true;
	// Hide login if menu already has link to login
	data.hasLogin = false;
	if (data.menu.data.menu.items) {
		for(var i in data.menu.data.menu.items) {
			var item = data.menu.data.menu.items[i];
			if (item.type == 'page' && item.sp_page == data.login_page)
				data.hasLogin = true;
		}
	}
}

data.loginWidget = $sp.getWidgetFromInstance('login-modal');

 

 

Note: i have tested this script. seems like you did not pass the data.company_logo_url value in html img src value. 

 

 

Hi Harshvardhan,

When I open the record from core_company, the form is opening on customer_account table. Refer to the attached screenshot. Also I tried with the code you provided, but I am getting portal name instead of image.

find_real_file.png

- Thank you.