Show initials of first name and last name in service portal

Rose17 · ‎11-01-2022

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-

<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.

Raghav Sharma24 · ‎11-01-2022

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

View solution in original post

Raghav Sharma24 · ‎11-01-2022