How to create a custom field renderer to render a reference field as radio buttons?

Ideally you convert the Reference field to render as a radio button as you mentioned.  I’m not sure you can do that with non picklist fields.

Another option may be to have a UI picklist rendered as radio buttons.  Have a model be your filtered reference field records, then populate your UI picklist with the rows from that model.  Put an action on the UI field to update your actual ref field when the user makes a selection using the radio buttons.

I’m interested to hear from others on the reference field as radio button potential!

Hi Chandra!

Thank you for your reply. I like the more declarative option you suggested. I’ll have to think on it to see if it would work for my specific scenario.

My reference field is actually going to be inside of a deck with the filter being based on the current row. That makes it a little more tricky to base the picklist on a separate model’s rows. I might be able to populate the picklist via JavaScript though and then use the default radio button renderer and action framework to do the rest of the work for me. I’ll post back if I am able to get that option to work.

I was able to figure out a solution and wanted to post back what I came up with. I was able to create a custom field renderer that renders a reference field as radio buttons. Essentially in edit mode, I am using the standard picklist renderer i.e. skuid.ui.getRenderer(‘PICKLIST’)… with the renderas option set to “RADIO_BUTTONS”.

I am populating the picklist with the rows that I need via a separate model. For my use case, I need to filter the reference field at the row level inside of a deck. I saw that the reference field at the field editor level has an option to filter which is perfect however, I couldn’t figure out how to access the filtered values in the custom renderer. For this reason, I had to switch to using a separate model and looping through the model to find the values associated with the row. This works fine for my particular page, but could cause problems if your model has a lot of rows.

var field = arguments[0],
value = skuid.utils.decodeHTML(arguments[1]),
$ = skuid.$;
if(field.mode === 'edit'){
    
    /* In edit mode use the default picklist standard renderer with 
     * the renderas option set to display the picklist as radio buttons
     */
    
    var answers = [],
    quizQuestion = field.row.Quiz_Question__c;
    
    /* Loop through the answer choice model and create picklist options
     * for each answer related to the question (row)
     */
    
    skuid.$.each(skuid.model.getModel('AnswerChoices').getRows(), function(i,row){
        if(row.Quiz_Question__c === quizQuestion){
            answers.push({
                value:row.Id,
                label:row.Answer_Text__c
            });
        }
    });
    
    var picklist = skuid.ui.getRenderer('PICKLIST').edit({
        buttonSetName:field.row.Id, //Note, unique Id for radio buttons
        entries:answers,
        required: true,
        value: value,
        renderas:"RADIO_BUTTONS",
        onChange: function(value){
            field.model.updateRow( field.row, field.id, value );
        }
    });
    field.element.append(picklist);
}else{
    // In read mode display the standerd renderer
    skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field, value);
}```