About DATE and Time of activity in case

Dinesh87
Tera Expert

Hello

when case is created in csm portal it will show time like 1dayago 3daysago like that but i need it show as date and time format like example (2024-01-08 10:16:05 PM ). If anyone have idea about this please share me the answer ASAP.

Note :- i have inserted image as well for better under standing and marked in red colour.

Screenshot (378).png

Thanks!

Dinesh

1 ACCEPTED SOLUTION

PrashantLearnIT
Giga Sage

Hi @Dinesh87 

 

Here's how you can achieve this:

 

 Step-by-Step Guide

 

  1. Navigate to the Portal Widgets:

   - Go to `Service Portal > Widgets` in your ServiceNow instance.

 

  1. Identify the Widget:

   - Identify the widget that is used to display the case information. This could be something like `case-list` or a similar widget used in your CSM portal.

 

  1. Edit the Widget:

   - Open the widget record and click on the "Edit" button to customize the widget.

 

  1. Modify the Client Script:

   - In the widget editor, locate the client script where the case creation date is being processed and displayed. This might involve modifying how the date is formatted before being rendered in the HTML.

 

  1. Format the Date:

   - Use JavaScript to format the date in the desired format. You can use the `toLocaleString()` method to format the date and time.

 

 Example Code

 

Here is an example of how you can modify the client script to format the date:

 

```javascript

function($scope) {

    // Assuming 'case' is the object containing the case data

    if ($scope.data.case && $scope.data.case.sys_created_on) {

        var createdDate = new Date($scope.data.case.sys_created_on);

       

        // Options for formatting the date and time

        var options = {

            year: 'numeric',

            month: '2-digit',

            day: '2-digit',

            hour: '2-digit',

            minute: '2-digit',

            second: '2-digit',

            hour12: true

        };

       

        // Format the date and time

        $scope.data.case.formattedCreatedDate = createdDate.toLocaleString('en-US', options);

    }

}

```

 

 Modify the HTML Template

 

Update the HTML template of the widget to display the formatted date:

 

```html

<div>

    <span>Created On: {{data.case.formattedCreatedDate}}</span>

</div>

```

 

 Save and Test

 

  1. Save the Widget:

   - Save your changes to the widget.

 

  1. Test the Changes:

   - Navigate to the CSM portal and create a new case or view an existing case. Verify that the creation date is displayed in the desired `YYYY-MM-DD HH:MM:SS AM/PM` format.

 

 Additional Considerations

 

- Locale and Time Zone:

  - Ensure the `toLocaleString()` method uses the correct locale and time zone settings as per your requirements.

 

- Global Function:

  - If the date formatting needs to be used in multiple places, consider creating a reusable function or service for date formatting.

********************************************************************************************************
Please appreciate the efforts of community contributors by marking the appropriate response as the correct answer and helpful. This may help other community users to follow the correct solution in the future.

********************************************************************************************************
Cheers,
Prashant Kumar
ServiceNow Technical Architect


Community Profile LinkedIn YouTube Medium TopMate
********************************************************************************************************

View solution in original post

1 REPLY 1

PrashantLearnIT
Giga Sage

Hi @Dinesh87 

 

Here's how you can achieve this:

 

 Step-by-Step Guide

 

  1. Navigate to the Portal Widgets:

   - Go to `Service Portal > Widgets` in your ServiceNow instance.

 

  1. Identify the Widget:

   - Identify the widget that is used to display the case information. This could be something like `case-list` or a similar widget used in your CSM portal.

 

  1. Edit the Widget:

   - Open the widget record and click on the "Edit" button to customize the widget.

 

  1. Modify the Client Script:

   - In the widget editor, locate the client script where the case creation date is being processed and displayed. This might involve modifying how the date is formatted before being rendered in the HTML.

 

  1. Format the Date:

   - Use JavaScript to format the date in the desired format. You can use the `toLocaleString()` method to format the date and time.

 

 Example Code

 

Here is an example of how you can modify the client script to format the date:

 

```javascript

function($scope) {

    // Assuming 'case' is the object containing the case data

    if ($scope.data.case && $scope.data.case.sys_created_on) {

        var createdDate = new Date($scope.data.case.sys_created_on);

       

        // Options for formatting the date and time

        var options = {

            year: 'numeric',

            month: '2-digit',

            day: '2-digit',

            hour: '2-digit',

            minute: '2-digit',

            second: '2-digit',

            hour12: true

        };

       

        // Format the date and time

        $scope.data.case.formattedCreatedDate = createdDate.toLocaleString('en-US', options);

    }

}

```

 

 Modify the HTML Template

 

Update the HTML template of the widget to display the formatted date:

 

```html

<div>

    <span>Created On: {{data.case.formattedCreatedDate}}</span>

</div>

```

 

 Save and Test

 

  1. Save the Widget:

   - Save your changes to the widget.

 

  1. Test the Changes:

   - Navigate to the CSM portal and create a new case or view an existing case. Verify that the creation date is displayed in the desired `YYYY-MM-DD HH:MM:SS AM/PM` format.

 

 Additional Considerations

 

- Locale and Time Zone:

  - Ensure the `toLocaleString()` method uses the correct locale and time zone settings as per your requirements.

 

- Global Function:

  - If the date formatting needs to be used in multiple places, consider creating a reusable function or service for date formatting.

********************************************************************************************************
Please appreciate the efforts of community contributors by marking the appropriate response as the correct answer and helpful. This may help other community users to follow the correct solution in the future.

********************************************************************************************************
Cheers,
Prashant Kumar
ServiceNow Technical Architect


Community Profile LinkedIn YouTube Medium TopMate
********************************************************************************************************