function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Lalitha Pavani Rallabandi 9Lalitha Pavani Rallabandi 9 

I want to bold the record name using the <lightning:outputField> and I am not using any apex class or something other since we are using LDS (Lightning Data Services). Here is my code. Please help me out to make the Record Name bold

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="recordId" type="ID"/>
    <aura:attribute name="lead" type="Lead"/>
    <lightning:recordViewForm recordId="{!v.recordId}" objectApiName="Lead" density="comfy" >
        <lightning:card iconName="standard:lead">
            <aura:set attribute="title">
                Lead<br></br>
                <div style="font-weight: bold;">
                    <lightning:outputField fieldName="Name" variant="label-hidden" />
                </div>
            </aura:set>
            <lightning:layout>
                <lightning:layoutItem padding="around-small" size="2">
                    <lightning:outputField fieldName="AnnualRevenue"/>
                </lightning:layoutItem>
                <lightning:layoutItem padding="around-small" size="2">
                    <lightning:outputField fieldName="Email"/>
                </lightning:layoutItem>
                <lightning:layoutItem padding="around-small" size="2">
                    <lightning:outputField fieldName="Fax"/>
                </lightning:layoutItem>
                <lightning:layoutItem padding="around-small" size="2">
                    <lightning:outputField fieldName="Industry"/>
                </lightning:layoutItem>
                <lightning:layoutItem padding="around-small" size="2">
                    <lightning:outputField fieldName="LeadSource"/>
                </lightning:layoutItem>
                <lightning:layoutItem padding="around-small" size="2">
                    <lightning:outputField fieldName="Status"/>
                </lightning:layoutItem>
            </lightning:layout> 
        </lightning:card>
    </lightning:recordViewForm>
</aura:component>
Bold the highlighted record name
 
Best Answer chosen by Lalitha Pavani Rallabandi 9
Barthelemy Laurans 1Barthelemy Laurans 1
Hi,
lightning:recordViewForm doesn't have the onload method use lightning:recordEditForm if you still want to use outputField component to display field value. In this case you can extract the Name field to a variable and display it without using outputField as the formating issue comes from this component.

Another solution might be to use the "class" attribute of the outputField to style it. It should allow you to give the proper style.

Otherwise your solution is obviously working and is a good option. It just require a little bit more code and is more custom. Sometimes Salesforce force us to go that way, it's sad but it's a lot easier to make our own workarounds that to wait for them to fix anything. Especially if you work with aura components which are deprecated in favour of LWC. Switching to LWC is also a really good option here. I started working with LWC a while ago and find it easier to customize. Depending on what you need to achieve, I will first try to go with LWC and if not possible then use Aura.

Best regards,
Barthélemy

All Answers

ANUTEJANUTEJ (Salesforce Developers) 
Hi Lalitha,

Can you have a look at the below link:

>> https://developer.salesforce.com/forums/?id=9062I000000XpanQAC 

In case if this helps can you please choose this as best answer so that it can be used by others in the future.

Regards,
Anutej
{tushar-sharma}{tushar-sharma}
Can you try below code, let see if its work 
<b><lightning:outputField fieldName="Name" variant="label-hidden" /></b>

If this answer helps you, please mark it as accepted.

Regards,
Tushar Sharma
https://newstechnologystuff.com/
ANUTEJANUTEJ (Salesforce Developers) 
I have tried the above way tushar but it wasn't working, so when I searched I found the above link.
Barthelemy Laurans 1Barthelemy Laurans 1
Hi, unfortunately I think your issue is link to the way styles (CSS) are applied.
In your case, the outputField component probably override the css you try to apply.

Just a small advice here.
Salesforce has made SLDS system with UX designer. They give a lot of guidelines about how we should display things. Not following what they advice is always an option and not the recommended one. That being said, users always have weird request, it is also our job to educate them that some requests doesn't make sense in the context they are working and that other solutions can be found sometimes.
End of the advice.

For me you can investigate three different options :
  • Don't use scope CSS (.THIS) and give a very specific definition for your html element that need bold (not sure it works)
.myClass ligthning-output-field.slds-form-element span.slds-form-element__label {
    font-weight: bold;
}
<div class="myClass">
    <lightning:outputField fieldName="Name" variant="label-hidden" />
</div>
  • Use lightning:recordEditForm with onload method to catch record, store the Name in a variable and display this variable as you wish
  • Use force:recordData to load record in a variable and then make the display to look as you wish (full control)
