Tag Archives: Base Lightning Components

Why the recordForm component is so AWESOME!!!

The Summer 18 Salesforce release is almost here, and as usual it contains lots of great features. But one new feature, the lightning:recordForm component has not gotten the coverage I think it deserves. So, I wanted you all to know just how cool this new Base Lightning Component really is, by showing you the code for a Quick Contact component

To truly appreciate how far we have come with Lightning development, I would have to show you what the equivalent code without Base Components looked like. But, that would be like bringing you back to the stone ages and who needs that. Instead I will just point you to the code used to build something similar using what was available before the new recordForm component.

And to see that, I will direct you to a great tutorial on GitHub that was designed to show you how to Build Lightning Components with Salesforce DX. And if you have not started using Salesforce DX yet (and I cannot imagine why you have not) then this is the perfect opportunity to get started. In this step-by-step tutorial, you will be led through creating 3 lightning components:

Component # 1 – quickContactView

Uses the lightning:recordViewForm and several lightning:outputField base components to create a read-only version of the Quick Contact Form.
Screen Shot 2018-07-05 at 10.28.48 AM

Component # 2 – quickContactEdit

Uses the lightning:recordEditForm and several lightning:inputField base components to create a editable version of the Quick Contact Form.
Screen Shot 2018-07-05 at 10.30.13 AM

Component # 3 – quickContactViewEdit

Uses aura:if‘s and a lightning:buttonStateful base components to toggle between the quickContactView and quickContactEdit components.
Screen Shot 2018-07-05 at 10.31.32 AM
The result of using these 3 components, is a form that looks like the following:

Screen Shot 2018-05-28 at 10.14.26 AM

In this version of the component, the user must first click the “Click to Edit” button before they are able to edit the contact fields. This all works fine, but wouldn’t it be better if you could achieve this same functionality by creating only one component?

Ok, you don’t really have to answer that…because the answer is obviously, “YES!”.

The Single Component Alternative

Good news. As of the Summer 18 release, you will be able to do exactly that by using the newly available lightning:recordForm base lightning component. Using it is dead simple and involves code such as the following:
Screen Shot 2018-07-05 at 10.40.50 AM

In that code snippet, I only had to use one attribute and one recordForm base lightning component in a single component to reproduce all the functionality that previously required 3 separate components. BAM! That is practically magic.

So hopefully now you get why this new base lightning component is perhaps the coolest one ever.

Hope you get a chance to check it out and please let me know what you think.

If you found this article useful, you might want to checkout my latest course on Pluralsight titled, Lightning Component Development Best Practices, where I talk about base lightning components and a lot more.

Gotcha to watch out for when using new Base Lightning Components

bugThis weekend I discovered a very annoying issue (which I kind of consider to be a bug) when working with the new Base Lightning Components. Don’t get me wrong, I love these new components and think they are awesome. But, this particular issue had me banging my head for a few hours and I really wish I had those hours back. So, to save you from the same pain I experienced, I am writing about the issue here.

I would not be surprised if other developers encounter this same issue when they go to convert Lightning Components from using the older ui components to the new lightning ones. This was what I was doing and when I went to preview the component and all I got was a loading image and a message in the console that told me I had encountered an Internal Server Error. This error is essentially meaningless and just indicates that some error has occurred that was not properly handled by the system. Ughhhh, no help at all.

Everything in my code appeared right and it took me a while to finally notice that one of the components I had converted (the ui:inputText component to the new lightning:input) was missing the name attribute. Turns out that the name attribute is required for the new component. It was not required or even used for the ui:inputText component, which is why I failed to notice it in the first place.

Rather than give me a message when I try to save the markup or even trap the error and give me a legitimate message in the console log, I got the rather useless and general Internal Server Error. I imagine this will be resolved at some point, but in the meantime, I am writing this up to hopefully save someone else the misery I felt trying to figure out what was going on.

And if you are new to Lightning development and not sure what the new Base Lightning Components are all about and why you would want to use them, check out this post. Or, you can check out my latest course, which has a module that covers using them.