function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Lavanya VailadaLavanya Vailada 

force:inputfield and force:outputfield in lightening component

We have lightening CMP which has force:inputfield to display the input fields. IF we use the CMP as a tab on the pagelayout, input bar is displayed, where as if we use the same CMP to override the buttons(Edit) we are not getting the input bars.

We dont want to use ui:inputText as for lookup's and picklist we need to write extra code.

Any suggestions would be highly helpful
Best Answer chosen by Lavanya Vailada
Priti jaiswal 8Priti jaiswal 8
Hi Lavanya,

This is a well known issue and slaesforce suggests a workaround to this. 

https://success.salesforce.com/issues_view?id=a1p3A0000008gLZQAY

I tried this and it worked for me -

<!-- <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="GLOBAL"> -->
<aura:component implements="lightning:actionOverride,force:hasRecordId,force:hasSObjectName" access="GLOBAL"> 
    
    <aura:attribute name="contact" type="Contact" default="{ 'sobjectType' : 'Contact' }" /> 
    <force:inputField aura:id="hiddeninout" value="{!v.contact.FirstName}" class = "display:none"/>
    <div>
        <label>Contact</label> 
        <force:inputField aura:id="contact1" value="{!v.contact.FirstName}"/>
        <force:inputField aura:id="contact2" value="{!v.contact.LastName}"/> 
    </div>
</aura:component> 

Thanks,
Priti



 

All Answers

Priti jaiswal 8Priti jaiswal 8
Hi Lavanya,

This is a well known issue and slaesforce suggests a workaround to this. 

https://success.salesforce.com/issues_view?id=a1p3A0000008gLZQAY

I tried this and it worked for me -

<!-- <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="GLOBAL"> -->
<aura:component implements="lightning:actionOverride,force:hasRecordId,force:hasSObjectName" access="GLOBAL"> 
    
    <aura:attribute name="contact" type="Contact" default="{ 'sobjectType' : 'Contact' }" /> 
    <force:inputField aura:id="hiddeninout" value="{!v.contact.FirstName}" class = "display:none"/>
    <div>
        <label>Contact</label> 
        <force:inputField aura:id="contact1" value="{!v.contact.FirstName}"/>
        <force:inputField aura:id="contact2" value="{!v.contact.LastName}"/> 
    </div>
</aura:component> 

Thanks,
Priti



 
This was selected as the best answer
Mustafa JhabuawalaMustafa Jhabuawala
Hi Lavanya,

Priti is correct this seems to be the know issues. Go through this link you will get more details here (https://success.salesforce.com/issues_view?id=a1p3A0000008gLZQAY).

Its mentioned in the known issues that if you have wrapped your force:inputField in a div then this issue will occur, so try removing all the wrapper divs and check once.

If you are using some styling i.e SLDS or some thing else then obviously you won't be able to remove the wrapper divs in that case. So you need to use ui:inputText for that as of now.

Thanks,
Mustafa Jhabuawala
Technical Lead at Zen4orce (http://www.zen4orce.com)