Add custom values to a multi-select picklist?

  • 1
  • Question
  • Updated 4 years ago
  • Answered
  • (Edited)
I'm trying to overcome Salesforce's limit of 150 values for a multi-select picklist by creating a custom renderer that adds the additional values (the values I want to show in the multi-select picklist are values from another model). I think I'm close, but I can't quite figure out what piece(s) are wrong.

My renderer currently looks like this:
var field = arguments[0],	
    value = arguments[1],
    $ = skuid.$;
var codesModel = skuid.model.getModel('Codes'); //
var codes = [];
for(i = 0; i < codesModel.data.length; i++) {
    codes.push({
        'label': codesModel.data[i].Name 
        ,'value': codesModel.data[i].Name 
    });
}
field.element.append(
    skuid.ui.renderers.MULTIPICKLIST.edit({
        entries : codes
}));
return;
This actually renders the field the way that I want, but it doesn't appear to be connected to the model - when I select/unselect values in the dropdown, the save button is not enabled on the page. I think that this is because I'm using skuid.ui.renderers instead of skuid.ui.fieldRenderers, but I can't find a way to specify the entries when using skuid.ui.fieldRenderers.

Any ideas on how I can make this work?
Photo of Jonathan Gillespie

Jonathan Gillespie

  • 870 Points 500 badge 2x thumb

Posted 4 years ago

  • 1
Photo of Jonathan Gillespie

Jonathan Gillespie

  • 870 Points 500 badge 2x thumb
After digging through the skuid forums some more and tinkering with this for a while, I was finally able to get this working. I found a couple of similar posts asking about how to add custom values to standard picklists, and I was able to adapt it to work for multiselect picklist.

Here's my final snippet - if anyone has suggestions on anything that could be improved, I'd love to hear your input.

var field = arguments[0],
value = skuid.utils.decodeHTML(arguments[1]),
$ = skuid.$;

if (field.mode === 'edit') {
	var tourCodes = [];
	skuid.$.each(skuid.model.getModel('TourCodes').getRows(), function(i,row) {
		tourCodes.push({
			active: true
			,defaultValue: false
			,label : row.Name
			,value : row.Name
		});
	});
	
	var customMultiselect = skuid.ui.renderers.MULTIPICKLIST.edit({
			entries : tourCodes,
			required : false,
			value : value
		}).change(function(newValue) {
			var selectedOptions = '';
			for(i = 0; i < newValue.target.selectedOptions.length; i++) {
				selectedOptions += newValue.target.selectedOptions[i].value + ';';
			}

			//Update the row in the target object
			field.model.updateRow(field.row, 'TourCodes__c', selectedOptions);
		});
	//Append the MULTIPICKLIST to the DOM element
	field.element.append(customMultiselect);
} else {
	//If the mode is anything other than edit, display the field as Text
	var formattedValue = '';
	if(value !== null) {
		formattedValue = value.split(';').sort().join(', ');
	}
	skuid.ui.fieldRenderers.TEXT.read(field, formattedValue);
}
(Edited)
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Glad you were able to get this working Jonathan.