5

We are doing some work soon where multiple Lightning Components all need to access some JSON configuration data. Is there a good pattern that allows this data to be read once from the server and injected into the (fairly independent) components?

For example, one component could do the read and fire an application event containing the JSON configuration that all components then consume.

If you have any good working patterns for this situation, please share...

  • Did you consider using Static Resources to hold the JSON config? You could reference them in each component. – Folkert Nov 10 '17 at 13:11
  • @Folkert I hadn't - good idea. Would you expect browser caching to apply so multiple references would only result in one download? – Keith C Nov 10 '17 at 13:20
  • Yes, static resources are cached – Folkert Nov 10 '17 at 13:40
  • Just put it to the test in a lightning component that just loads a static resource and placing that component on a record page a few times. It only loads the static resource from cache once (or if you clear cache only downloads once). – Folkert Nov 10 '17 at 13:51
  • @Folkert Thank-you for doing that. For me the data was going to be in a static resource anyway. Most static resource reference examples are to images or JavaScript to execute: if there is simple to pull the content into a JavaScript var from the URL then I'll certainly accept that as the answer. – Keith C Nov 10 '17 at 14:00
2

Static resource are cached and can be referenced in multiple places in your Lightning Component. I'm assuming you want to do use it directly in your JS controller, but it's also possible to reference Static Resources in component markup (for instance for CSS style sheets).

Referencing Static Resources multiple times on the same page (for instance in multiple Lightning components) will result in just 1 call to the browser cache or 1 download of the static resource.

Use the $Resource value provider to reference the Static Resources in your Lightning Component.

({
    useJSONFromStaticResource: function(component) {
        var json = $A.get('$Resource.JsonStaticResource') + '/assets/jsonconfig.json';
    }
})
  • Mmm, looks like it only gives you a reference to the Resource, instead of the reference itself. Have to look into it further. – Folkert Nov 10 '17 at 14:24
  • Yeah hopefully there is a simple approach to getting the content. – Keith C Nov 10 '17 at 15:11
  • I guess XMLHttpRequest (OK with Locker Service I presume as listed here documentation.auraframework.org/lockerApiTest/…) but IE11 looks a problem based on caniuse.com/#search=XMLHttpRequest. – Keith C Nov 10 '17 at 15:47
  • Eventually support for IE11 is going to be discontinued, so don't know if that's going to be a huge blocker. help.salesforce.com/… – Folkert Nov 10 '17 at 16:02
  • Unfortunately we have enterprise customers who are still locked into IE11 because of other "legacy" systems that require it. – Keith C Nov 10 '17 at 16:48

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.