Creating and Deploying a Lightning Component

Lightning components are reusable containers of prebuilt tools and elements provided by Salesforce.com. All these Lightning components can be added to our Lightning pages easily be dragged and dropped into your desired page. Salesforce makes this easy to do without a developer and without code.

In this Salesforce tutorial, we will create a Salesforce Lightning Component and Lightning Page that can be run from the Salesforce Mobile application. Follow the steps for creating and deploying

  1. Log in to your Salesforce Organisation.
  2. Click Setup | Custom code | Lighting components.
  3. Check the enable debug mode check box.
  4. Click the save button.

Creating a new Lightning component.

  • From Lightning Experience, select setup | Developer console.
  • Select File | new | Lightning Component
  • Enter name and lightning page must be checked.
  • Click submit button.
  • Save the file

Defining the Student Sidebar Form Component

  • Select file | New | Lightning Component.
  • Enter the name
  • Click submit button and save the file.
  • Between the <aura:component> tags, insert the following markup

<h1> Filer form goes here </h1>

  • Save the file.

Invoke the Student Sidebar form component

  • Return to Student.cmp in the Developer console
  • Between the <aura: component> tags, invoke the StudentForm component and use lightning:tabset to define a “scoped’ tab panel with a single tab name gallery.

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
<c:StudentSidebarForm />
<lightning:tabset variant="scoped">
<lightning:tab label="Gallery"> </lightning:tab>
</lightning:tabset>
</aura:component>

  • Save the file.

Surface the application as a Custom Tab in Lightning

  • From Lightning Experience, navigate to Setup | User Interface | Lightning App builder.
  • Click the New button and select App page and click Next button.

Enter a label of AWinstructors as shown below and click on the next button.

  • Select Header and Right Sidebar and click on Finish button
  • Drag and Drop the StudentSidebar Component into the bottom-left box of the design canvas.
  • Drag a Chatter Feed into the bottom-right box of the design canvas.
  • Click the save button and activate.
  • Click on the Lightning Experience tab and click the Add page to app button.
  • Click on the mobile tab and click the Add page to app button.
  • Click the Save button.

Return to Lightning Experience and click on the Awinstructors tab and the output will as shown below.

Test the application in the Salesforce mobile app.