Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

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