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...

6
  • Did you consider using Static Resources to hold the JSON config? You could reference them in each component.
    – Folkert
    Nov 10, 2017 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, 2017 at 13:20
  • Yes, static resources are cached
    – Folkert
    Nov 10, 2017 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, 2017 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, 2017 at 14:00

1 Answer 1

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';
    }
})
5
  • 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, 2017 at 14:24
  • Yeah hopefully there is a simple approach to getting the content.
    – Keith C
    Nov 10, 2017 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, 2017 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, 2017 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, 2017 at 16:48

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .