Can i add radio buttons in erpnext?

ERPNext
1

Can i add radio buttons in erpnext?

2

With a bit of code, it is possible.

Radio buttons are a very good option to transform a two-click (+scroll) selection list field to a one-click widget, if the number of options is easily manageable on the screen space set apart for the desired functionality.
So it simplifies the UX.

1 Like
3

Yes, from a UX perspective, if you have just two or three options then radio buttons are a better mechanism than a drop down list. I’m also looking to customize a select field into a radio button.

1 Like
4

@Adeel_Siddiqui Are you able to solve this problem by adding radio buttons?

5

@Peer Have added radio buttons?

6

It’s one click less. The click which only serves UI clunkyness.

But it doesn’t scale as well if the number of options is unknown beforehand. Could that be the reason for not offering radio buttons, as some people might end up with screens full of radio buttons, who knows (fun indented)?

So, as always: different use cases, different needs.

It would also be possible to use some radio buttons for the most frequently chosen* options and next to them a select field for “other”.

But the standard options may be the best as long as you don’t know how to build such widgets yourself.

* what they call AI nowadays

7

You can add radio buttons. In doctype add field of type HTML. Then in options box of that field, add below code(Sample code, you can change as per your need)

<label><input type="radio" name="custom_radio" value="option_1"> Option 1</label><br>
<label><input type="radio" name="custom_radio" value="option_2"> Option 2</label><br>
<label><input type="radio" name="custom_radio" value="option_3"> Option 3</label>

Also add one more field of type Data which will hold selected radio button value and this can be used further in code if required. Then I added below client script for radio buttons to work

frappe.ui.form.on(‘Your Doctype’, {
refresh: function(frm) {
// Restore the selected radio button when form is loaded
let selected_value = frm.doc.data_field_name;
if (selected_value) {
frm.fields_dict.html_field_name.$wrapper.find(input[type="radio"][value="${selected_value}"]).prop(‘checked’, true);
}

    // Update the hidden field when a radio button is selected
    frm.fields_dict.html_field_name.$wrapper.find('input[type="radio"]').on('change', function() {
        frm.set_value('data_field_name', $(this).val());
    });
}

});