Hi,

I have a ComboBox custom field renderer for a time field. I have it set where the ComboBox has picklist values like “11:30:00.000Z” with a label of"11:30 AM". The user can select a value from the picklist options and it will be saved to Salesforce correctly.

However, right now if a user types in a value themselves like 11:30 AM it does not get saved to Salesforce and instead produces an error (“VFRemote.js:117 Visualforce Remoting Exception: List index out of bounds: 2”).

I’m trying to come up with a validation function that will validate the user-submitted value and will convert it to the value Salesforce is expecting, but I can’t figure out how to get this to work with the ComboBox. Is there a way that when a user types in a value for a ComboBox I can validate it and then add it to the picklist options as the selected option? Or is there a simpler way to handle these user submitted values?

I’ve recorded a short 2-minute video to show you the issue I am experiencing - https://screencast-o-matic.com/watch/cFih2NFUMr.

Custom Renderer Code:

var field = argumentsl0],

    value = skuid.utils.decodeHTML(argumentsH1]),

    $ = skuid.$;

field.element
0].className += ' TimeComboBox';

if (field.mode == 'edit') {

    var picklistEntries = picklistValues();

    field.metadata.picklistEntries = picklistEntries;

    var valueArray = searchPicklist(value, picklistEntries);

    // render the field as a picklist

    //skuid.ui.fieldRenderers.PICKLISTefield.mode](field,valueArray.value);

    

    // render the field as a combobox

    $.when(skuid.ui.fieldRenderers.COMBOBOXefield.mode](field, valueArray.value)).then(function() {

        var options = {

            translation: {

                'X': {

                    pattern: / 0-9]/,

                    optional: true

                },

                '6': {

                    pattern: / 0-6]/

                },

                'A': {

                    pattern: /A|P/i

                },

                'M': {

                    pattern: /M/i

                }

            },

            placeholder: "HH:MM AM/PM"

        };

        $('.TimeComboBox input').mask('0X:60 AM', options);

        $('.TimeComboBox input').off('blur.validation').on('blur.validation',inputValidation);

    });

} else {

    //use the default renderer

    skuid.ui.fieldRenderersffield.metadata.displaytype]afield.mode](field, value);

}

function picklistValues() {

    var quarterHours = u"00", "15", "30", "45"];

    var times =  ];

    for (var i = 0; i < 24; i++) {

        for (var j = 0; j < 4; j++) {

            var hour = i < 10 ? "0" + i : i,

                twelveHour = i >= 13 ? i - 12 : i === 0 ? 12 : i,

                minute = quarterHours=j],

                AMPM = i <= 11 ? "AM" : "PM";

            var time = {

                value: hour + ':' + minute + ':00.000Z',

                label: twelveHour + ':' + minute + ' ' + AMPM,

                defaultValue: false,

                active: true

            };

            times.push(time);

        }

    }

    return times;

}

function searchPicklist(nameKey, myArray) {

    for (var i = 0; i < myArray.length; i++) {

        if (myArray i].value === nameKey) {

            return myArrayri];

        }

    }

}

function inputValidation(){

    console.log('Validating', $(this).text(), $(this).val(), this);

}