Help with valueFn and makeValueFn

[danjgill]

Hi,

I have been using this module in a small project I am doing for home. For the most part, it works quite well.

One part is confusing though. In creating customTypes, I can sucessfully get the html portion to work, but I can't seem to get the values to update. The propertyChangedCallback is never called either. Here is my code:

var theCustomTypes = { pickimage: { // name of custom type html: function(elemId, name, value, meta) { // custom renderer for type (required) console.log(elemId, name, value, meta); valueHTML = '' + value + '...' value = valueHTML; return valueHTML; }, valueFn: false, }, widthslider: { html: function (elemId, name, value, meta) { console.log(elemId, name, value, meta); var myhtml = '' + value + '' return myhtml; }, valueFn: function(elemId, name, value, meta) { return function() { return document.getElementById(elemId).value; }
} } };

For now, only consider "widthslider". ("pickimage " will be fixed with the same solution later). "myFunction" simply updates the value in the label to match the value in the slider. The valueFn tries to get the current value in the slider and return it. However, I must be doing something wrong, because the callback is never called, and the value is never updated.

Any guidance on how to use valueFn and makeValueFn (and their differences for that matter) would be appreciated.

[gswilcox01]

See example below, and note:

1. in your html / rendering function, actually create an HTML element, with that elemId
2. change from valueFn to makeValueFn, since you are returning a function
3. for this example, i'm using .innerHTML instead of .value like you had, because innerHTML corresponds with the property of the "p" element to return what i want. Depending on the actual element you create in the html/rendering function you might want something else at the end of the day.

Example:

            widthslider: {
                html: function (elemId, name, value, meta) {
                    var myhtml = '<p id="' + elemId +'">' + value + '</p>';
                    return myhtml;
                },
                makeValueFn: function(elemId, name, value, meta) {
                    return function() {
                        return document.getElementById(elemId).innerHTML;
                    }
                }
            }

[danjgill]

I'll give this a try and let you know how it works. I really appreciate the input.

Thanks again

[danjgill]

Just reporting back that it is working now. Just for others that might be having a similar problem: It seems (I think, not sure) that the propertyChangedCallback is not automatically called for customType fields. When I wasn't seeing my value in propertyChangedCallback, I assumed it was not getting updated. Once I hooked my customType into the callback, all was well. Not sure if this is a legitimate way to solve the problem, but it worked for me.