7

To implement something like a public ValueProvider I implemented a component combining the features out there to have static values available in js and markup. Now I'm having trouble using the addValueProvider Feature (used for the markup side) since there is no documentation out there.

To make static values accessible for any component, I need to reference the value providing component in the concrete component like:

<!-- Value Providers -->
<c:THINGS context="{!this}" />

THINGS.cmp looks like:

<aura:component >
    <aura:attribute name="context" type="Map" required="true"/>

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

THINGSController.js

({
    doInit: function(cmp, evt, hlp) {
        const things = { FOO: "Foo", BAR: "Bar"};

        cmp.get("v.context").addValueProvider("THINGS", {get: ()=>things});
    }
})

Now I should be able to reference FOO like this:

<!-- Value Providers -->
<c:THINGS context="{!this}" />

<!-- Markup -->
<p>{!THINGS.FOO}</p>

The problem I encountered here is, that THINGS.FOO returns the whole Map, what renders to [object Object].

When I discovered this, I started playing around and figured out, that THINGS behaves really weird.

An init handler on my concrete component looks like this:

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

ctrl (JSON.parse&stringify to get around the proxy issue):

doInit: function(cmp, evt, hlp) {
    JSON.parse(JSON.stringify( cmp.get("THINGS.value") ));
    JSON.parse(JSON.stringify( cmp.get("THINGS.FOO") ));
    JSON.parse(JSON.stringify( cmp.get("THINGS.x") ));
    JSON.parse(JSON.stringify( cmp.get("THINGS.value.FOO") ));
    JSON.parse(JSON.stringify( cmp.get("THINGS.asdasd.asdasd.asdd.ads") ));
}

The weird thing here is, that they all returned {FOO: "Foo", BAR: "Bar"}

cmp.get("THINGS") leads to an error message, not knowing what THINGS means.

Conclusion:

Value providers do only work on single values, (or maybe even lists, when we decide to iterate the result.)

cmp.addValueProvider("FOO", {get: ()=>"Foo"});

I hope you agree that this isn't a value provider, it's just a complex way to store a single value.

Quesion:

How are we supposed to use the setValueProvider feature? all I found was this answer that doesn't seem to be fully accurate.

Is there a chance to store simple key value pairs in these providers? if not, why? And where except the Aura Documentation is it documented? All it states is

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

Update:

Thanks to Jonathon I was able to solve the mystery and created this gist to share my generic value Provider:

Lightning Value Provider

I decided to make provider names capitalized, so where ever I use it, it does not look like a component, but represents static finals. In our product I use it to port Enums or similar constructs from apex into lightning.

7

The value provider's get method requires a key to retrieve the value from the map/object. So with your value providers get method returning the entire map you will always get the output of [object Object]. By changing your get method in the addValueProvider function to .addValueProvider("THINGS", {get: (k)=>things[k]});, when retrieving {!THINGS.FOO} you will get Foo and likewise with {!THINGS.BAR} you would get Bar


Additionally if you also want to be able to update or add new values to the value provider you need to also include a set method. .addValueProvider("THINGS", {get: (k)=>things[k], set: (k, v)=>things[k]=v});

  • Oh, wow, totally missed that get(expression) thing in the documentation. Thank you so much, I already gave up on having a proper value provider, you saved my feature :D – Basti Dec 11 '18 at 14:59
  • No problem. Unfortunately this happens to us all – Jonathon Chambers Dec 11 '18 at 15:12
  • I prepared a gist in case you are interested in the results :) thanks again! Lightning Value Provider – Basti Dec 11 '18 at 16:29

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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