Skip to main content

Static Resources inside Lightning Web Component

Agenda



This blog gives us a brief about how we can use Static resources inside a Lightning Web Component and use it over the Javascript as well as access it over the HTML.

What we are going to do

In this blog, we are going to upload 4 different pictures of the sun from different timings into the static resources of our org, and then we use that static resource into our Lightning Web Component and display the images according to our system timezones.


Lightning Web Component

Lightning Web Components is lightweight and delivers exceptional performance. Most of the code you write is standard JavaScript and HTML.


Static Resources 

Static resources allow you to upload content that you can reference on a Visualforce page, Visualforce Component, Lightning Component (both Aura Component and Lightning Web Component), including archives (such as .zip and .jar files), images, style sheets, JavaScript, and other files.

Import static resources from the @salesforce/resourceUrl scoped module. 


Ways to import Static resource over the component:

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

  • myResource—A name that refers to the static resource.

  • resourceReference—The name of the static resource.

  • namespace—If the static resource is in a managed package, this value is the namespace of the managed package.

Scenario:

Here I am import 4 static resources one is main frame and other 3 are the frame which are going to display according to system timings.

Expected outcome: 

HTML Syntax:


JavaScript Syntax:


CSS Syntax:


Resulted Outcome:





A static resource can be an archive file with a nested directory structure.To reference a resource in a template, use {property} syntax, which is the same syntax you use to reference any JavaScript property.

A single static resource can be up to 5 MB in size. An organization can have up to 250 MB of static resources. Static resources apply to your organization’s quota of data storage.

Limitations of this blog:

The blog is limited to this 4 static resource files and for the fixed timings as described, if you need more dynamic, you need to more more over the dynamics of the code, and the styling of the code may be differe from org to org, page to page, computer pixels to pixels. So, you need to be more careful over the styling part.

Blog’s Conclusion:

This blog gives us a brief about how we can use Static resources inside a Lightning Web Component and use it over the Javascript as well as access it over the HTML.


Thanks

Comments

Post a Comment

Popular posts from this blog

Path for JavaScript Developer - 1 Salesforce Certification

  Recently, I have cleared my  JavaScript Developer - 1 Certification on 9th May 2021. Hurray!!! And after clearing that exam I feel to create a path for my friends because I found that certification  little tougher, So I was willing to share my path to clear the certification. Agenda What paths I followed to clear the JavaScript developer I certification. What are the prerequisites and How much time it will take for me to learn all these and what effects or knowledge I gain from this certification? Salesforce has come up with this exclusive certification with JavaScript language which drives me to learn and earn this which eventually will help me on LWC and other open-source development. This certification is in high demand nowadays which motivates me to pass and share my tips.   What things I know before start preparing for the certification:   The JavaScript Developer I exam is intended for individuals who have the knowledge, skills, and experience to develop...
2 comments
Read more

Using Data - Attributes in Lightning Web Component (LWC)`

  Agenda      While working with Salesforce data we need to play with Id’s (Identifiers). An ID can be associated with a Record or with a specifier. While working with records when we need to make changes or view any particular record details, we need their ID’s, as I describe in my previous blog’s how can we show or edit any salesforce record with the help of Basic components of Salesforce.  To create forms that let users view, edit, and create Salesforce records, use Lightning-record-form, Lightning-record-edit-form, and Lightning-record-view form components. And To use these components we need Salesforce Record ID. Blog Details This Blog gives us a brief about how can we get a particular record Id or value after any event using Data - Attributes.  What we are going to do In this blog, we use Data - Attribute functionality from HTML5  in our Lightning Web Component and use data attribute to get...
3 comments
Read more

Displaying User Level’s Dynamically In Lightning Web Component

  Agenda I am writing this blog, to display dynamic user data beautifully, It enables each user to see the users they need to report. With this dynamic component, you can control data visibility without having to create a separate component as well, with its own running user.  Now, It’s time to show the user’s of our organization dynamically their role in a beautiful way. How does it work? You fetch the User’s record with a simple Apex SOQL query and just displaying details Dynamically over a Lightning Web Component, And place that component where ever you want. Requirements: You need to have access to your org. Should have the VS Code Installed in your system. You should have some basic knowledge of Lightning Web Component. About Lightning Web Component (LWC): Lightning Web Components are lightweight custom elements based on native HTML and Modern JavaScript. Lightning Web Compone...
3 comments
Read more