Angular directive to show date/time-stamp
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎06-06-2017 11:23 AM
Please find below the question/concern:
- Navigate to ServiceNow and from the left nav menu navigate to Service Portal > Service Portal Home
- Locate the "Requests" widget on the home page, you will find a list of Requests which are requested for you.
- Click on any of the requests present there or the "View" button which opens the detail view page of that request.
- Under the "Estimated Completion" section, the label "Created" or "Updated" fields shows the value as : 3m/ 3d/ 3mo
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).
But, I am unable to find this angular directive. Please provide solutions to achieve this requirement.
Thanks,
Hitesh
Message was edited by: Hitesh Patel
- Labels:
-
Service Portal
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎06-07-2017 12:11 AM
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
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎06-08-2017 11:24 AM
Thank you Lars
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎06-09-2017 02:57 PM
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
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎02-14-2018 03:53 AM
For others who might come across this post I have created a custom widget that renders like this:
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!)
Field | Value |
---|---|
Name | angular-moment |
Global | false |
Script | Copy 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:
Create a New Dependency (related lists).
Field | Value |
---|---|
Name | angular-moment |
Angular module name | angular-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?