Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

Date and Times in Portal displaying incorrect

Sam Ogden
Tera Guru

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

find_real_file.png

However on the portal the date is displaying as yyyy/mm/dd format and the time is displaying incorrectly (by 1 hour).

find_real_file.png

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>

1 ACCEPTED SOLUTION

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.


View solution in original post

6 REPLIES 6

Jaspal Singh
Mega Patron
Mega Patron

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.


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


I have noticed though that there is another widget for when you select the read more button.   This then shows the correct format?



find_real_file.png


find_real_file.png



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>


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.