For eg:- my name is hitesh rayal and want to display it in the same way as they have done in the below screenshot

example image

get profile user first letter of first name and last name and display it in a icon or anything like this

closed as off-topic by Raul, Pranay Jaiswal, glls, Derek F, Sebastian Kessel May 14 at 6:38

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions on problems in code you've written must describe the specific problem and include valid code to reproduce it. For help writing short, self-contained syntactically-valid examples, see: SSCCE.org" – Raul, Pranay Jaiswal, glls, Derek F, Sebastian Kessel
If this question can be reworded to fit the rules in the help center, please edit the question.


well i did it if any body want the same can copy paste the same samplecmp.apxc

public class ProfileValueController {
     public static String getfirstlastname()
    String returnString = '' ;
    String FirstName = UserInfo.getFirstName();//Returns the context user's firstname
    System.Debug('FirstName-' + FirstName);
    String LastName = UserInfo.getLastName();//Returns the context user's last name.
    System.Debug('LastName-' + LastName);
    returnString = FirstName.toUpperCase().substring(0,1) + ' '+ 
    return returnString;


<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="Fnameletter" type="String"/>  
<div class="circle">{!v.Fnameletter}</div>`


  doInit : function(component, event, helper) {
    var action = cmp.get("c.getfirstlastname");
    action.setCallback(this, function(response) {
      var state = response.getState();
      if (state === "SUCCESS") {
        component.set("v.Fnameletter", response.getReturnValue());
      } else if (state === "ERROR") {
        var errors = response.getError();
        if (errors) {
          if (errors[0] && errors[0].message) {
            console.log("Error message: " + errors[0].message);


.THIS.circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 15px;
  color: #fff;
  line-height: 40px;
  text-align: center;
  background: #2a9fd8;
  /* display: inline-block;*/
  • code dumps are generally frowned upon - mind explaining every code block section? – glls May 14 at 22:35

Not the answer you're looking for? Browse other questions tagged or ask your own question.