How to access multiple line custom label and static resource file uses of "@salesforce/label/" and "@salesforce/resourceUrl/" property in Lightning Web Component Salesforce Lwc | How to display custom label of image, text and URLs format in Lwc (Lightning Web Component) Salesforce

Hey guys, today in this post we are going to learn about How to access multiple line custom label and static resource file uses of “@salesforce/label/” and “@salesforce/resourceUrl/” property in Lightning Web Component Salesforce Lwc.

Import labels from the @salesforce/label scoped module. Custom labels are text values stored in Salesforce that can be translated into any language that Salesforce supports. Use custom labels to create multilingual applications that present information (for example, help text or error messages) in a user’s native language. To know more details about Custom labels, Click Here..

import labelName from '@salesforce/label/labelReference';

labelName— A name that refers to the label.
labelReference— The name of the label in your org in the format namespace.labelName. You can use the same format to access labels, myns.labelName, regardless of where you’re accessing them.

Files we used to display Custom labels in Salesforce LWC →

lwcCustomLabel.html	LWc HTML File	Template HTML file for used to display multi custom label in Salesforce LWC
lwcCustomLabel.js	LWC JavaScript File	It is holding import and export method where we are importing the multiple custom label Reference property in Salesforce LWC.
lwcCustomLabel.js-meta.xml	XML Meta File	It is used to where this lightning web component file you want to display as like lightning__AppPage, lightning__RecordPage, lightning__HomePage.
lwcMultipleOptionsApp.app	Lightning Application	It is used for call the component and preview on browser.

Don’t forget to check out:- How to display selected multiple picklist value move left/right from one box to another dual-listbox of dropdown picklist based on button icon to reordered as up/down of selected picklist option uses of ‘lightning-dual-listbox’ element in LWC Salesforce (Lightning Web Component). Click Here For More Information

Final Output →

👉 Download Free Ebook →

👉 Get Free Course →

Challenges in your career

🎯 If You Are Facing Any Of These 6 Challenges in your career.

Learn Salesforce Development
Career Confusion
No Interview Call
Low Salary
No Promotion/Growth
No Finding New Job Opportunity
Why you stucking from past so many years in same company?

You can download file directly from github by Click Here.

Other related post that would you like to learn in Salesforce

Find the below steps ▾

Create Lightning Web Component HTML →

Step 1:- Create Lightning Web Component : lwcCustomLabel.html

SFDX:Lightning Web Component >> New >> lwcCustomLabel.html

lwcCustomLabel.html [Lightning Web Component HTML]

```
   <template>   
```
```
  <lightning-card>
```
```
    <div style="padding:20px;">
```

        <h3 class="slds-text-heading_medium"><lightning-icon icon-name="custom:custom100" size="small"></lightning-icon> <strong style="color:#270086; font-size:13px; margin-right:5px;"> How to access custom label in Lightning Web Component (LWC) </strong></h3>

```
        <br/><br/>
```
```
 
```

    <a style="color:#ff8000; font-weight:bold;" href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer"><img src={logoUrl} alt={label.w3webTutorial} width=100> {label.w3webTutorial}</a><br>

```
 
```

    <h3 style="background-color: #ddd; padding:5px 10px; display:block; font-weight:bold; margin:0 0 20px 0;">Custom Labels Apply into Middle of Sentence</h3>

```
 
```

    <ul style="list-style: circle; margin:0px; padding:0px;">

```
        <li>{label.w3webTutorial}</li>
```

        <li>An easy way to learn step-by-step online <a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer"><strong>{label.salesforce_tutorial}</strong></a></li>

        <li><strong>Do you know:-</strong> The Best <a href="https://www.w3webmart.com/2022/02/Best%20latest%20Android%20Mobile%20Phones.html" target="_blank" rel="noopener noreferrer"><strong>{label.X5g_Mobiles}</strong></a> Android Phones are best supreme performance, connectivity features, camera display quality and long-lasting battery, <a href="https://www.w3webmart.com/2022/02/Best%20latest%20Android%20Mobile%20Phones.html" target="_blank" rel="noopener noreferrer"><strong>Check Here..</strong></a></li>

        <li><a href="https://www.w3webmart.com/" target="_blank" rel="noopener noreferrer"><strong>{label.online_shopping}</strong></a></li>

