Lightning Components are the self-contained and reusable units of an app. They represent a reusable section of the UI. It is a bundle that can contain other components, as well as HTML, CSS, JavaScript, or any other Web-enabled code. This enables you to build apps with sophisticated UI’s. It can range in granularity from a single line of text to an entire app.
Let’s start creating a Lightning Component in Salesforce. Please find below screenshots for the Steps to create the Lightning Component:
-> The first step to create the Lightning Components is, getting set up to write the code, which is very easy in ‘Developer Edition’ org. Just go to the ‘Settings’ menu, and click on ‘Developer Console’.
Opening developer console
-> Create Lightning Components in the Developer Console :Select ‘File’ – ‘New’ – ‘Lightning Component’ to create a new Lightning component.
Creating new lightning component
-> In the New Lightning Bundle panel, enter ‘HelloWorld’ for the component name, and click Submit.
Naming lightning component
-> This creates a new ‘HelloWorld’ component bundle, with two open tabs. Close the ‘HelloWorld’ tab, and keep the ‘HelloWorld.cmp’ tab open.’HelloWorld.cmp’ contains the opening and closing tags for a Lightning component,. Between them, add the following markup, and save:
Code of ‘HelloWorld’ lightning component
-> Create Lightning App in the Developer Console :Select ‘File’ – ‘New’ – ‘Lightning Application’ to create a new Lightning app.
Creating new lightning app
-> In the New Lightning Bundle panel, enter ‘HelloWorldApp’ for the app name, and click Submit.
Naming lightning app
-> This creates a new ‘HelloWorldApp’ bundle, with two open tabs. Close the ‘HelloWorldApp’ tab, and keep the ‘HelloWorldApp.app’ tab open. ‘HelloWorldApp.app’ contains the opening and closing tags for a Lightning app,. Between them, add the following markup, and save:
Code of ‘HelloWorld’ lightning app
This adds the ‘HelloWorld’ component we created earlier to the HelloWorldApp.
-> ‘HelloWorldApp.app’ file has the Preview button. Apps have ‘Preview’ button, components don’t. Click it now, and another browser window opens and shows our app.
Output of lightning component
References: https://trailhead.salesforce.com/lex_dev_lc_basics/lex_dev_lc_basics_create
About Us
Greytrix as a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners across the globe. We offers Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that requires apex code incorporation into the Salesforce platform.
Greytrix has some unique solutions for Cloud CRM such as Salesforce integration with Sage Enterprise Management (Sage X3), Sage Intacct, Sage 100 and Sage 300 (Sage Accpac). We also offer best-in-class Cloud CRM Salesforce customization and development services along with services such as Salesforce Data Migration, Integrated App development, Custom App development and Technical Support to business partners and end users.
Greytrix GUMU™ integration for Sage ERP – Salesforce is a 5-star app listed on Salesforce AppExchange.
For more information, please contact us at salesforce@greytrix.com. We will be glad to assist you.
Related Posts