The ask is that when Some logs into our HR Employee Center - It says on the Banner which is a Title Widget - They are asking that it says something like "Welcome, <User's First name> to the HR Service Portal" Any ideas?
Hey Wendy,
I did something like what you want within a Widget - specifically HR Home Search widget. A person's name in the banner as you are showing may seem a bit large to some people. But that is just my own opinion.
For ours, I had the HTML display the Nickname of the user which is mapped to the user profile (sys_user) table created custom. It is not an OOTB field.
Looks like this:
If you wanted to do something like that, you would use the Widget in Editor option, which you can get to while on the portal page itself. Right-click on the Widget and select Widget in Editor:
Be sure to be in the correct application where the widget it stored
From within the widget editor you would need to change two things. The HTML and the Server Script to pull in the correct information and display that information.
HTML we did:
<div id="homepage-search" class="hidden-xs wrapper-xl">
<div class="wrapper-xl">
<h1 style="color:#FFFFFF; font-family: Arial">
Hello, {{data.nickName}}
</h1>
<h2 class="text-center text-4x m-b-lg sp-tagline-color" ng-bind="options.title"></h2>
<div ng-if="options.short_description" class="text-center h4 m-b-lg sp-tagline-color" ng-bind="options.short_description"></div>
<sp-widget widget="data.typeAheadSearch"/>
</div>
</div>Server Script: notice the data we are bringing over for the nickname. Of course if you wanted nickname it would need to be something you already have in the system. Otherwise FirstName you can get which is already OOTB on the user table.
var aisEnabled = $sp.isAISearchEnabled();
data.firstName = gs.getUser().getFirstName();
data.nickName = gs.getUser().getRecord().getValue('u_nickname');
if (aisEnabled)
data.typeAheadSearch = $sp.getWidget('typeahead-search', options);
else
data.typeAheadSearch = $sp.getWidget('typeahead-search', options.typeahead_search);This was just an idea to float your way.
Another Widget you could try to use as well would be the Content Experience widget. That has options to display a message / name as well. I would recommend that widget as well to display a message with a users name as you can do something very similar to what I have displayed to you using the HR Home Search Widget.
I hope this has helped you out/pointed in another optional direction.
Cheers,
-Rob
unable to edit
Hi Rob,
I came across this topic and did the same. And it is working finely.
But my issue is the text does not get translated when I switch to other languages like german.
Do you know how can I get the text translated?
Hey @Baatyr Patta -
I am very sorry - I never saw this reply with your question. It has been a few months, and I am not sure if you ever got your answer (If you created a new post or not). But for this, I believe you would need to create a new UI System Message that holds the translated text. So, you would need to create one for each language you use. Then, Modify your widget HTML, Server Script, and Client Controller.
I created a new home page search widget in my new PDI to show you how it could look as an example:
HTML
<div id="homepage-search" class="hidden-xs wrapper-xl">
<div class="wrapper-xl">
<h1 style="color:#000000; font-family: Arial">
{{data.greetingMessage}}, {{data.nickName}}
</h1>
<h2 class="text-center text-4x m-b-lg sp-tagline-color" ng-bind="options.title"></h2>
<div ng-if="options.short_description" class="text-center h4 m-b-lg sp-tagline-color" ng-bind="options.short_description"></div>
<sp-widget widget="data.typeAheadSearch"/>
</div>
</div>
Server Script:
var aisEnabled = $sp.isAISearchEnabled();
//data.firstName = gs.getUser().getFirstName();
data.nickName = gs.getUser().getRecord().getValue('u_nick_name');
// Retrieve the translated greeting message from the System UI Message
data.greetingMessage = gs.getMessage('homepage_greeting_text');
if (aisEnabled)
data.typeAheadSearch = $sp.getWidget('typeahead-search', options);
else
data.typeAheadSearch = $sp.getWidget('typeahead-search', options.typeahead_search);
Client Controller:
api.controller = function() {
/* widget controller */
var c = this;
// Ensure the greeting message is accessible in the HTML
c.greetingMessage = c.data.greetingMessage;
};
(I will show mine in Spanish, Deutsch with System UI Message, and Italian with System UI Message)
English real quick
Italian System UI Message (mind you this is using Google Translate just for show)
Widget
Spanish - Widget
Deutsch System UI Message (mind you this is using Google Translate just for show)
Widget
So, you need all of those components working together to translate the greeting there.
Your message you added to the widget, is considered technically custom. And therefore will not be translated unless you create the translation as I have laid out above.
Here is the widget as it is OOTB - you can see everything within it is Translated without any modifications. Because OOTB text is translated for us:
Hope this helps!
Cheers,
-Rob
