Welcome to Community Week 2025! Join us to learn, connect, and be recognized as we celebrate the spirit of Community and the power of AI. Get the details  

Show initials of first name and last name in service portal

Rose17
Tera Contributor

Hi All,

 

I am new to Service Portal and I have never worked on it before.

The requirement is- I have to 2 text box fields on the page- for eg- first name and last name. I have a Submit button below those fields.

So when the user fills the first name as 'Abel' and last name as - 'Tuter', and clicks on Submit button, the initial of first name and last name- say-AT should be displayed.

 

I have tried below code but its not working-

 

HTML-

<html>
<body>

<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" ><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" ><br><br>
<button class="btn btn-primary" ng-click="c.clickButton()">Submit</button>
<h1>
{{c.data.result}}
</h1>

</body>
</html>

Client controller-

api.controller=function($scope) {
/* widget controller */
var c = this;
c.clickButton = function() {
c.data.firstname=data.fname;
c.data.lastname=data.lname;
c.data.result="";
c.server.update();
}
}

 

Server script-

(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */

if(input)
{
data.firstname=input.fname;
data.lastname=input.lname;

var a=data.firstname[0][0];
var b=data.lastname[0][0];

var res=a+b;
data.result = res;
}
})();

 

Could somebody please help me resolve it?

Thanks in advance.

1 ACCEPTED SOLUTION

The below code worked for me:

HTML:

<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" ><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" ><br><br>
<button class="btn btn-primary" ng-click="c.clickButton()">Submit</button>
<h1>
{{data.result}}
</h1>

 

Client:

c.clickButton = function() {
c.data.firstname=$('#fname').val();
c.data.lastname=$('#lname').val();

c.server.update();
}

 

Server:

 

if(input)
{
data.result = input.firstname.charAt(0) + input.lastname.charAt(0);
}

 

Please mark the answer correct/helpful accordingly


Raghav
MVP 2023
LinkedIn

View solution in original post

5 REPLIES 5

RaghavSh
Mega Patron

Try below, it should give you the initials in <h> tag:

<h1>
{{data.result}}
</h1>

 

Also in client script make below changes:

c.data.firstname=$('#fname').val();
c.data.lastname=$('#lname').val();

 Try to alert in client side if you are getting the values of $('#fname').val(); or $('#lname').val();


Raghav
MVP 2023
LinkedIn

Rose17
Tera Contributor

Hi,

I made the changes as per your suggestion.

But i am getting these errors-

Rose17_0-1667301460550.png

 

c.data.firstname=document.getElementById('fname').innerHTML  or use ocument.getElementById('fname').value()
 and same for last name


Raghav
MVP 2023
LinkedIn

Rose17
Tera Contributor

When i used- document.getElementById('fname').value(), it is not even showing alert in client controller and when i used- document.getElementById('fname').innerHTML, it showing alert but having empty value.