Dynamic Behavior - Issue

Hello team,

I’ve been trying to hide a form field element based on the value of a select dropdown form field

Reference → Apps Development - Dynamic Behavior

The issue is, if I add multiple data-hide(Want to hide two form fields - version,interface) for the select dropdown(settings) with standard option, it doesn’t seem to work. Please refer the below code block.

form.yml.erb

<%-
require 'open3'
begin
    # Command to Run
    script = 'sinfo -h --format="%P"'
    # Create a partitions array to dynamically populate the queues associated with the user
    partitions = []
    # Store the output, error, status
    output, status = Open3.capture2('bash', stdin_data: script)
    # puts status
    if status.success?
        # Add it to the custom_envs array by splitting the output at '\n'. 
        output.split("\n").each do |queue|
            if queue != 'backfill'
                queue = queue.gsub("*", "")
                partitions.push(queue)
            end
        end
        puts partitions
    else
        partition_error = "Error"
    end
rescue => e
    partition_error = e.message.strip
end
-%>

---
cluster: "discovery"
form:
  - custom_queue
  - bc_num_hours
  - bc_num_slots
  - num_cpus
  - num_mem
  - num_gpus
  - email
  - working_dir
  - settings
  - version
  - interface

submit: submit.yml.erb
id: submitForm
name : submitForm
title: Jupyter Lab/NoteBook
attributes:
  custom_queue:
    id: custom_queue
    label: Partition
    widget: select
    cacheable: false
    help: |
      - [Partition Documentation](https://hpc.nmsu.edu/discovery/home/partitions/)
    <%- if partition_error || partitions.blank?-%>   
      <div class="text-danger">Error while fetching Partition. Please contact support!</div>
    <%- else -%>
    options:
    <%- partitions.each do |q| -%>
      - [ "<%= q %>", "<%= q %>" ]
    <%- end -%>
    <%- end -%>
  bc_num_hours:
    id: bc_num_hours
    label: Walltime (Hours)
    help: |
      - Number of hours to allocate
      - Exceeding walltime time will automaticaly stop this job.
    cacheable: false
    widget: number_field
    max: 24
    min: 1
    step: 1
    value: 1
  bc_num_slots: 1
  num_cpus:
    id: num_cpus
    label: CPUs (Threads)
    help: Number of CPU threads
    cacheable: false
    widget: number_field
    max: 16
    min: 2
    step: 2
    value: 2
  num_mem:
    id: num_mem
    label: Memory (GB/Gigabytes)
    help: Total memory is available to all assigned threads!
    cacheable: false
    widget: number_field
    max: 64
    min: 1
    step: 1
    value: 2
  num_gpus:
    id: num_gpus
    label: "GPUs"
    help: "Number of GPU or Cuda devices"
    cacheable: false
    widget: number_field
    max: 2
    min: 0
    step: 1
    value: 0
  email:
    id: email
    label: Email Address
    help: |
      Enter your email address if you would like to receive job notifications (start, finished, failed, etc..).  Otherwise, leave the field empty.

      --------------------------
    cacheable: true
    widget: text_field
  working_dir:
    id: working_dir
    label: Jupyter Working Directory
    help: |
      - Select your jupyter project directory
      - The default is your home directory ($HOME) when left empty."
    cacheable: false
    data-filepicker: true
    data-target-file-type: dirs  # Valid values are: files, dirs, or both
    readonly: true
  settings:
    id: settings
    label: Advanced Submission Settings
    help : | 
      Select Anaconda Version, Jupyter Server Type, Setup Commands
    cacheable: false
    widget: select
    options:
      - [
          'standard', 'standard',
          data-hide-version: true,
          data-hide-interface: true
        ]
      - ['advanced', 'advanced']
  version:
    id: version
    label: Anaconda Version
    help: |
      - Anaconda3 is based on Python 3.x
      - Anaconda2 is based on Python 2.x
      - Miniforge is based on Python 3.x, conda-forge & Mamba
    cacheable: false
    widget: select
    options:
      - [ "Anaconda3", "anaconda"]
      - [ "Anaconda2", "anaconda2"]
      - [ "Miniforge", "miniforge"]
  interface:
    id: interface
    label: "User Interface"
    help: |
      - Select which user interface you want
      - New = Jupyter Lab
      - Old = Jupyter NoteBook
    cacheable: false
    widget: select
    options:
      - [ "Jupyter Lab", "lab"]
      - [ "Jupyter Notebook", "notebook"]

Also, I tried data-hide with the checkbox element. It doesn’t seem to work. Does this behavior only supports select element?

I highly appreciate any help on this. Please let me know if you need any additional information. Thanks in advance!!

You cannot use this feature while setting the id property. Remove all your ids and it should start to work.

Hey Jeff,

Thanks for fast response. I removed all the id’s and below is my updated code.

form.yml.erb

<%-
require 'open3'
begin
    # Command to Run
    script = 'sinfo -h --format="%P"'
    # Create a partitions array to dynamically populate the queues associated with the user
    partitions = []
    # Store the output, error, status
    output, status = Open3.capture2('bash', stdin_data: script)
    # puts status
    if status.success?
        # Add it to the custom_envs array by splitting the output at '\n'. 
        output.split("\n").each do |queue|
            if queue != 'backfill'
                queue = queue.gsub("*", "")
                partitions.push(queue)
            end
        end
        puts partitions
    else
        partition_error = "Error"
    end
rescue => e
    partition_error = e.message.strip
end
-%>

---
cluster: "discovery"
form:
  - custom_queue
  - bc_num_hours
  - bc_num_slots
  - num_cpus
  - num_mem
  - num_gpus
  - email
  - working_dir
  - settings
  - version
  - interface

submit: submit.yml.erb
name : submitForm
title: Jupyter Lab/NoteBook
attributes:
  custom_queue:
    label: Partition
    widget: select
    cacheable: false
    help: |
      - [Partition Documentation](https://hpc.nmsu.edu/discovery/home/partitions/)
    <%- if partition_error || partitions.blank?-%>   
      <div class="text-danger">Error while fetching Partition. Please contact support!</div>
    <%- else -%>
    options:
    <%- partitions.each do |q| -%>
      - [ "<%= q %>", "<%= q %>" ]
    <%- end -%>
    <%- end -%>
  bc_num_hours:
    label: Walltime (Hours)
    help: |
      - Number of hours to allocate
      - Exceeding walltime time will automaticaly stop this job.
    cacheable: false
    widget: number_field
    max: 24
    min: 1
    step: 1
    value: 1
  bc_num_slots: 1
  num_cpus:
    label: CPUs (Threads)
    help: Number of CPU threads
    cacheable: false
    widget: number_field
    max: 16
    min: 2
    step: 2
    value: 2
  num_mem:
    label: Memory (GB/Gigabytes)
    help: Total memory is available to all assigned threads!
    cacheable: false
    widget: number_field
    max: 64
    min: 1
    step: 1
    value: 2
  num_gpus:
    label: "GPUs"
    help: "Number of GPU or Cuda devices"
    cacheable: false
    widget: number_field
    max: 2
    min: 0
    step: 1
    value: 0
  email:
    label: Email Address
    help: |
      Enter your email address if you would like to receive job notifications (start, finished, failed, etc..).  Otherwise, leave the field empty.

      --------------------------
    cacheable: true
    widget: text_field
  working_dir:
    label: Jupyter Working Directory
    help: |
      - Select your jupyter project directory
      - The default is your home directory ($HOME) when left empty."
    cacheable: false
    data-filepicker: true
    data-target-file-type: dirs  # Valid values are: files, dirs, or both
    readonly: true
  settings:
    label: Advanced Submission Settings
    help : | 
      Select Anaconda Version, Jupyter Server Type, Setup Commands
    cacheable: false
    widget: select
    options: 
      - ["standard", "standard", 
        data-hide-version: true,
        data-hide-interface: true,
      ]
      - ["advanced", "advanced"]
  version:
    label: Anaconda Version
    help: |
      - Anaconda3 is based on Python 3.x
      - Anaconda2 is based on Python 2.x
      - Miniforge is based on Python 3.x, conda-forge & Mamba
    cacheable: false
    widget: select
    options:
      - [ "Anaconda3", "anaconda"]
      - [ "Anaconda2", "anaconda2"]
      - [ "Miniforge", "miniforge"]
  interface:
    label: "User Interface"
    help: |
      - Select which user interface you want
      - New = Jupyter Lab
      - Old = Jupyter NoteBook
    cacheable: false
    widget: select
    options:
      - [ "Jupyter Lab", "lab"]
      - [ "Jupyter Notebook", "notebook"]

Now, the interface field gets hidden on initial page load. However, on toggling between the select dropdown(settings) selection, the behavior stops working as well. Also, the version form field never gets hidden.

Any suggestions on how we can fix this?

Thanks for your time and consideration.

One million apologies. Apparently, we never promoted 2.0.22 which has this bugfix (I’m guessing you’re on 20). I was going to promote 2.0.24 next week - but I’ll redouble my efforts on confirming it and get that pushed out today for you.

@chidcrushev 2.0.23 is now publicly available. It has the bugfix for this issue.

@jeff.ohrstrom Thank you so much. We are on 2.0.20 and I will let you know after upgrading ours to 2.0.23 to see whether we got it working.