12

I was looking through the AuraDocs reference today and found a function on the Component javascript API that I had not seen before:

addValueProvider (String keyObject valueProvider)

Adds Custom ValueProviders to a component

Parameters

key : String string by which to identify the valueProvider. Used in expressions in markup, etc.

valueProvider : Object the object to request data from. Must implement .get(expression), can implement .set(key,value).

I was able to find a few references to it's use in the Aura github project here - line 80-86

var vp = {
        get: function(key, comp) {
            testUtils.assertStartsWith("SecureComponent", comp.toString(), "Component passed to value provider should be SecureComponent");
        }
    }
cmp.addValueProvider('foo', vp); 
cmp.get('foo.x');

But I was wondering if anyone had used this Component call and had a more concrete example of it's use.

It looks like it could be handy in some situations (dynamic component creation the obvious case)

12

Custom Value Providers really doesn't have any place in Lightning, as addValueProvider is used by the framework to provide $Label, c, v, etc. Dynamic component creation is facilitated by $A.createComponent, and you should use it for that purpose.

However, it could have a variety of useful utility purposes. For example, you could create a sessionStorage-backed storage provider:

controller.js

({
    init: function(component, event, helper) {
        component.addValueProvider(
            'storage',
            {
                get: function(key, comp) {
                    return sessionStorage.getItem(key);
                },
                set: function(key, value, comp) {
                    sessionStorage.setItem(key, value);
                }
            }
        );
    }
})

component

<aura:component >
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <ui:inputText value="{!storage.value}" />
</aura:component>

This code will remember the value of ui:inputText, even when the user reloads the page, without wiring up aura:valueChange events or anything else. Go ahead and try it out.

The only apparent rule is that the data must already be available, because you have to return the correct value rather than fulfilling a Promise or using a callback.

The get and set methods are called explicitly through component.set and component.get, or you can call them implicitly by using expressions, just as you'd do with "c" or "v".

  • This conversation looks interesting, but also quite long, so I have moved it to chat. – Adrian Larson Jun 22 '17 at 10:17
  • 1
    @AdrianLarson and now the conversation is not available. Can we not do that? Remove interesting content? – Andy Visser Sep 16 '18 at 14:32
  • 1
    @AndyVisser I have permission to view deleted chats, apparently, and it wasn't that interesting. I mean, it had potential but just kind of drifted off. The only think of note is that I found a $A.addValueProvider that, if we had access to it, would allow for a globally-available value provider (e.g. like $Label). – sfdcfox Sep 16 '18 at 15:09
  • Oh well. I know this is out-of-scope for 99% of lightning devs, but I think I'm at that point. Currently manually setting value providers for templates (I'm sure this is unsupported, but it works) cmp.set('v.localTemplate[0].attributes.valueProvider', cmp.get('v.rowTemplate[0].attributes.valueProvider')); and I'm looking for deeper understanding of these things. – Andy Visser Sep 16 '18 at 16:00
  • @AndyVisser Well, if you have a question about what you're trying to solve, please feel free to ask a new question. I suspect you may be having an X-Y problem, so be sure to include the original objective/problem, as well as what you've done to try to resolve it. I"ll be happy to take a look at it for you. – sfdcfox Sep 16 '18 at 16:24

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.