How to get Personalized greeting on Home page for ESC portal

Aditya02
Tera Guru

I have to create a widget with customized greeting with necessary conditions:

  • The user's first name is dynamically displayed in the greeting text (e.g., "Hello, Chitrika").
  • The greeting should adjust to accommodate different screen sizes and orientations (responsive design).
  • The greeting text should update if the user changes their profile information.

 

image (17).png

 

image (16).png

 

 

 

 

 

I want to create like this, anyone help me out to get this done.

1 ACCEPTED SOLUTION

Moin Kazi
Kilo Sage
Kilo Sage

Hi @Aditya02 ,

 

Follow below to step achieve this -

 

Step 1:

Clone it Homepage search widget 

 

Step 2: 

Add Below Server-Side Code -

 

var aisEnabled = $sp.isAISearchEnabled();

if (aisEnabled)
	data.typeAheadSearch = $sp.getWidget('typeahead-search', options);
else
	data.typeAheadSearch = $sp.getWidget('typeahead-search', options.typeahead_search);
data.userName = gs.getUser().getFirstName();

Step 3:

Add below Client controller code -

api.controller=function($scope, $http) {
};

 

Step 4:

Add below html code -

<div id="homepage-search" class="hidden-xs wrapper-xl">
  <div class="wrapper-xl">
  	<h1 class="text-4x m-b-lg sp-tagline-color">Hello! {{::data.userName}}, <br></h1>
    <h2 class="text-x m-b-lg sp-tagline-color">
     Welcome to the <strong>Briliance</strong> Portal How can we help <br>you today? 
    </h2>
  	<sp-widget widget="data.typeAheadSearch"></sp-widget>
  </div>
</div>

 

Step 5:

add below CSS-SCSS

.sp-tagline-color {
	color: $sp-tagline-color;
  font-family: Aptos Mono;
}

#homepage-search {
  .aisearch {
    --classicsponlydonotuse--rem-multipy: 1.6;
  }
}

 

Step 6 - 

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

Or

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 and add your cloned widget on same place.

 

Output Result:

MoinKazi_1-1728496018754.png

 

 

Mark MoinKazi_2-1728496045746.png Correct if this solves your issue and also mark MoinKazi_3-1728496045748.png Helpful if you find my response worthy based on the impact.

 

Regards

Moin

View solution in original post

1 REPLY 1

Moin Kazi
Kilo Sage
Kilo Sage

Hi @Aditya02 ,

 

Follow below to step achieve this -

 

Step 1:

Clone it Homepage search widget 

 

Step 2: 

Add Below Server-Side Code -

 

var aisEnabled = $sp.isAISearchEnabled();

if (aisEnabled)
	data.typeAheadSearch = $sp.getWidget('typeahead-search', options);
else
	data.typeAheadSearch = $sp.getWidget('typeahead-search', options.typeahead_search);
data.userName = gs.getUser().getFirstName();

Step 3:

Add below Client controller code -

api.controller=function($scope, $http) {
};

 

Step 4:

Add below html code -

<div id="homepage-search" class="hidden-xs wrapper-xl">
  <div class="wrapper-xl">
  	<h1 class="text-4x m-b-lg sp-tagline-color">Hello! {{::data.userName}}, <br></h1>
    <h2 class="text-x m-b-lg sp-tagline-color">
     Welcome to the <strong>Briliance</strong> Portal How can we help <br>you today? 
    </h2>
  	<sp-widget widget="data.typeAheadSearch"></sp-widget>
  </div>
</div>

 

Step 5:

add below CSS-SCSS

.sp-tagline-color {
	color: $sp-tagline-color;
  font-family: Aptos Mono;
}

#homepage-search {
  .aisearch {
    --classicsponlydonotuse--rem-multipy: 1.6;
  }
}

 

Step 6 - 

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

Or

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 and add your cloned widget on same place.

 

Output Result:

MoinKazi_1-1728496018754.png

 

 

Mark MoinKazi_2-1728496045746.png Correct if this solves your issue and also mark MoinKazi_3-1728496045748.png Helpful if you find my response worthy based on the impact.

 

Regards

Moin