in Table unable to render( Hide or Show) a field based on another pick list field value changed.

  • 1
  • Question
  • Updated 4 years ago
  • Answered
  • (Edited)
Account information entering  in a table . fields are Agency__c (type text) Revenue_Source__c(Type=Pick-list,Values=Phone,Web,Advertise),when ever Revenue_Source__c is selected as Advertise then should show as Agency__c Field.in a table other wise hide it.

$ = skuid.$;
    model = arguments[0].model,
    row = arguments[0].row ,
    element = arguments[0].element;
   
 var valueType = model.getFieldValue( row , 'Revenue_Source__c' );


function renderField( fieldName,defaultValue ){
   
  var field = new skuid.ui.Field( row, model, null, { 
fieldId: fieldName, register: true } ),
        value = model.getFieldValue( row , fieldName ) ||defaultValue;
    
    console.log( field, value );
        if(field && field.metadata && field.metadata.displaytype ){
      
      //skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode]( field, value );
 
           console.log( fieldName + ' rendered!', field.element );
     
       skuid.ui.fieldRenderers[field.metadata.displaytype].edit( field, value );
      
  }
  
  return field.element;
}
switch ( valueType ){
   
 case 'Advertise':
         element.append(renderField( 'Agency__c' ,''));
         

        break;

}

this code is working for  page loading but not working when i changed picklist value in feild in Edit Mode.

Any one suggest me.
Photo of Tavva Reddy

Tavva Reddy

  • 180 Points 100 badge 2x thumb

Posted 4 years ago

  • 1
Photo of J.

J., Official Rep

  • 7,470 Points 5k badge 2x thumb
Tavva,

The reason this works on initial load but not on changes is that there is nothing triggering the Agency__c field to rerender when the value of Revenue_Source__c changes. Similar to approach discussed in this post (and this post), try adding a model action for when your Revenue_Source__c field is updated. For it's action, run a snippet which loops through all of the field registered on the model (skuid.model.Model.registeredFields), and if the criteria fits (row Ids match, and the field's id is Agency__c), call the field's render method:
var params = arguments[0],
model = params.model,
$ = skuid.$;

// Loop through this model's registered fields
$.each(model.registeredFields,function(){
// If this is the row that was updated and the field that we want, render the field
if (this.row.Id === params.rowId && this.id === 'Agency__c') {
this.render();
}
});
This covers you for any changes to that field from anywhere on the page. Each field renderer has a reference to the other fields in its skuid.ui.Item, so you should be able to get even more specific, but the above approach should work.
Photo of Tavva Reddy

Tavva Reddy

  • 180 Points 100 badge 2x thumb
Hi J,

i tried above the code but its not working, could you help me exactly how its working.

var params = arguments[0],
    model = params.model,
$ = skuid.$;
// Loop through this model's registered fields
$.each(model.registeredFields,function(){
//If this is the row that was updated and the field that we want, render the field
if (this.row.Id === params.rowId && this.id === 'Agency__c') {
this.render();
} });
Photo of J.

J., Official Rep

  • 7,470 Points 5k badge 2x thumb
Tavva,

First, I just noticed some clean up that I would add to your original custom field renderer. It may not be conflicting at all, but I think it will keep you references clean and in the appropriate scope. Make that first line (note var and ,)...
var $ = skuid.$,
Second, just to check that we're on the same page, that snippet that I posted should be a new snippet in addition to your other one. The Model action should be on whatever Model contains the Revenue_Source__c field. Assuming that you've got it all firing when you need it to fire, I'd add a few console.logs to see if you can identify where it's failing:
var params = arguments[0],
model = params.model,
$ = skuid.$;

console.log('Snippet Fired!');

// Loop through this model's registered fields
$.each(model.registeredFields,function(){

console.log('this.row.Id => ' + this.row.Id);
console.log('params.rowId => ' + params.rowId);
console.log(this);

// If this is the row that was updated, loop through the fields to find the one we want
if (this.row.Id === params.rowId && this.id === 'Agency__c') {
console.log('Rendering!');
this.render();
}

});
If you get "Snippet Fired!" in your console, but that's it, then you know the snippet is firing. If you get "this.row.Id => " and "params.rowId => " then you know your model has registered fields. You'll get a log for each field registered to your model, but you'll only get "Rendering!" in your console when the field's id is "Agency__c." If this doesn't show up, then make sure the field is Agency__c (I was just guessing that was it based on your original post).
Photo of Tavva Reddy

Tavva Reddy

  • 180 Points 100 badge 2x thumb
Hi j,
'Snippet Fired'  this.row.id and params.row.id also printing in log fine. when picklist value is other than 'cold'.when i'm selecting cold at that time params.row.id is printing as Undefined and this.row.id printing RecordId.
after that  if (this.row.Id === params.rowId && this.id === 'Agency__c') {  this condition  is not allowing inside .

what exactly happen in this condition . if (this.row.Id === params.rowId && this.id === 'Agency__c') 
(Edited)
Photo of J.

J., Official Rep

  • 7,470 Points 5k badge 2x thumb
In (somewhat Salesforce tinted) plain English, that if statement is checking to see that the Salesforce record Id of the current field in your loop matches the one of the current row that you are editing, and that the API name of the field is the field that you actually want to rerender. You may need to adjust the logic (e.g., Agency__c may not be the correct field), but this approach should work.
Photo of Tavva Reddy

Tavva Reddy

  • 180 Points 100 badge 2x thumb
Hi J,

every thing is perfect .same code i copied and pasted but its not working.