Code By Code – Lightning Framework – Chapter 4 – Create CarSearchForm Aura Component

Code By Code – Lightning Framework – Chapter 4 – Create CarSearchForm Aura Component

Chapter 4

In this chapter, we will create our first component of Rent A Car application. We will create CarSearchForm.cmp component which will help us in listing all different car types.

CarSearchForm Component

CarSearchForm component is being used to display a form with a combo box listing all different car types along with 2 different buttons. Let’s have a look at the code: https://gist.github.com/94dd24117ba7329445d6e414a228b651

What does this code speak?

The beginning tag specifies an aura component, which is must for each and every aura component.

It implements few of the interfaces which enhances your aura component’s properties. Every interface boost your aura components usability. We will learn this is depth in further chapters. The interfaces we have used in this code will allow your component to added in lightning tab and lightning page.

lightning:layout and lightning:layoutItem are used to generate markup using SLDS grid system. More on this here.

lightning:select is similar to an HTML select component which displays a drop-down with different options. We will be using this to display different car types in drop down.

lightning:button is used to generate SLDS button markups. These buttons will be used for performing the search operation and creating new a car type.

Lightning Component Development Day2 - Applying Stylesheet, Create Basic Lightning Component

Test Your Knowledge

Base Aura Components

Next In This Guide

Chapter 5 – Standalone Lightning App

Chapter 6 – Attributes, Expression

Chapter 7 – Conditional Markup

Tags: , , , , , ,

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Salesforce.com Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

This Post Has One Comment

  1. Avatar

    satheesh

    15 Jul 2019 Reply

    Hi Manish,

    Please check below screen shot.

    2. How to display options within lightning:select component?
    Your answer: Using tag

    Correct answer: Using tag

    Thanks
    Satheesh K

Leave a Reply

Close Menu