Dynamic Form Widgets¶
This feature was added in version 2.0.
Form fields use underscores (
_) as a word separator and these directives use hyphens (
So when referencing the element
node_type you will need to reference it as
To enable any of the dynamic batch connect capabilities described in this page, set the dynamic batch connect setting.
If we don’t support what you need for your application to be dynamic, then you can add your
allowed. jQuery is available to interact with elements.
Hiding select options¶
data-option-for directive allows you to hide select choices of an element based on
the current value of a different select element.
Let’s use this example: We have two clusters,
has GPUs but
ruby does not.
So, we’d like to give the choice of
node_type to show
gpu when the user has
oakley cluster selected, but not when
ruby is selected.
Everything is shown by default so we need to configure the app such that
gpu option is hidden when the
ruby cluster is chosen.
Open OnDemand provides
data-option-for directive for this use case.
With this one configuration we’re telling the OnDemand system that
gpu is not an option
ruby cluster. It will then hide it every time the cluster
ruby is chosen.
attributes: node_type: widget: select options: - 'standard' - [ 'gpu', 'gpu', data-option-for-cluster-ruby: false ]
This example shows toggling options based on the cluster, but this feature generically support any field and value.
Hiding entire elements¶
data-hide directive allows you to hide another element based on
the current value of a select element.
Let’s continue examples involving GPUs. We’d like to provide users with options for CUDA versions.
But using Nvidia’s CUDA libraries only makes sense when the user is requesting GPUs.
So, we want to hide the
cuda_version element when a users chooses standard
Here’s the example YAML for this app with two select widgets. This
instructs the webpage to hide the
cuda_version when the
node_type is selected.
attributes: node_type: widget: select options: - [ 'standard', 'standard', data-hide-cuda-version: true ] - 'gpu'
Dynamic Min and Maxes¶
data-max directives allow you to set the minimum and
maximum values of another element based on the current value of a select element.
Sites have node types of all shapes and sizes. Some sites even have heterogenous clusters where there are different node types in the cluster.
This feature allows for setting the minimum and maximum values for input fields like the number of cores to request.
Let’s see an example. We have standard` nodes in both clusters, but they’re
different sizes. In the
oakley cluster nodes have a total 28 cores and in the
ruby cluster they have 40.
In this example
data-max-num-cores-for-cluster-oakley is attached to the standard
node type. This config is saying, when the
oakley set maximum
num_cores to 28.
attributes: node_type: widget: select options: - [ 'standard', 'standard', data-max-num-cores-for-cluster-oakley: 28, data-max-num-cores-for-cluster-ruby: 40, ] - [ 'gpu', 'gpu', data-max-num-cores: 1, data-min-num-cores: 1, ]
This example also illustrates a simpler variant of this directive attached to
This configuration doesn’t have a for clause, so it will set the minimum and maximum
gpu is selected, regardless of which cluster is selected.
Setting values based on other elements¶
data-set directive allows you to set a value on a different element based
on the current value of a select element.
Let’s use charge-back accounts as an example. Let’s imagine we want to set the charge-back account automatically based on the selection of node type.
In this example, when
node_type is chosen, the
will be automatically set to
form: - charge_account - node_type attributes: node_type: widget: select options: - [ 'standard', 'standard', data-set-charge-account: 'standard-charge-code' ] - [ 'gpu', 'gpu', data-set-charge-account: 'gpu-charge-code', ]