Form variable dependent upon previously selected variable

On the interactive Desktop form is there a way to have the options of one form variable dependent upon what is selected in a previous variable? We have a variable called allocations that a user can use to specific purchased allocation. Another variable is is the node type. Depending upon what is selected in the allocation variable we want to only show the node types that should be used with that allocation. For example if they select a graphics core node we want to only present those node types that have graphics processors in them.

Hi and welcome!

You can, though it’s not super straight forward or easy right now. You’d have to add javascript that adds event handlers to those change events.

You may be able glean what’s going on in our Jupyter app. Specifically how the form.js and form.yml.erb relate to one another. Basically our use case is similar to yours. Somethings are available to our pitzer cluster and others to owens cluster. So when a user chooses a cluster (or changes the choice), there’s javascript to enable and disable different options.

Thank you. I used your suggestion and it works great. I might even be able to use it for other modifications as well.

I have written javascript to do this on the fly for a few apps. Here is a code dump of one of my jupiter apps that allows users to specify if they want to use a local (~/) install of anaconda and/or a custom anaconda environment.

Sorry, for the lack of comments and ugly JS… I even left that comment for myself when I originally wrote it…

'use strict'

/*
Morgan is well aware that this is some ugly JS but its in production...working...so he is going to let it stay this way...
*/

/*
  script to toggle anaconda install and environment options based on selection.
 code references lovingly stolen from https://github.com/OSC/bc_osc_ansys_workbench/blob/master/form.js
*/

function toggle_conda_install() {
  let conda_module = $('#batch_connect_session_context_conda_module');
  let conda_install = $('#batch_connect_session_context_conda_install');
  let conda_install_checkbox = document.getElementById("batch_connect_session_context_conda_install_checkbox"); 
if(conda_install_checkbox.checked === true)  {
   conda_install.parent().show();
   conda_module.parent().hide();
  } else {
   conda_install.parent().hide();
   conda_module.parent().show();
  }
}
function toggle_conda_env() {
  let conda_env = $('#batch_connect_session_context_conda_env');
  let conda_env_checkbox = document.getElementById("batch_connect_session_context_conda_env_checkbox"); 
if(conda_env_checkbox.checked === true)  {
   conda_env.parent().show();
  } else {
   conda_env.parent().hide();
  }
}

toggle_conda_install()
toggle_conda_env()
let install_trigger = $('#batch_connect_session_context_conda_install_checkbox');
install_trigger.change(toggle_conda_install);
let env_trigger = $('#batch_connect_session_context_conda_env_checkbox');
env_trigger.change(toggle_conda_env);
const form = document.getElementById("new_batch_connect_session_context");

form.addEventListener("submit", function(e) {
  let conda_env = document.getElementById("batch_connect_session_context_conda_env");
  let conda_install = document.getElementById("batch_connect_session_context_conda_install");
  if($('#batch_connect_session_context_conda_install').is(":visible") && conda_install.value === "") {
    alert("Custom conda install field cannot be blank!");
    e.preventDefault();
  }
  if($('#batch_connect_session_context_conda_env').is(":visible") && conda_env.value === "") {
    alert("Custom conda env field cannot be blank!");
    e.preventDefault();
  }

});