As the name suggests, Lightning Components are closely related to the Lightning interface. It’s a framework offered by Salesforce, which allows developers to create custom-tailored tools for the system user. Similar to fields on objects or automation, components can be customized to the user’s needs. Imagine you are the owner of a company selling music for ads on YouTube. This music is sold on a licensing basis, meaning the creator can buy it forever or for the duration of specific streams (for example, music for Halloween or Christmas, although the latter reminds us only of Wham!’s Last Christmas. Sorry – now it will be playing in your head). So, the owner needs to create a component that will automatically distribute the number of installments considering the type of license (Lifetime or Period), dates such as start/end date, and the total amount to eventually obtain monthly payments for the license. This type of logic in Salesforce OOTB would be possible to do, but it could take much more time than building a component with such functions. Thanks to Lightning Components, a developer can create logic that will create such components with a given logic. But that is not all – the component can look the way the Product Owner wants it to. Layouts, buttons, or even color schemes can be composed to meet their needs. Most elements found in Salesforce are original works of developers from this platform. Among the components, there are Events. No – I am not talking about those events you can find on page layouts of most objects; we are talking about mechanisms that communicate between components and enable the creation of integrated and interactive user experiences. To visualize this more, we can use an example from a company that uses Service Cloud and collects fault reports on its product. The company is called CleanYourParty and helps clean up after parties. When the agent picks up the phone, he wants the client to have everything updated. He finds the client and finds a list of reports. After clicking on a specific button, details (Lightning component) and Ticket History (Lightning component) are to be updated. Thanks to this one action, all components are updated. I will not be scattering this in code for you – as an admin, you will not deal with it – but such links exist and allow us to use a system that can communicate. The last element is Services, which is nothing but an interesting toolbox containing tools for testing or debugging solutions.
What to do to create such a component? First of all, know about programming. So, if you get bored with the admin path, feel free to start a developer career. What are the steps?
- The first is to define the attributes of the component; such attributes are usually agreed upon with the Product Owner as they know what they would like to achieve in the final stage of the product.
- Next is creating HTML markup, because it must have a skeleton, like everything in the IT world and beyond. We are getting closer to the end. For business logic in JavaScript, we must create a given process – it is a bit like a Sales Process in Opportunity; we need to know what and how it should work.
- And the last is just a pleasure – styling in CSS – because the component must look good (well, maybe not must, but it would be nice if it did).
What after that? Testing. Usually, this is not done by developers, but by quality assurance (QA), people who will spot every smallest error and then send it for correction with a smile on their faces. (Maybe I’m exaggerating with the smile because it’s still one team. But thanks to them, we can be sure that the component works correctly.) And debugging – thanks to the appropriate tools, we will be aware of errors in the code.
Lightning Components are a powerful tool, and thanks to them, Salesforce is the number one CRM. Developers work wonders in these components, and as long as the requirements are presented clearly by the client, that is 100% success.
But when the component is completed, how to place it in front of your user’s face? For that, use the Lightning App Builder or Classic page layout, more about which you will learn in the next section.