```
    </ul>
```
```
 
```
```
    <br/><br/>
```

    <h3 style="background-color: #ddd; padding:5px 10px; display:block; font-weight:bold; margin:0 0 20px 0;">Custom Labels Names</h3>

    <ul style="list-style: circle; margin:0px; padding:0px;">

        <li><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer"><strong>{label.w3webTutorial}</strong></a></li>

        <li><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer"><strong>{label.salesforce_tutorial}</strong></a></li>

        <li><a href="https://www.w3webmart.com/" target="_blank" rel="noopener noreferrer"><strong>{label.X5g_Mobiles}</strong></a></li>

        <li><a href="https://www.w3webmart.com/" target="_blank" rel="noopener noreferrer"><strong>{label.online_shopping}</strong></a></li>

```
    </ul>    
```
```
 
```
```
    <br/><br/>
```

        <!--Start RelatedTopics Section-->

<div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;">

```
 
```

            <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>

```
 
```
```
            <br/><br/>
```

            <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p>

            <div style="display:block; overflow:hidden;">

                <div style="width: 50%; float:left; display:inline-block">

                    <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;">

                        <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>

                        <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>

                        <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>

                        <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>

                        <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>

```
                    </ul>
```
```
            </div>
```
```
 
```

            <div style="width: 50%; float:left; display:inline-block">

                    <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;">

                        <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>

                        <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>

                        <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>

                        <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>

                        <li><a href="https://www.w3web.net/tree-grid-dynamic-expand-collapse-in-lwc/" target="_blank" rel="noopener noreferrer">how to create tree grid with expanded/collapsed section for the entire row in LWC</a></li>

```
                    </ul>
```
```
                </div>
```

               <div style="clear:both;"></div>

```
               <br/>
```

                <div class="youtubeIcon">

                    <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>

```
                </div>
```
```
    </div>
```
```
 
```
```
</div>
```
```
 
```
```
  
```
```
 
```
```
</div> 
```
```
</lightning-card>     
```
```
</template>
```

Create Lightning Web Component JavaScript →

Step 2:- Create Lightning Web Component : lwcCustomLabel.js

SFDX:Lightning Web Component >> New >> lwcCustomLabel.js

lwcCustomLabel.js [LWC JavaScript File]

  import { LightningElement } from 'lwc';

```
 
```

import w3webLogo from '@salesforce/resourceUrl/w3webLogo';

```
 
```

import w3webTutorial from '@salesforce/label/c.w3web_Salesforce_Tutorial';

import salesforce_tutorial from '@salesforce/label/c.salesforce_tutorial';

import X5g_Mobiles from '@salesforce/label/c.X5g_Mobiles';

import online_shopping from '@salesforce/label/c.online_shopping';

export default class LwcCustomLabel extends LightningElement {

```
 
```
```
     logoUrl = w3webLogo;
```
```
 
```
```
     label = {
```
```
        w3webTutorial,
```
```
        salesforce_tutorial,
```
```
        X5g_Mobiles,
```
```
        online_shopping,
```
```
     };
```
```
}
```

Create Lightning Web Component Meta XML →

Step 3:- Create Lightning Web Component : lwcCustomLabel.js-meta.xml

SFDX:Lightning Web Component >> New >> lwcCustomLabel.js-meta.xml

lwcCustomLabel.js-meta.xml [LWC Meta Data XML]

   <?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

```
    <apiVersion>45.0</apiVersion>
```
```
    <isExposed>true</isExposed>
```
```
    <targets> 
```

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

```
    </targets>
```
```
</LightningComponentBundle>
```

Create Lightning Application →

Step 4:- Create Lightning Application : lwcCustomLabelApp.app

From Developer Console >> File >> New >> Lightning Application

lwcCustomLabelApp.app [Component Application File]

  <aura:application extends="force:slds">

```
   <c:lwcCustomLabel/>
```
```
</aura:application>
```

Further post that would you like to learn in Salesforce

TechW3web:- To know more, Use this Link

FAQ (Frequently Asked Questions)

How do you read custom labels in LWC?

import labelName from '@salesforce/label/LabelReference'; labelName – This is the name that we use to access labels in LWC. LabelReference – This is the name of the custom label. For example, If we have a namespace, then LabelReference -> Namespace.

How do I access custom labels?

To access custom labels, from Setup, enter Custom Labels in the Quick Find box, then select Custom Labels. How you add a custom label to your application depends on the user interface. For more information on the following syntax, see the corresponding developer guides. In Apex use the System.

What are custom labels?

Custom labels are simply another attribute within the product feed. These can be used in your shopping campaign, which allows you to identify, group, filter and structure products in order to apply your product listing ad strategies. For example, you may want use a different bid strategy for some items.

Vijay Kumar

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

How to access multiple line custom label and static resource file uses of “@salesforce/label/” and “@salesforce/resourceUrl/” property in Lightning Web Component Salesforce Lwc | How to display custom label of image, text and URLs format in Lwc (Lightning Web Component) Salesforce