Skip to main content

I have a picklist called payment frequency with three values (weekly, monthly and annually). I want these values to render conditionally based on the value of another picklist called product.


I’m assuming this will require custom field renderer (based on this thread) so I’ve created the following snippet just to see how things work. I haven’t added the logic to check the product field’s value before pushing values in picklistEntries just yet.


var field = argumentsr0],
var value = skuid.utils.decodeHTML(argumentsr1]);
var picklistEntries = field.metadata.picklistEntries;
picklistEntries.length = 0;
picklistEntries.push({ value: 'MONTHLY', label: 'MONTHLY', defaultValue: false, active: true });
skuid.ui.fieldRenderersefield.metadata.displaytype]lfield.mode](field,value);

When I load the page with above field renderer, I get the following error:


I’m not great at JS so it’s possible that I’m making a silly mistake somewhere. Also, the page on which this field resides is a record creation page, so all fields are in edit mode when the page loads.


An important thing to note is that the payment frequency picklist is itself a dependent picklist.


Also, I want to ensure that this field renderer runs every time the value of product picklist changes.


Can anyone let me know what’s the mistake in above snippet?

Am I on the right path here or is there a better way to achieve what I’m trying to do.

I’m not sure exactly how you’re doing it or what might be wrong with your code, but in the past I’ve taken a different approach where I remove the items from being selectable in a picklist, rather than add them as you’re doing.


Here’s my code to review as an example:


	
var field = arguments 0];
var cellElem = field.element;
var row = field.row;
var value = arguments 1];

//Use field mode specified
skuid.ui.getFieldRenderer(field.metadata.displaytype)sfield.mode]( field, value );
//Force Edit
//skuid.ui.getFieldRenderer(field.metadata.displaytype).edit( field, value );
//Force Read
//skuid.ui.getFieldRenderer(field.metadata.displaytype).read( field, value );

var select = field.element.find('select');

if (select.length) {
// Remove unwanted entries
$.each(select.children('option'),function(){
if ($(this).val()==='Employee' || $(this).val()==='Vendor' || $(this).val()==='Cemetery'){
$(this).remove();
}
});
}

Perfect. Your approach suits my use case very well since I didn’t need to add extra values to my picklist anyway. I just needed a way to conditionally render them which I can now do by removing the values that I want.

Thanks a lot Mark.


Have you considered using a Field Dependency on the object where these fields reside? This would enable a universal implementation anywhere you use fields without needing any javascript.


Reply