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
Doug KellsDoug Kells 

Separately-rendered lightning:recordForm Error

I’m running into an issue with the new lightning:recordForm component available in Summer ’18 when more than one separately-rendered component uses the same method to retrieve a different list of fields.

Basic example: Let’s say you have one component 
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,force:hasSObjectName" access="global" >
    <aura:attribute name="recordId" type="String" />
   <aura:attribute name="fields" type="List" default="HomePhone,DoNotCall,Fax,HasOptedOutOfFax"/>
                    <lightning:recordForm 
                                      recordId="{!v.recordId}" 
                                      objectApiName="Contact" 
                                      fields="{!v.fields}"
                                      columns="2"/>
</aura:component>
Then there is an identical component with different fields: 
<aura:attribute name="fields" type="List" default="Name,Phone,Email,HasOptedOutOfEmail"/>
You then put these on a lightning record page for your contacts and put them within your Tabs (or Accordion) component. If both components are placed in the same tab, they both render fine when that tab becomes active.

Here’s the issue. If I put them into different tabs, only the one in the first of the tabs that is opened renders properly. When you open the second tab, the recordForm component returns an error: “This record could not be loaded because it includes too many formula fields with complex formulas….”

Has anyone else tried this? Is this expected functionality? Is there a workaround?
Dimitri MitsiosDimitri Mitsios
Hello Doug ,
I have an issue with the new lightning:recordForm component when I want to edit a custom field (the system comes up with an error when I save the record)
I got this inspiration from the video 
https://www.youtube.com/watch?v=KgVvidDG8do&index=25&t=0s&list=PLjJeA2SstEtK5st3FzN_vHCmviHLtY5pe
and my code is a simple one

thanks in any case
Dimtiri
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name ="recordId" type ="Id" default ="" />
    <aura:attribute name ="myfields" type ="String[]"  
                    default =
                    "[
                     'Name',
                     'Cost_Analysis_Status__c'
                     ]"
                    />
   <lightning:card iconName="standard:contact" title="Milestones " >
      <lightning:recordForm aura:id="recordViewForm"
                            recordId="{!v.recordId}"
                            objectApiName="Opportunity"
                            fields="{!v.myfields}"
                            columns ="2"
                            onsuccess="{!c.handleSuccess}"
       />
   </lightning:card>
</aura:component>
Doug KellsDoug Kells
Hi Dimitris,
 
The code that you have looks generally okay to me. Confirm that you have a method called “handleSuccess” in the component's controller. If not, this would cause an error. You may want something to happen when the save is complete, even if it just a success message. Try adding the following to the controller part of the component:
  
({
    handleSuccess : function(component, event, helper) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": "Success!",
            "message": "The record has been updated successfully.",
            "type": "success"
        });
        toastEvent.fire();
    }
})

If you don't want anything like that to happen after the save, the line of code onsuccess="{!c.handleSuccess}" may be deleted.

Hope this helps. 
Dimitri MitsiosDimitri Mitsios
Thank you very much Doug, I added the method and worked.

I would like to extent it by defining dynamic the field on the component level according to the video
https://www.youtube.com/watch?v=KgVvidDG8do&index=25&t=0s&list=PLjJeA2SstEtK5st3FzN_vHCmviHLtY5pe

but when I try to use a design file i get the following error
"Failed to save OppMilestone.design: The flexipage:availableForAllPageTypes interface doesn't support these attribute types in the design resource: string[]. The flexipage:availableForRecordHome interface doesn't support these attribute types in the design resource: string[]. : Source"
As you can see in the video works perfect but I can not reproduce it.

<design:component>
    <design:attribute name ="myFields" label="Field List" Description="Comma seperated list of fields" />
</design:component>
Thanks again
Dimitri
Doug KellsDoug Kells
Using the design part for this requires a little more doing. In your component, start by adding a new attribute that is just a plain string, and also add an init method. 
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="fieldlist" type="String" default="Name,Cost_Analysis_Status__c"/>
Have your design:attribute's name point to fieldlist instead. Then, back in your controller, we need a doInit method to convert the string into a list (and then reload). Something along these lines: 
  
doInit : function(component, event, helper) {
        var fields = [];
        var fl = component.get("v.fieldlist").split(",");
        fl.forEach(function(f) {
            fields.push(field); 
        });
        component.set("v.myfields", fields);
        component.find("recordViewForm").reloadRecord();
    }


 
Etienne DKEtienne DK
 .reloadRecord() is not a function of recordForm,  how does one reload the form?
Alexandre Thizy 9Alexandre Thizy 9
In my case I don't need it.
I have just modify a little bit the doInit like this: 
doInit : function(component, event, helper) {
        var fields = [];
        var fl = component.get("v.fieldsToDisplay").replace(/\s+/g, '');
        fl = fl.split(",");

        fl.forEach(function(f) {
            fields.push(f);
        });
        
        component.set("v.fieldsDisplay", fl);
    }

 
Alexandre Thizy 9Alexandre Thizy 9
Also doable in 2 lines: 
var fl = component.get("v.fieldsToDisplay").replace(/\s+/g, '').split(",");
component.set("v.fieldsDisplay", fl);