Create a Diverse Welcome Message in your Service Now Employee Center
Employee Center has a nice hero illustration with a prompt to search for help. A common pattern I’ve seen is customizing with a Welcome message for the current user. Let’s expand on this a bit and include a diverse welcome message that rotates greetings in different languages.
Use the application navigator and navigate to Service Portal > Widgets list and select the Homepage Search widget. Here’s what we get for the default
<img dangerouslySetInnerHTML={{ __html: product.description }} className={rounded-full float-right ml-4 hidden md:block lg:block
} src="images/robert-fauver-fauverism-06-2022.jpg" alt="Robert Fauver" />
Let's clone with Homepage Search and call it Homepage Search and Welcome. Time in write some JavaScript in the client controller. We’ll need to…
- Create an array of containing Welcome messages in various languages. We'll go with English, German, Dutch, Punjabi, Japanese, Somali, and Welsh. For fun the Japanese characters will be added.
- Randomize the array
- Make the array available in the scope so we can reference with data binding it in the HTML
Here's what we have for the Client controller
api.controller=function($scope) {
/* widget controller */
var c = this;
var welcomeLanguages = [
'Welcome',
'Willkommen',
'Welkom',
'Suāgata hai',
'いらっしゃいませ',
'Soo dhawoow',
'Croeso'];
var random = Math.floor(Math.random() * welcomeLanguages.length);
var welcome = welcomeLanguages[random];
$scope.welcome = welcome;
};
Update the widget in the Employee Center Homepage with $scope.welcome
and ...
<h2 class="text-center text-4x m-b-lg sp-tagline-color">{{welcome}}, Robert</h2>
Hit Save, Refresh multiple times to see the random welcome messages. 🥳
Possible Enhancements
**Masculine and Femine
**Add the flag of the country where the language is used