Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Spencer BerkSpencer Berk 

How to style lightning:outputFields in a recordViewForm?

I have the following component for my Community dispaying specific fields pulled from the user's Account object. How can I style the lightning:outputFields? I have wrapped the lightning:outputFields in a Div wrapper and tried to style that but doesn't work. Any suggestions? 
<aura:component controller="AccountDisplayController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="accountId" type="string" default = '0010r00000BtdLoAAJ'/>
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    
    <aura:if isTrue="{! not( empty( v.accountId ) ) }">
        <div class="billingtitle"><h1>Billing Information</h1></div>
        <lightning:recordViewForm recordId="{!v.accountId}" objectApiName="Account">
            
            <div class="slds-grid">
                <div class="slds-col slds-size_1-of-2">
                    <lightning:outputField fieldName="Agreement_Date__c"/>
                    <lightning:outputField fieldName="Renewal_Date__c"/>
                </div>
                <div class="slds-col slds-size_1-of-2">
                    <lightning:outputField fieldName="Product_Service1__c"/>
                    <lightning:outputField fieldName="Number_of_Seats_Purchased__c"/>
                </div>
            </div>
        </lightning:recordViewForm>
    </aura:if>
</aura:component>

 
Best Answer chosen by Spencer Berk
ryanschierholzryanschierholz
Yeah, I found it difficult to style outputField items as well, and that's why I avoid recordViewForm and use the helper to get the data and hold it all in a variable in order to display as I wanted. I'll get into that in a little bit. BUT, let's start with trying the basic style you are looking for. Here are two items to add to your STYLE doc:
  
.THIS .number-of-seats span {
    color:red;
    font-size:200%;
}
.THIS .number-of-seats lightning-formatted-number {
    color:blue;
    font-size:200%;
}

The first one styles the LABEL and the second one styles the contents.

If you want to switch it up and display record data a different way, you could try this 
<aura:component controller="AccountDisplayController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="accountId" type="string" default = '0010r00000BtdLoAAJ'/>
    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <aura:attribute name="acct" type="Object"/>
    <aura:attribute name="recordError" type="String"/>

    <force:recordData aura:id="recordLoader"
          recordId="{!v.accountId}"
          targetFields="{!v.acct}"
            fields="Id,Agreement_Date__c,Renewal_Date__c,Product_Service1__c,Number_of_Seats_Purchased__c"
          targetError="{!v.recordError}"
          layoutType="FULL"
                      />

    <aura:if isTrue="{! not( empty( v.accountId ) ) }">
        <div class="billingtitle"><h1>Billing Information</h1></div>
            
            <div class="slds-grid">
                <div class="slds-col slds-size_1-of-2">
                    <div class="style-label">Agreement Date: {!v.acct.Agreement_Date__c}</div>
                    <div class="style-content">Agreement Date: {!v.acct.Renewal_Date__c}</div>
                </div>
                <div class="slds-col slds-size_1-of-2">
                    <div class="style-label">Agreement Date: {!v.acct.Product_Service1__c}</div>
                    <div class="style-content">Agreement Date: {!v.acct.Number_of_Seats_Purchased__c}</div>
                </div>
            </div>


    </aura:if>
    <aura:if isTrue="{!not(empty(v.recordError))}">
        <div class="recordError">
            {!v.recordError}</div>
    </aura:if>
</aura:component>

All Answers

ryanschierholzryanschierholz
What type of style are you hoping to apply? You should be able to display the content, without the outputField, (if set in your controller) using the syntax {!v.Agreement_Date__c} etc i.e.
  
<div class="slds-col slds-size_1-of-2">
               <div>{!v.Agreement_Date__c}</div>
                  <div>{!v.Renewal_Date__c}</div>
                </div>

 
Spencer BerkSpencer Berk
I would like to change the Font Size and Font Color. I am not a developer so what exactly would I change in my controller to use your above syntax?

Controller: 
({
	init : function(component, event, helper) {
		helper.getAccountId(component, event, helper);
	}
})

 
ryanschierholzryanschierholz
We'd have to look at your helper.getAccountId method. BUT, let's go a different route and look at your STYLE element. First, add a custom class to your componenet <div> 
<div class="slds-grid custom-class-name">

Then in your STYLE element, you can adjust it's style:
  
