Can i add radio buttons in erpnext?
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.
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.
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
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());
});
}
});