+ Start a Discussion
Steve ConnellySteve Connelly 

How do I change a lightning Component to display the label name instead of the API name?

The AccountTeamMember widget (Lightning Component) displays the Role API Name instead of the Role Label.

How do i change the lightning component so it will display the role label instead of the role API name?

Here is the component code:
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="AccountTeamHelper">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="TeamMembers" type="AccountTeamMember[]" /> 	  
    <lightning:card title="Account Team" iconName="custom:custom103">
        <div style="margin: 0px 5px">
            <p class="slds-p-horizontal_small">
                <aura:if isTrue="{!v.TeamMembers.length > 0}">
                <aura:iteration items="{!v.TeamMembers}" var="member">
                    <!-- <span style="display: inline-block; margin: 3px;"><lightning:avatar src="{!member.User.SmallPhotoUrl}" alternativeText="(Avatar)" fallbackIconName="standard:avatar" variant="circle" /></span> -->
                    <span><a href="{!'/one/one.app#/sObject/' + member.User.Id + '/view'}">{!member.User.FirstName}&nbsp;{!member.User.LastName}</a> - {!member.TeamMemberRole}</span><br/>
                </aura:iteration>
                <aura:set attribute="else">
                    No account team members have been assigned to this account.
                </aura:set>
                </aura:if>
        	</p>
        </div>
    </lightning:card>
</aura:component>

 
Best Answer chosen by Steve Connelly
Maharajan CMaharajan C
Can you please mark the best answer if your issue solved !!!

All Answers

Maharajan CMaharajan C
Hi Steve,

No changes are required in aura component file. You need the changes in AccountTeamMember Soql on Apex class.

Can you please update your soql query in AccountTeamHelpe to access the label of TeamMemberRole as below:
 
SELECT AccountId,toLabel(TeamMemberRole),User.FirstName,User.LastName,User.Id FROM AccountTeamMember

change TeamMemberRole --> toLabel(TeamMemberRole)  in SOQL will solve your issue.


Thanks,
Maharajan.C
Maharajan CMaharajan C
The Below is my Sample component which showing the role label correctly:
 
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" controller="AccountTeamHelper" access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="TeamMembers" type="AccountTeamMember[]" /> 	  
    <lightning:card title="Account Team" iconName="custom:custom103">
        <div style="margin: 0px 5px">
            <p class="slds-p-horizontal_small">
                <aura:if isTrue="{!v.TeamMembers.length > 0}">
                    <aura:iteration items="{!v.TeamMembers}" var="member">
                        <!-- <span style="display: inline-block; margin: 3px;"><lightning:avatar src="{!member.User.SmallPhotoUrl}" alternativeText="(Avatar)" fallbackIconName="standard:avatar" variant="circle" /></span> -->
                        <span><a href="{!'/one/one.app#/sObject/' + member.User.Id + '/view'}">{!member.User.FirstName}&nbsp;{!member.User.LastName}</a> - {!member.TeamMemberRole}</span><br/>
                    </aura:iteration>
                    <aura:set attribute="else">
                        No account team members have been assigned to this account.
                    </aura:set>
                </aura:if>
            </p>
        </div>
    </lightning:card>
</aura:component>

JS:
 
({
    doInit : function(component, event, helper) {
        var action = component.get("c.getAccTeams");
        action.setParams({
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                console.log('response --> ' + JSON.stringify(response.getReturnValue()));
                component.set("v.TeamMembers", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    }
})


Class:
 
public class AccountTeamHelper {
	@AuraEnabled
    Public static List<AccountTeamMember> getAccTeams(){
        return [SELECT AccountId,toLabel(TeamMemberRole),User.FirstName,User.LastName,User.Id FROM AccountTeamMember];
    }
}


Thanks,
Maharajan.C
Maharajan CMaharajan C
Hi Steve, Did you have a chance to try the above solution...
John James 6John James 6
If I go to Setup | Lightning App Builder, I navigate to the Lightning Page in question and I select 'Edit'. I am able to see all https://crackmap.com/
Steve ConnellySteve Connelly
Yes I did. I understood what to do once I understood that I needed to edit a class that was feeding the Lightning component.

Thank you so much for the guidance!
Steve
Maharajan CMaharajan C
Yes, Check your Apex Class ==>  AccountTeamHelper , Apex Method Name you can find it from JS doInit method.
Maharajan CMaharajan C
Can you please mark the best answer if your issue solved !!!
This was selected as the best answer
hsd ashsd as
Can you share the complete scirpt of this program? I want to try it for my blog (https://achievegroup.asia/2018/02/13/strategies-to-spearhead-innovation-an-executive-search-firm-perspective/).
gsd dgsd d
Seems good. How can I integrate the local script in this program? I want to test it for my vehicle website (https://vehicletreat.com/).