1

I have a requirement where I need to store all the footer content(.html files) in static resource and use that in lightning component. I didn't find any documents where we can use the html content stored in static resource in lightning component.

3
  • Hello Ramya, Welcome to SFSE!, May be you can create a separate lightning component for footer and include it in other components. Does this satisfies you requirement? Dec 28 '18 at 11:25
  • Did you try to use <aura:unescapedHtml value="{!v.htmlCode}"/>? Dec 28 '18 at 11:41
  • The HTML content itself should probably be a component, not a static resource. This would improve overall performance.
    – sfdcfox
    Dec 28 '18 at 16:03
1

You've got two routes to get access to Static Resources from a Lightning component. This is really not a workflow that Salesforce strongly supports; a much more idiomatic place to store HTML as is as part of the markup of a child Lightning component.

One route is to use the <ltng:require> component. This asynchronously loads your resource as a JavaScript file. If that file contains a global assignment, you'll be able to access it in your Lightning component's JavaScript. That resource content could be JavaScript that dynamically creates HTML elements, or it could be escaped HTML content that your client-side JavaScript can dynamically insert into your own component's DOM

The other route is to make a server call to your Apex controller, which can query and return raw HTML content (not JavaScript) from the static resource. e.g.

@AuraEnabled
public static String getHTMLContent(String staticResourceName) {
     return [SELECT Body FROM StaticResource WHERE Name = :staticResourceName].Body;
}
0

Since you can not access static resource body directly using $Resource or ltng:require, you will have to get the content from apex call. If your static resource file has raw HTML then you can query that static resource and can show that HTML using the <aura:unescapedHtml> tag.

Example -

Server-side controller

@auraEnabled
public static String getFooterContent(String staticResourceName) {
   return [ SELECT 
               Body 
            FROM 
               StaticResource 
            WHERE 
               Name = :staticResourceName
          ].Body;
}

Component

<aura:handler name="init" value="{!this}" action="{!c.init}"/>
<aura:attribute name="htmlCode" type="String" default=""/>

<aura:unescapedHtml value="{!v.htmlCode}"/>

JS Controller

init: function (cmp, event, helper) {
    var action = cmp.get("c.getFooterContent");
    action.setParams({ staticResourceName : 'footer_content' });
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            cmp.set('htmlCode', response.getReturnValue());
        }
    });
}
1
  • I tried this approach.But I'm getting an error 'This page has an error. You might just need to refresh it. Action failed: c:*****$controller$init [Cannot read property 'Q' of undefined] Failing descriptor: {c:*****$controller$init}'.I verified my controller code and everything looks good.
    – Ramya
    Dec 31 '18 at 10:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.