I am looking more into the dynamic form widgets, and would like to hide a few more advanced input options (memory and GPU selection), ideally with a checkbox. Does someone know if this is possible, and if so how? I am trying something like
OK, thanks for the clarification. I ended up using the select widget, but, it would be nice to have some kind of button or check box instead since that’d look more natural.
I have done this with custom Javascript in a form.js file.
For instance in my Jupyter apps, I allow users to use their own custom anaconda envs and even installs but depending on the checkbox, my javascript makes various text fields visible:
Apologies in advance for the crap js code and lack of comments…
form.yml:
conda_module:
widget: "select"
label: "System-wide Conda Module:"
help: "Select the conda module used"
options:
- ["anaconda3/2019.10", "anaconda3/2019.10"]
- ["anaconda3/2020.11", "anaconda3/2020.11"]
- ["anaconda3/2021.11", "anaconda3/2021.11"]
value: "anaconda3/2021.11"
conda_install_checkbox:
widget: "check_box"
label: "Check box if using custom Anaconda install instead of one of the Anaconda modules"
value: "0"
conda_env_checkbox:
widget: "check_box"
label: "Check box if using custom Anaconda Environment"
value: "0"
conda_install:
widget: "text_field"
label: "Path to Custom Anaconda Install"
help: "Enter the **full** path to your local anaconda installs `bin` dir. (i.e. `/home/[username]/miniconda3/bin`)
**IMPORTANT: If using a Custom Anaconda Install, you must have jupyterlab installed in your base anaconda install, this can be done with `conda install jupyterlab`.**"
conda_env:
widget: "text_field"
label: "Name of Custom Conda Environment"
help: "Enter the name of a custom Conda Evironment. If you are just using the base environment from a local anaconda install, you can leave blank.
**IMPORTANT: If using a Custom Anaconda Install, you must have jupyterlab installed in your base anaconda install, this can be done with `conda install jupyterlab`**"
form.js:
'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();
}
}
function toggle_modulepath_textbox() {
let modulepath_textbox = $('#batch_connect_session_context_modulepath_textbox');
let modulepath_checkbox = document.getElementById("batch_connect_session_context_modulepath_checkbox");
if(modulepath_checkbox.checked === true) {
modulepath_textbox.parent().show();
} else {
modulepath_textbox.parent().hide();
}
}
toggle_conda_install()
toggle_conda_env()
toggle_modulepath_textbox()
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);
let modulepath_trigger = $('#batch_connect_session_context_modulepath_checkbox');
modulepath_trigger.change(toggle_modulepath_textbox);
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();
}
});
Thanks Morgan and Gerald. I am tempted to try Morgan’s approach but then somewhat reluctant to clutter our form.js even more so having this working right of OOD with a few lines in form.yml is cleaner.