Entry Static Assets, Content material Asset Information in Lightning Internet Element

Final Up to date on July 7, 2022 by Rakesh Gupta

Massive Concept or Enduring Query:

• The way to import and use static assets within the lightning net part? 

Aims:

After studying this weblog, you’ll be capable of:

• Perceive the aim of the static useful resource
• Use static assets within the lightning net part
• Entry content material asset file within the lightning net part
• and far more

Up to now written just a few articles on Lightning Internet Element. Why not examine them out when you are at it?! 

1. Pass lightning-input field Value from a Button Click to Lightning Web Component Controller
2. Reset lightning-input Field on Button Click in Lightning Web Component
3. Add Confirmation, Alert, and Prompt Dialog Box to Lightning Web Component

Rachel Gillett is working as a Junior Developer at Gurukul on Cloud (GoC). She has uploaded two photographs within the respective static assets as talked about beneath:

Now she desires to learn to import and use them within the lightning net part, Much like the next screenshot: 

The way to Import Static Assets in Lightning Internet Element? 

Static assets let you add content material you may reference in a Lightning Internet Element Lightning Element, together with archives (equivalent to .zip and .jar information), photographs, fashion sheets, JavaScript, and different information. Static assets can be utilized solely inside your Salesforce org, so you may’t host content material right here for different apps or web sites.

To entry Static Assets in  Lightning net elements first we’ve to import from @salesforce/resourceUrl to the part’s JavaScript file.

The syntax for importing static useful resource in Lightning Internet Element

import myResource from '@salesforce/resourceUrl/resourceReference';

			

When static useful resource has namespace

import myResource from '@salesforce/resourceUrl/namespace__resourceReference';

			

import myContentAsset from '@salesforce/contentAssetUrl/contentAssetReference';

			

import myContentAsset from '@salesforce/contentAssetUrl/namespace__contentAssetReference';

			

// contentAssetFileExample.js
import { LightningElement } from 'lwc';
import COMPANY_LOGO from '@salesforce/contentAssetUrl/SalesWaveLogo';
import PARTNER_LOGOS from '@salesforce/contentAssetUrl/PartnerLogos';

export default class AssetFileExample extends LightningElement {

    // Expose the asset file URL to be used within the template
    companyLogoUrl = COMPANY_LOGO;

    // Expose URL of property included inside an archive file
    silverPartnerLogoUrl = PARTNER_LOGOS + 'pathinarchive=photographs/silver_partner.png';

}

			

<!-- contentAssetFileExample.html -->
<template>
    <lightning-card title="Content material Asset File Instance" icon-name="customized:customized19">
        <div class="slds-m-around_medium">
            <img src={companyLogoUrl}>
            <img src={silverPartnerLogoUrl}>
        </div>
    </lightning-card>
</template>

			

Automation Champion Strategy (I-do):

There are three steps to unravel Rachel’s enterprise requirement utilizing the Lightning Internet Element and Static Useful resource. We should:

1. Add Automation Champion Emblem as a static useful resource
2. Add SLDS Icons zip folder as a static useful resource
3. Import and use static assets within the lightning net part 

1. Add Automation Champion Emblem as a Static Useful resource

Add Automation Champion Emblem, as a single .png file within the static useful resource. Choose Public within the cache management drop-down record.

2. Add SLDS Icons Zip Folder as a Static Useful resource

Obtain the SLDS Icons Zip folder after which add it as a zipper file within the static useful resource. Choose Public within the cache management drop-down record.

Import and use Static Assets within the Lightning Internet Element 

After importing photographs in static useful resource, now we are able to use it in Lightning Internet Element. 

staticResourceExample.js-meta.xml

A lightning net part can be utilized to construct customized pages for Lightning Expertise and the Salesforce cellular app rapidly with point-and-click instruments. Ensure that so as to add the proper goal for it. 

This configuration file makes the part accessible for all Lightning web page varieties however restricts assist on desktops.

<?xml model="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://cleaning soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <goal>lightning__RecordPage</goal>
        <goal>lightning__AppPage</goal>
        <goal>lightning__HomePage</goal>
    </targets>
</LightningComponentBundle>

			

staticResourceExample.html

To reference a useful resource in a template, use {property} syntax, which is identical syntax we use to reference any JavaScript property.

<!-- staticResourceExample.html -->
<template>
    <lightning-card title="Static Useful resource Instance" icon-name="customized:customized36">
        <div class="slds-m-around_medium">
            <img src={automationChampionLogoUrl}>
            <img src={productWarrantyTermUrl}>
        </div>
    </lightning-card>
</template>

			

staticResourceExample.js

The JavaScript code imports two assets: Automation Champion emblem and a picture of a Product Guarantee Time period icon.

// staticResourceExample.js
import { LightningElement } from 'lwc';
import AUTOMATION_CHMAPION_LOGO from '@salesforce/resourceUrl/Automation_Champion';
import PRODUCT_WARRANTY_ICON from '@salesforce/resourceUrl/slds_icons';

export default class staticResourceExample extends LightningElement {

    // Expose the static useful resource URL to be used within the template
    automationChampionLogoUrl = AUTOMATION_CHMAPION_LOGO;

    // Expose URL of product guarantee time period icon included inside an archive file
    productWarrantyTermUrl = PRODUCT_WARRANTY_ICON + '/utility/product_warranty_term_60.png';

}

			

Formative Evaluation:

I wish to hear from you!

What’s one factor you realized from this publish? How do you envision making use of this new data in the actual world? Be at liberty to share within the feedback beneath.