Angular directive to show date/time-stamp

Hitesh Patel3
Tera Contributor

Please find below the question/concern:

  1. Navigate to ServiceNow and from the left nav menu navigate to Service Portal > Service Portal Home
  2. Locate the "Requests" widget on the home page, you will find a list of Requests which are requested for you.
  3. Click on any of the requests present there or the "View" button which opens the detail view page of that request.
  4. Under the "Estimated Completion" section, the label "Created" or "Updated" fields shows the value as : 3m/ 3d/ 3mo

                  Existing Page.jpg

      5. On looking in the code of this widget, there is an angular directive named <sn-time-ago timestamp="::field.value" />   used for showing this timestamp.

      6. I am looking to clone this angular directive and customize this to display the label "Created" or "Updated" value as : 3 minute(s)/ 3 day(s)/ 3 month(s) /3 year(s).

                  Expected Page.jpg

                  But, I am unable to find this angular directive. Please provide solutions to achieve this requirement.

Thanks,

Hitesh

Message was edited by: Hitesh Patel

4 REPLIES 4

larstange
Mega Sage

Hi



the sn-time-ago directive is hidden in the source code and is not accessible.



You can use this instead GitHub - yaru22/angular-timeago: Angular directive/filter/service for formatting date so that it dis...


and adjust it to your needs


Thank you Lars


shivanipatel
ServiceNow Employee
ServiceNow Employee

Hitesh,



We are glad you took advantage of the ServiceNow Community to learn more and to get your questions answered. The Customer Experience Team is working hard to ensure that the Community experience is most optimal for our customers.



If you feel that your question was answered, we would greatly appreciate if you could mark the appropriate thread as "Correct Answer". This allows other customers to learn from your thread and improves the ServiceNow Community experience.



If you are viewing this from the Community inbox you will not see the correct answer button.   If so, please review How to Mark Answers Correct From Inbox View.



Thanks,


Shivani Patel


Unknown-1.png


tim2222
Tera Expert

For others who might come across this post I have created a custom widget that renders like this:


find_real_file.png



Create a new UI Script using content from angular-moment - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites! (caveat emptor - check the code before you use it!)



FieldValue
Nameangular-moment
Globalfalse
ScriptCopy and paste from the CDN


Create a clone of the "Ticket Fields" widget.



In the clone Widget, modify the HTML template:


<span ng-switch="field.type">


      <!--<div ng-switch-when="glide_date_time" title="{{field.display_value}}">


<sn-time-ago timestamp="::field.value" />


</div>-->


      <div ng-switch-when="glide_date_time" title="{{field.display_value}}">


              <span am-time-ago="field.value"/>


      </div>


      <div ng-switch-default >{{field.display_value}}</div>


</span>



Open the widget in platform:
find_real_file.png



Create a New Dependency (related lists).



FieldValue
Nameangular-moment
Angular module nameangular-moment


Save and create a New JS Includes.



Set the JS Include to Source is UI Script and pick angular-moment from the available UI Scripts.



Reference - adding an angular dependency -How to add external library to SP Widget?