Enable Greeting message based on user timezone on employee portal

[Aman Trivedi1]

Hi My Fellow developers,

I have a requirement to Enable Greeting message like Good Morning "User name", Good Afternoon "User name", Good Evening "User name", based on user time zone on Employee Portal.
Below is the reference image on Employee portal

Need help yours help to Enable it or Developed it 

Thanks in Advance
Any help would be appreciated.......

[Community Alums]

Hi @Aman Trivedi1 

Please first clone the Homepage Search widget.

Please find the below code to be added in widget which is being used in above screenshot:

HTML:

<h1 class="text-center text-4x m-b-lg sp-tagline-color">{{data.greeting}}</h1>

Client:

api.controller=function($scope) {
/* widget controller */
var c = this;

if($scope.data.hour < 12)
{
c.data.greeting = "Good Morning!" + ' ' + $scope.data.userDisplay;
}
else if($scope.data.hour < 18)
{
c.data.greeting = "Good Afternoon!" + ' ' + $scope.data.userDisplay;
}
else
c.data.greeting = "Good Evening!" + ' ' + $scope.data.userDisplay;


};

Server Script:

(function() {

var gdt = new GlideDateTime();

var dt = gdt.getLocalTime();

data.hour = dt.getByFormat('H');

data.userDisplay = gs.getUserDisplayName();

console.log('hour ' + data.hour);

})();

Please mark it helpful and correct, if it resolves the issue.

[Moin Kazi]

@Aman Trivedi1 

Follow below to step achieve this -

Step 1:

Clone it Homepage search widget 

Step 2: 

Add Below Server-Side Code -

var gdt = new GlideDateTime();
var localTimeString = gdt.getLocalTime().toString();
data.currentHour = parseInt(localTimeString.substring(0, 2), 10);
data.userName = gs.getUser().getFullName();

Step 3:

Add below Client controller code -

api.controller=function($scope, $http) {
/* widget controller */

// Use the currentHour value passed from the server script
var currentHour = parseInt($scope.data.currentHour, 10);

if (currentHour < 12) {
$scope.greetingMessage = "Good morning!";
} else if (currentHour >= 12 && currentHour < 16) {
$scope.greetingMessage = "Good afternoon!";
} else if (currentHour >= 16 && currentHour < 24) {
$scope.greetingMessage = "Good evening!";
} else {
$scope.greetingMessage = "Hello!";
}
var c = this;
};

Step 4:

Add below html code -

<div id="homepage-search" class="hidden-xs wrapper-xl">
<div class="wrapper-xl">
<h2 class="text-4x m-b-lg sp-tagline-color">{{greetingMessage}} {{::data.userName}}</h2>
<sp-widget widget="data.typeAheadSearch"></sp-widget>
</div>
</div>

Step 5: 

Go to page in designer and replace OOB homepage search widget with this clone widget

Output Result:

Please mark my answer as correct and helpful if it works for you.

Regards

Moin

[Aman_07]

Hi @Moin Kazi,

I have done as you suggest but unable to done the step 5.

Can u pls tell me the path where I need to select the clone widget.

Below is SS Of Clone widget:
1. 

2. 

3. Now what to do??

Please Guide me on this.....

Thanks in Advance

[Moin Kazi · Accepted solution]

Hi @Aman_07 

Use below URL with your instance name -

https://<Put your Instance name here>.service-now.com/$spd.do#/esc/editor/ec_home/eb134f4d5308d21041cb51a0a0490e54

Remove OOB Homepage search widget - Click on delete icon in top right corner mention in the image -

Next - Search your clone widget as mentioned in the image and drag and drop to your desired place

Please mark my answer as correct and helpful if it works for you.

Regards

Moin