- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-09-2017 07:04 AM
Hi All,
I've recently added a widget to our service portal that we downloaded from servicenow.share.
The widget allows the creation of announcements to display in the header of our service portal.
There is a module where you create the announcement and a UI action to publish the announcement. This UI action sets the current time and date in a field u_published_at using gs.nowDateTime(). This is setting the date and time as expected (using the dd/mm/yyyy format and setting the time to our timezone.)
However on the portal the date is displaying as yyyy/mm/dd format and the time is displaying incorrectly (by 1 hour).
From what I can see in the HTML code it should be displaying the u_published_at value. Does anyone know if there is any other settings that is causing this to display as a different format and time?
Any help is greatly appreciated.
Below is the HTML code from the widget.
<div class="container-fluid announcement-container" ng-if="c.data.showAnnouncements && (c.data.informationAnnouncements.length > 0 || c.data.outages.length > 0)">
<!-- Information -->
<div ng-show="c.data.informationAnnouncements.length > 0 && c.data.showAnnouncements">
<div ng-repeat="announcement in data.informationAnnouncements | limitTo: 1" class="panel panel-{{announcement.u_class}} announcement-{{announcement.u_class}}">
<div class="container panel-body">
<div class="col-xs-12 col-sm-3 col-md-2 announcement-category">
<div class="information-icon">
<i class="fa fa-{{c.options.u_information_glyph}}" aria-hidden="true"></i> {{c.options.u_information_text || "Current Information"}}
</div>
<div class="announcement-published">
<small>${Published:}</small>
<small>{{announcement.u_published_at}}</small>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-7 announcement-text">
<h3>{{announcement.u_short_description}}</h3>
<p class="notification-desc" ng-bind-html="announcement.u_content"></p>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 cta">
<div class="dismiss row">
<div class="col-xs-6">
<a ng-if="announcement.u_more_info_link && announcement.u_more_info_button_text" href="{{announcement.u_more_info_link}}" class="btn btn-md active" role="button" aria-pressed="true">{{announcement.u_more_info_button_text}}</a>
<a ng-if="!announcement.u_more_info_link || !announcement.u_more_info_button_text" href="?id=announcement&sys_id={{announcement.sys_id}}" class="btn btn-md active" role="button" aria-pressed="true">${Read More}</a>
</div>
<div class="col-xs-6">
<button type="button" class="close" aria-label="Close" ng-click="c.closeAnnouncements()">
<span aria-hidden="true">${Dismiss} <i class="fa fa-close"></i></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Outages -->
<div ng-show="c.data.outages.length > 0 && c.data.showAnnouncements">
<div ng-repeat="outage in data.outages | limitTo: 1" class="panel panel-{{outage.u_class}} announcement-{{outage.u_class}}">
<div class="container panel-body">
<div class="col-xs-12 col-sm-3 col-md-2 announcement-category">
<div class="information-icon">
<i class="fa fa-{{c.options.u_outage_glyph}}" aria-hidden="true"></i> {{c.options.u_outage_text || "Service Interruption Messages"}}
</div>
<div class="announcement-published">
<small>${Published:}</small>
<small>{{outage.u_published_at}}</small>
</div>
</div>
<div ng-if="outage.u_short_description" class="col-xs-12 col-sm-6 col-md-7 announcement-text">
<h3>{{outage.u_short_description}}</h3>
<p class="notification-desc" ng-bind-html="outage.u_content">
{{outage["u_outage.type"]}} - {{outage["u_outage.cmdb_ci"]}} (${started {{outage["u_outage.begin"]}}})</p>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 cta">
<div class="dismiss">
<a ng-if="outage.u_more_info_link && outage.u_more_info_button_text" href="{{outage.u_more_info_link}}" class="btn btn-md active" role="button" aria-pressed="true">{{outage.u_more_info_button_text}}</a>
<a ng-if="!outage.u_more_info_link || !outage.u_more_info_button_text" ng-href="?id=announcement&sys_id={{outage.sys_id}}" class="btn btn-md active" role="button" aria-pressed="true">${Outage Info}</a>
</div>
</div>
</div>
</div>
</div>
<div class="container announcement-content announcement-button" ng-if="data.outages.length > 1 || data.informationAnnouncements.length > 1">
<button class="btn btn-xs btn-primary" type="button" ng-click="c.openAnnouncements()">
<i class="fa fa-list-alt"></i> ${View all announcements}
</button>
</div>
</div>
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-09-2017 08:50 AM
Hi Jaspal,
After some trial and error I've managed to work out where the issue was.
In the Server Script for the u_published_at it was using $sp.getRecordValues. I've moved u_published_at from here to now use $sp.getRecordDisplayValues and it is displaying in the format I require with the correct time.
Thanks for you help on this.

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-09-2017 07:48 AM
Hi Sam,
All looks good. Only thing I guess is the Date format at the User profile level.
Could you check for that, change it & then confirm the output.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-09-2017 08:07 AM
Hi Jaspal,
I just checked and my user profile had the date and time both set to none.
I updated these to use date format dd/mm/yyyy and time zone of Europe/London
But the banner was still showing incorrect time by 1 hour and incorrect date format of yyyy/mm/dd
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-09-2017 08:12 AM
I have noticed though that there is another widget for when you select the read more button. This then shows the correct format?
HTML of this widget:
<div class="panel panel-primary" ng-if="c.data.announcement">
<div class="panel-heading">
<h1>{{c.data.announcement.u_short_description}}</h1>
<h3 ng-if="c.data.announcement.u_type == 'outage'">${Affected Service}: {{c.data.announcement['u_outage.cmdb_ci']}}</h3>
<h3>${Published at}: {{c.data.announcement.u_published_at}}</h3>
</div>
<div class="panel-body">
<div>
<p ng-bind-html="c.data.announcement.u_content"></p>
<hr/>
</div>
<a class="btn btn-primary" role="button" ng-href="?id=service_status&service={{c.data.announcement.ciSysID}}" ng-if="c.data.announcement.u_type == 'outage'"><i class="fa fa-info-circle" aria-hidden="true"></i> ${View System Status}</a>
<a class="btn btn-primary" role="button" href="?id=announcement_overview"><i class="fa fa-arrow-left" aria-hidden="true"></i> ${Back to the Announcement Overview}</a>
</div>
</div>
<div class="panel panel-primary" ng-if="!c.data.announcement">
<div class="panel-heading">
<h3>${Announcement Error}</h3>
</div>
<div class="panel-body">
<p>
${Oops, there seems to be no detail data for this announcement!}
</p>
<a class="btn btn-primary" role="button" href="?id=announcement_overview"><i class="fa fa-arrow-left" aria-hidden="true"></i> ${Back to the Announcement Overview}</a>
</div>
</div>

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-09-2017 08:13 AM
Hi Sam,
I guess the CSS class "announcement-published" & try & add format for date as what I guess yyyy/mm/dd is the default HTML format.