Create Component In LWC and display in salesforce page

|
| By Webner

Following are the steps to create component in LWC and display in salesforce page:

  1. Create Default Search org from VS code.
    vs-code1

  2. Authorize an Org.
    vs-code2

  3. Create Lightning web component.
    vs-code3

  4. After creating the lightning web component it will show the component under the LWC folder as shown in the image below(I have created myfirstcomponent named component)
    vs-code4

  5. Change myfirstcomponent.js-meta file( metafile) update with the following code:
    <?xml version="1.0" encoding="UTF-8"?>
    <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
    </targets>
    </LightningComponentBundle>
  6. Push source to deploy code
    Component in LWC vs-code5

  7. Login to salesforce org and go to app launcher and sales as shown in the below image:
    Component in LWC sf-setup

  8. On the sales page right corner click on the settings button and click edit page.
    Component in LWC sf-setup1

  9. The following screen will display and search components in the search bar(where number 1 is written) and in the custom component(where number 2 is written), you will see your component you can drag it to wherever you want to(where number 3 is written ) and click the save button to save the layout.
    Component in LWC sf-setup2

  10. After that click on the activation link and activate the updated layout by assigning an org and clicking save.
    sf-setup3
    sf-setup4

Whatever you have done in component it will show to the homepage screen like my component is displaying the following
sf-setup5

Leave a Reply

Your email address will not be published. Required fields are marked *