+ Start a Discussion
Jeffrey Tanzman 26Jeffrey Tanzman 26 

Single field lightning component

Hi. I'm an Admin and not a Developer, first off.  I want to create a simple Lightning Component with one field (custom) on a standard object so that it may be displayed on the right side of a Lightning Record Page, separate from other fields on the same record.  In essence, all fields except the single field, will be in the main standard Record Detail component and the single field will be in its own component on the right.  How would I go about creating a Lightning Component with just one field?
Khan AnasKhan Anas (Salesforce Developers) 
Hi Jeffrey,

I trust you are doing splendidly and enjoying the season.

Below is the sample code which I have tested in my org and it is working fine. 

Component:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <lightning:card iconName="custom:custom19" title="Custom Field">
        <div class="slds-p-left_large slds-p-right_medium">	
            <lightning:recordForm  recordId="{!v.recordId}" objectApiName="Contact" fields="Custom_Field__c"/>
        </div>
    </lightning:card>
</aura:component>

A lightning:recordForm component enables you to quickly create forms to add, view, or update a record. Using this component to create record forms is easier than building forms manually with lightning:recordEditForm and lightning:recordViewForm.

The objectApiName attribute is always required, and the recordId is required unless you’re creating a record.

Note: Add this component to Lightning app builder.

User-added image

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
Jeffrey Tanzman 26Jeffrey Tanzman 26
Hi Khan,

Thank you for the quick reply!  Slight correction: the object is custom however it shouldn't matter I don't think BUT I get a "Object <object name> is not supported in one app" message when I drag the custom component onto the Lightning Record Page.  I double-checked the API Name is correct.  I haven't Saved it yet.  Thoughts, or should I Save it and see if it works?
Khan AnasKhan Anas (Salesforce Developers) 
Hi,

You can use this component on custom object also. Make sure you implements "flexipage:availableForRecordHome,force:hasRecordId". Also, check the objectApiName in lightning:recordForm tag. Then, add it to Lightning app builder page, save it and activate it.
 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <lightning:card iconName="custom:custom19" title="Custom Field">
        <div class="slds-p-left_large slds-p-right_medium">	
            <lightning:recordForm  recordId="{!v.recordId}" objectApiName="Custom_Object__c" fields="Custom_Field__c"/>
        </div>
    </lightning:card>
</aura:component>

Screenshot:
User-added image

Regards,
Khan Anas
Jeffrey Tanzman 26Jeffrey Tanzman 26
Hi Khan,

Thanks again for your reply!  The field I'm 'isolating' from the others is a  Rich Text type and the "div" and "class" values don't seem to work, and the value - or image(s) in this case - isn't displayed in the new component (it does display when the field is included in the standard Record Detail component).  I'm seeing the section title and an empty box below it.  Any further thoughts?  Again, I'm not a developer and don't have a complete understanding of the "div" and 'class" settings within SLDS convention.
Christopher MergenChristopher Mergen
Thanks so much - this solution worked really well.  I found it helpful to add "force:hasSObjectName" to the list of implemented interfaces so that I could use {!v.sObjectName} to populate the objectApiName field; this lets the component be used on any type of object record page.
Jeffrey Tanzman 26Jeffrey Tanzman 26
Glad this worked for you, @Christopher Mergen. After all this I ended up writing a simpler screen Flow albeit I needed to remove the trailing "/" and space to get it to work. It works fine and my users love the single field containing image(s) on the right side of the page.  Cheers!
Jon GulikerJon Guliker
Hey, this seems super useful. I saw forceCommunity:availableForAllPageTypes was already implemented, but what else would need to be done to make this work on a record detail in a lightning community? I can see the component in the community builder, but it won't add to any record detail pages. 
Nima Tahvili 3Nima Tahvili 3
There is another way to achieve this without creating a custom Lightning Component (Good for non-developers/code haters):

Imagine you want a new component on the lightning page for your case records (Or any other object), where only a single (Or selected set of fields) are being shown under certain criteria (E.g. if a checkbox is checked).

What I would do is:
1- From the object manager, select the object and create a new "Action" from Buttons,Links & Actions (Type: Update a Record), and remember the name you chose for the action,
2- Edit the Layout for the Action and add the field(s) you want,
3- Go to the Lightnig Page you want to edit by opening a record to change, go to Edit Page and add a Related Record component to the Lightning page, wherever you want,
4- Give a Header Label, 
5- For the lookup field, select "Use this Case (object name)"
6- Select the action you created for the "Update Action", 
7- Set the Conditional Visibility
And you are done.
 
Gsam1234Gsam1234
@jeffrey would you be kind enough to share the basic steps for simply displaying a custom field of the object being viewed using the flow screen? 
Jeffrey Tanzman 26Jeffrey Tanzman 26
Hi @gsam1234 (Garret). Create a new Flow starting with a Screen Flow, connect it to a Get Record operation (I'm using the Knowledge Record ID in a Filter on the Knowledge object and storing it in a Variable), and lastly creating a Screen component.  That's it really.  Just three steps in a Flow including Start.  Works for me.  Hope this helps.
Walker Stevenson 19Walker Stevenson 19
@
NimaTahvili3 (Nima) Excellent tip. Your approach worked nicely.