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

  • 1
  • Question
  • Updated 6 months ago
  • Answered
I know we can render a reference field as a picklist, but is there a way to render a reference field as radio buttons instead? I have a filtered lookup relationship that I would like to display each value as a radio button.

I created a very basic custom field renderer, as a proof of concept, that appends an HTML radio button form to the field.element. This works as expected, but I can't figure out how to access the filtered reference records. If I can get the reference records out I could dynamically add radio buttons for each record and then append the HTML to the element. 

There might be a better way than the above approach and if there is I am all ears!
Photo of Tim Wilson

Tim Wilson

  • 296 Points 250 badge 2x thumb

Posted 6 months ago

  • 1
Photo of Chandra V

Chandra V, Champion

  • 7,590 Points 5k badge 2x thumb
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!

Photo of Tim Wilson

Tim Wilson

  • 296 Points 250 badge 2x thumb
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.
Photo of Tim Wilson

Tim Wilson

  • 296 Points 250 badge 2x thumb
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);
}