Content Asset Files in Salesforce LWC

As a continuation of learning about Lightning Web Components, today we will be discussing content asset files in LWC. We can import content asset files from the scoped module @salesforce/contentAssetUrl. To use a Salesforce file in custom apps and Experience Builder templates, convert the file into a content asset file.

import myWgAsset from ‘@salesforce/contentAssetUrl/contentWgReference’;

import myWgAsset from ‘@salesforce/contentAssetUrl/namespace__contentWgReference’;

myWgAsset—A name that refers to the asset file.

contentWgReference—The name of the asset file.

Asset file names in Salesforce must be distinctive inside your organization and may only contain underscores and alphanumeric letters. It must start with a letter, lack spaces, not have an underscore at the end, and not have two underscores in a row.

Namespace is the namespace of the managed package if the asset file is in a managed package.

Asset Files Salesforce Content Asset Files in LWC — Image Source: Automation Champion

Salesforce Asset Files Example

Let’s look at a sample code. Two content asset files are imported by the JavaScript code.

// assetWgExample.js

import { LightningElement } from ‘lwc’;

import SALESWG_WAVE_LOGO from ‘@salesforce/contentAssetUrl/SalesWgWaveLogo’;

import PARTNERWG_LOGOS from ‘@salesforce/contentAssetUrl/PartnerWgLogos’;

export default class AssetFileExample extends LightningElement {

// Expose the asset file URL for use in the template

salesWaveLogoUrl = SALESWG_WAVE_LOGO;

// Expose URL of assets included inside an archive file

goldPartnerLogoUrl = PARTNERWG_LOGOS + ‘pathinarchive=images/gold_partner.png’;

}

An archive file with nested directories might be a content asset file. To create the route to an item in an archive, concatenate a string, as shown in the example to build the goldPartnerLogoUrl. Use the pathinarchive argument to define the location of the content asset file within the archive.

Use the property syntax, which is the same syntax you use to reference any JavaScript property, to refer to a resource in a template.

<!– assetWgExample.html –>

<lightning-card title=”Asset WgFile Example” icon-name=”custom:custom19″>

</div>

</lightning-card>

</template>

Asset files are located in the /force-app/main/default/contentassets directory of a Salesforce DX project. Subdirectories of contentassets cannot be made. Make an asset file definition file called.asset-meta.

Conclusion

In this way, we can import Content Asset Files in a Lightning Web Component (LWC.)

Continue learning about Lightning Web Components with my related blogs below!

Additional Resources

Cover Photo by Agnivesh Jayadeep on Unsplash