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

View solution in original post

5 REPLIES 5

RaghavSh
Kilo 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

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

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.