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.

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.