custom field renderer issue

  • 1
  • Question
  • Updated 5 years ago
  • Answered
Not sure what I'm doing wrong.

Photo of Pat Vachon

Pat Vachon, Champion

  • 45,056 Points 20k badge 2x thumb

Posted 5 years ago

  • 1
Photo of J.

J., Official Rep

  • 7,848 Points 5k badge 2x thumb
Pat,

I think that you need to bind that event to the input inside field.element:
$(field.element.find('input')).on('change',function() {
...
});
Photo of Pat Vachon

Pat Vachon, Champion

  • 45,056 Points 20k badge 2x thumb
No dice.
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,686 Points 5k badge 2x thumb
Pat can you try logging your "period" variable inside the switch? I have a suspicion that something may be wrong with it...
Photo of Pat Vachon

Pat Vachon, Champion

  • 45,056 Points 20k badge 2x thumb
Photo of Pat Vachon

Pat Vachon, Champion

  • 45,056 Points 20k badge 2x thumb
Photo of J.

J., Official Rep

  • 7,848 Points 5k badge 2x thumb
Pat,

I just realized that is a Date field. Does it work if you type in a date rather than select one in the date picker?
Photo of Pat Vachon

Pat Vachon, Champion

  • 45,056 Points 20k badge 2x thumb
No dice on that either.
Photo of Pat Vachon

Pat Vachon, Champion

  • 45,056 Points 20k badge 2x thumb
^^ bump ^^ this doesn't work. Any other insights?
Photo of Ben Hubbard

Ben Hubbard

  • 12,710 Points 10k badge 2x thumb
If you paste the code here, I'll look at it. :)
Photo of Pat Vachon

Pat Vachon, Champion

  • 45,056 Points 20k badge 2x thumb
Here it is.

var field = arguments[0],
    value = skuid.utils.decodeHTML(arguments[1]),
	jsDate = skuid.time.parseSFDate(value),
	period = field.row.Item__r.Price_per_Period__c,
	$ = skuid.$;
    
    skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);
    
    // If we're in edit mode, then update end date value
    
    console.log('snippet is called. period is ' + period);
    
    if (field.mode == 'edit') {

        console.log('field.mode == "edit"');
        
        //$(field.element).on('change', function() {
        $(field.element[0].firstChild.value).on('change',function() {
            
            console.log('on change works');
            
            switch (period){
                case "Day":
                    console.log('Day');
                    break;
                case "Week":
                    console.log('Week');
                    break;
                case "Month":
                    console.log('Month');
                    break;
                case "Year":
                    console.log('Year');
                    break;
                default:
                    console.log('nothing');
                    break;
            }
            
        });
    }
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,686 Points 5k badge 2x thumb
Does the switch get called at all? Are you getting console.log Day,Week, etc. ? Are you getting "on chenge works"?
Photo of Pat Vachon

Pat Vachon, Champion

  • 45,056 Points 20k badge 2x thumb
This doesn't get called so the listener isn't working.

console.log('on change works');
Photo of Pat Vachon

Pat Vachon, Champion

  • 45,056 Points 20k badge 2x thumb
^^bump^^
Photo of Ben Hubbard

Ben Hubbard

  • 12,710 Points 10k badge 2x thumb
Weird, I never got this notification.  Looking at it now...
Photo of Ben Hubbard

Ben Hubbard

  • 12,710 Points 10k badge 2x thumb
If you use J's code and type in the text box instead of using the date picker, your change event should fire.  However, jQueryUI's datepicker does not fire the change event on your input element when you make a selection.  You have to override the onSelect event that Skuid has put on that datepicker.  Here's my version of the snippet and you can follow when the logs are shown.

var field = arguments[0],    value = skuid.utils.decodeHTML(arguments[1]),
jsDate = skuid.time.parseSFDate(value),
period = field.row.Item__r.Price_per_Period__c,
$ = skuid.$;
    
    skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);
    
    // If we're in edit mode, then update end date value
    
    console.log('snippet is called. period is ' + period);
    
    if (field.mode == 'edit') {
        console.log('field.mode == "edit"');
        console.log(field.element);
        
        var myInputElement = field.element.find('input');
        
        myInputElement.on('change',function() {
            
            console.log('on change works');
            
            switch (period){
                case "Day":
                    console.log('Day');
                    break;
                case "Week":
                    console.log('Week');
                    break;
                case "Month":
                    console.log('Month');
                    break;
                case "Year":
                    console.log('Year');
                    break;
                default:
                    console.log('nothing');
                    break;
            }
            
        });
        
        var originalSelectFunction = myInputElement.datepicker('option','onSelect');
        
        myInputElement.datepicker('option','onSelect',function(dateText,datepickerobj){
            
            originalSelectFunction(dateText,datepickerobj);
            console.log('my additional code');             console.log(dateText);
        });
    }


As you can see it gets tricky because you have to handle both changes to the text box and changes to the datepicker widget.  It may be easier (and better) for you to just write a model action snippet instead of a custom field renderer here, but the custom field renderer approach should work.
(Edited)
Photo of Pat Vachon

Pat Vachon, Champion

  • 45,056 Points 20k badge 2x thumb
Well, at least now the change code is working. Problem is that the variables aren't working.

I think maybe I should go with running the snippet for a model action. Can this work using the row updated with the specified field "Start Date". Are the arguments the same?
Photo of Ben Hubbard

Ben Hubbard

  • 12,710 Points 10k badge 2x thumb
I forgot to fix the period variable in the code I posted.  That may be the issue you're seeing.

if your code is like this...
period = 'field.row.Item__r.Price_per_Period__c',


it should be this instead...
period = field.row.Item__r.Price_per_Period__c,

I made that change since I don't have that field, but forgot to put it back.

As for the model action snippet, I forget what the arguments are. I usually just do console.log(arguments); to see what is sent into the snippet.
Photo of Pat Vachon

Pat Vachon, Champion

  • 45,056 Points 20k badge 2x thumb
Nope. I fixed that. The field variable is saying it's undefined.
Photo of Ben Hubbard

Ben Hubbard

  • 12,710 Points 10k badge 2x thumb
weird. If you show me exactly in the code where it's undefined i might be able to help.  Although, I think the model action is the better approach anyways.
Photo of Pat Vachon

Pat Vachon, Champion

  • 45,056 Points 20k badge 2x thumb
It's defined on rendering the field, but not on change of either kind.
Photo of Ben Hubbard

Ben Hubbard

  • 12,710 Points 10k badge 2x thumb
It's defined for me.  I just put...
console.log(field); 
inside those change handlers and it shows up just fine.
Photo of Pat Vachon

Pat Vachon, Champion

  • 45,056 Points 20k badge 2x thumb
Figured it out..... I think. The Price_per_Period__c is a picklist field is on a related record through Item__r. I don't think this field is accessible until the row I'm on is saved. Other fields are, but not this one. As such, it's the one field that doesn't show in the model until after I save the record.
Photo of Pat Vachon

Pat Vachon, Champion

  • 45,056 Points 20k badge 2x thumb
I'll either have to save the record prior to this or create another model just to do this query for this value.

I think ...
Photo of Pablo Martinez

Pablo Martinez

  • 2,468 Points 2k badge 2x thumb
Since is a datepicker, have you tried to use 'changeDate' instead 'change'?