.THIS .custom-class-name {
     color:red;
     font-size:200%;
}


 
Spencer BerkSpencer Berk
I made my div wrapper <div class="slds-grid number-of-seats">

My CSS: 
.THIS.slds-grid number-of-seats {
   font-size:200%;
   color:#2669b2;
}
I tried .THIS.number-of-seats as well and it didn't work.



My Helper: 
({
	getAccountId : function(component, event, helper) {
		var getAccountIdAction = component.get("c.getAccountId");
        getAccountIdAction.setCallback(this, function(response){
            if(response.getState() === 'SUCCESS'){
                component.set("v.accountId", response.getReturnValue());
            } else {
                alert('Something went wrong!!!');
            }
            
        });
        $A.enqueueAction(getAccountIdAction);
	}
})

I've been able to style a div outside the lightning:recordViewForm wrapper but when I try to style those to lightning output fields, no success.
ryanschierholzryanschierholz
Yeah, I found it difficult to style outputField items as well, and that's why I avoid recordViewForm and use the helper to get the data and hold it all in a variable in order to display as I wanted. I'll get into that in a little bit. BUT, let's start with trying the basic style you are looking for. Here are two items to add to your STYLE doc:
  
.THIS .number-of-seats span {
    color:red;
    font-size:200%;
}
.THIS .number-of-seats lightning-formatted-number {
    color:blue;
    font-size:200%;
}

The first one styles the LABEL and the second one styles the contents.

If you want to switch it up and display record data a different way, you could try this 
<aura:component controller="AccountDisplayController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="accountId" type="string" default = '0010r00000BtdLoAAJ'/>
    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <aura:attribute name="acct" type="Object"/>
    <aura:attribute name="recordError" type="String"/>

    <force:recordData aura:id="recordLoader"
          recordId="{!v.accountId}"
          targetFields="{!v.acct}"
            fields="Id,Agreement_Date__c,Renewal_Date__c,Product_Service1__c,Number_of_Seats_Purchased__c"
          targetError="{!v.recordError}"
          layoutType="FULL"
                      />

    <aura:if isTrue="{! not( empty( v.accountId ) ) }">
        <div class="billingtitle"><h1>Billing Information</h1></div>
            
            <div class="slds-grid">
                <div class="slds-col slds-size_1-of-2">
                    <div class="style-label">Agreement Date: {!v.acct.Agreement_Date__c}</div>
                    <div class="style-content">Agreement Date: {!v.acct.Renewal_Date__c}</div>
                </div>
                <div class="slds-col slds-size_1-of-2">
                    <div class="style-label">Agreement Date: {!v.acct.Product_Service1__c}</div>
                    <div class="style-content">Agreement Date: {!v.acct.Number_of_Seats_Purchased__c}</div>
                </div>
            </div>


    </aura:if>
    <aura:if isTrue="{!not(empty(v.recordError))}">
        <div class="recordError">
            {!v.recordError}</div>
    </aura:if>
</aura:component>
This was selected as the best answer
Spencer BerkSpencer Berk
Thanks Ryan! I changed my component to display the way you presented above. I can now style the label and content. 
Spencer BerkSpencer Berk
Ryan, I noticed this component only works when loggedin as the User who's AccountId is set as Default in the component code. I tried changing AccountId to recordId to see if that worked but it didn't. I may not be doing it right with the recordId. Any suggestions for this component to work with any loggedin community user?
ryanschierholzryanschierholz
Ah. You’ll want to change the Sharing on the controller, AccountDisplayController - I think you’ll use “without sharing” For sharing options, check out https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_classes_keywords_sharing.htm Ryan Schierholz
Lalitha Pavani Rallabandi 9Lalitha Pavani Rallabandi 9

Hi Ryan,
I have the similar requirement but, I don't have any helper class or any server calls etc. Here I am using record view form and output field tag. I want to make the record's name bold. 

Here is the code:
 

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

And the snap of the output. Here I highlighted the area which I want to turn it bold. Please help me out on this.User-added image
ryanschierholzryanschierholz
Lalitha, you'll need to add a class to your div and put the styling in the Style (.css) file. 

DIV:  
<div class="boldClass">
   <lightning:outputField fieldName="Name" variant="label-hidden" />
</div>
add the style component
STYLE: 
.THIS .boldClass .slds-form-element .slds-form-element__control .slds-form-element__static {   
    font-weight: bold;
}

 
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;
}