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

HI Jaspal,



Thanks for the above.   Apologies but I have not really done anything previously with CSS.   Do you have any example code I could try?



Thanks


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.