As a caveat, this is actually a heavily edited version of what the post was going to be as the functionality doesn’t seem to work as I expected it to. Once I can get to the bottom of what’s going on I’ll update the post.
What this article is now going to be:
Using lightning:recordViewForm and lighning:recordEditForm components on an Account record page, to display and edit Account fields. It should be possible to use these new components to manipulate data on other objects, but there are some errors that crop up.
There’ll be conditional UI to only show the edit icon when not in edit mode, and submit/cancel buttons when it is in edit mode.
Finally, there’ll be a spinner which displays while saving the data, and a toast message to display a notification to the user once saved.
Let’s get started by creating a new component. To keep this as focused as possible, I’ll be using the Developer Console to develop.
I’ll name it AccountForm.
By selecting ‘Lightning Record Page’, the new component will be created with the relevant interface and access already set:
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" > </aura:component>
flexipage:availableForRecordHome is what allows us to see our custom component in the options when we edit the layout.
So that we have something visible when we add our component, lets add some markup to show a Lightning card with title and icon:
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" > <lightning:card title="Account Form" iconName="standard:account"> </lightning:card> </aura:component>
Save the file and open your dev org to the Accounts page (in Lightning experience) ensuring you have an account set up. Select the account and click its gear icon in the top right, navigating to Edit Page.
Drag the component from the ‘Custom’ section in the left sidebar to where you’d like it to live on the page. I’ve placed mine just above the tabset:
Part 2 on its way …