Lalitha Pavani Rallabandi 9Lalitha Pavani Rallabandi 9

Hi @Barthelemy Laurans 1, Sorry didn't work. 

I am doing the same using  "force record data" form. It is working. I tried the same with record view form, but no use. I don't understand the exact issuw with record view form. 

Here is the code with force record data with minor changes in displaying the fields.

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="leadRecord" type="Lead"/>
    <aura:attribute name="recordLoadError" type="String"/>
    <force:recordData aura:id="recordLoader"
                      recordId="{!v.recordId}"
                      targetFields="{!v.leadRecord}"
                      targetError="{!v.recordLoadError}"
                      layoutType="FULL"
                      />
    <lightning:card iconName="standard:lead">
        <aura:set attribute="title">
            Lead<br></br>
            <b> {!v.leadRecord.Name} </b>
          </aura:set>
        <lightning:layout multipleRows="true">
            <lightning:layoutItem padding="around-small">
                <p class="field-title" title="AnnualRevenue">AnnualRevenue</p>
                <lightning:formattedNumber title="AnnualRevenue" value="{!v.leadRecord.AnnualRevenue}" />
            </lightning:layoutItem>
            
            <lightning:layoutItem padding="around-small">
                <p class="field-title" title="Title">Title</p>
                <lightning:formattedText title="Title" value="{!v.leadRecord.Title}" />
            </lightning:layoutItem>
            
            <lightning:layoutItem padding="around-small">
                <p class="field-title" title="Phone">Phone</p>
                <lightning:formattedPhone title="Phone" value="{!v.leadRecord.Phone}" />
            </lightning:layoutItem>
            
            <lightning:layoutItem padding="around-small">
                <p class="field-title" title="Name">Name</p>
                <lightning:formattedText title="Name" value="{!v.leadRecord.Name}" />
            </lightning:layoutItem>
            
            <lightning:layoutItem padding="around-small">
                <p class="field-title" title="LeadSource">LeadSource</p>
                <lightning:formattedText title="LeadSource" value="{!v.leadRecord.LeadSource}" />
            </lightning:layoutItem>
            
            <lightning:layoutItem padding="around-small">
                <p class="field-title" title="Email">Email</p>
                <lightning:formattedEmail title="Email" value="{!v.leadRecord.Email}" />
            </lightning:layoutItem>
            
            <lightning:layoutItem padding="around-small">
                <p class="field-title" title="Industry">Industry</p>
                <lightning:formattedText title="Industry" value="{!v.leadRecord.Industry}" />
            </lightning:layoutItem>
            
            <lightning:layoutItem padding="around-small">
                <p class="field-title" title="OwnerId">OwnerId</p>
                <lightning:formattedText title="OwnerId" value="{!v.leadRecord.OwnerId}" />
            </lightning:layoutItem>
            
            <lightning:layoutItem padding="around-small">
                <p class="field-title" title="Status">Status</p>
                <lightning:formattedText title="Status" value="{!v.leadRecord.Status}" />
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small">
                <p class="field-title" title="Primary__c">Primary__c</p>
                <lightning:formattedText title="Primary__c" value="{!v.leadRecord.Primary__c}" />
            </lightning:layoutItem>
        </lightning:layout>            
    </lightning:card>
</aura:component>

And the resulted output is::
User-added image
Barthelemy Laurans 1Barthelemy Laurans 1
Hi,
lightning:recordViewForm doesn't have the onload method use lightning:recordEditForm if you still want to use outputField component to display field value. In this case you can extract the Name field to a variable and display it without using outputField as the formating issue comes from this component.

Another solution might be to use the "class" attribute of the outputField to style it. It should allow you to give the proper style.

Otherwise your solution is obviously working and is a good option. It just require a little bit more code and is more custom. Sometimes Salesforce force us to go that way, it's sad but it's a lot easier to make our own workarounds that to wait for them to fix anything. Especially if you work with aura components which are deprecated in favour of LWC. Switching to LWC is also a really good option here. I started working with LWC a while ago and find it easier to customize. Depending on what you need to achieve, I will first try to go with LWC and if not possible then use Aura.

Best regards,
Barthélemy
This was selected as the best answer
amol navthale 22amol navthale 22
This might be resolved already but in case someone is looking for an easy wasy to do it.
we can do by wrapping in class

<div class="boldClass">
                <lightning-output-field field-name={field1} field-class="boldClass"> </lightning-output-field>
            </div>

in css : 

.boldClass{
    --lwc-inputStaticFontWeight: bold !important;
}