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.