Add a "radio" widget type in forms

Get Help
1

Hi, everybody

i’m looking for using a “radio” widget type in forms with the following possible attributes :

  inputradio:
    widget: radio
    help: "you can choose"
    options: 
      - [ "choice 1" ]
      - [ "choice 2" ]
    checked: "choice 1"

It mays occur several instances of radio buttons in the same forms.

question : have you an example realized in javascript doing that purpose ?

i suppose that the good place shall be in the “/var/www/ood/apps/sys/dashboard/app/helpers/batch_connect/session_contexts_helper.rb” file which contains :

case widget
when "select"
  form.select attrib.id, attrib.select_choices, field_options, attrib.html_options
when "resolution_field"
  resolution_field(form, attrib.id, all_options)
when "check_box"
  form.form_group attrib.id, help: field_options[:help] do
    form.check_box attrib.id, all_options, attrib.checked_value, attrib.unchecked_value
  end
else
  form.send widget, attrib.id, all_options
end

waiting for your effective help, as usual.

jean-marie

2

This appears to work in an initial test. Note this PR has not been reviewed or merged yet so it is subject to change: https://github.com/OSC/ondemand/pull/139/files

basically you modify apps/dashboard/app/helpers/batch_connect/session_contexts_helper.rb as you suggested. Then you can do something like this:

version:
  widget: radio
  label: "MATLAB version"
  help: "This defines the version of MATLAB you want to load."
  options:
    - [ "R2018b", "matlab/r2018b" ]
    - [ "R2018a", "matlab/r2018a" ]
    - [ "R2017a", "matlab/r2017a" ]
    - [ "R2016b", "matlab/r2016b" ]
    - [ "R2015b", "matlab/r2015b" ]
  checked: "matlab/r2018a"

And this is the result:

32%20PM
32%20PM618×512 27 KB

3

Hi, the OSC team.

i have tested this mod and it works fine ! you’re the best !
one question of style : by default, all the form types are shown in a vertical mode. it’s possible to show by example for the radio buttons, side by side ?
if you prefer, i can open a specific topic on the style subject.

thanks a lot

jean-marie

4

I made a mistake. The see the updated code here: https://github.com/OSC/ondemand/pull/139/files.

Bootstrap supports radio buttons inline style, but some modifications need to occur:

  1. <label>Version:</label> now needs to wrap around the radio buttons
  2. each radio button needs the class radio-inline

If you do both of these steps you end up with what looks like this:

36%20PM
36%20PM1160×124 6.99 KB

If you also add form-horizontal class to the <form tag the label lines up slightly better:

11%20PM
11%20PM1198×124 7.04 KB

These are non trivial changes though to support both styles. You could add a form.js file in the root of the app and use jQuery to add these classes at runtime, but the label might have spacing issues. I’ll open an issue on GitHub to track.