Custom elements in form

[fenz]

I saw the different type of element we can add to a form: User Form (form.yml.erb) — Open OnDemand 3.1.0 documentation
but I was interested in adding in a form some “non-input” HTML elements like also requested in this discussion: How to create headings in OOD form.yml.erb

To achieve what I wanted I did something like:

attributes:
  my_attribute:
    label: This is some text with no input
    style: "display:none"
    value: null

Which is still only a ‘label’ and not a proper formatted text.

Would it be possible to add elements which are not really input?
I was wondering if it can be possible to add “custom” HTML code into the form as an element.
Any idea?

[jeff.ohrstrom]

I’m not sure if you can do this. It appears that the label always shows up, so that’s really the only viable place to put text, unless maybe the help section? But either way - the label is always going to show.

I don’t think you can do this out of the box without modifying some source code.

[fenz]

I understand that’s a form and only have “form” elements. Still you may want to add some formatting like grouping elements in sections by defining some “headings” in between some elements.
Ex:

<form role="form" ... >
    ...
    <h3>Cluster options</h3>
    <div class="form-group">...</div>
    ...
    <h3>GPU options</h3>
    <div class="form-group">...</div>
    <div class="form-group">...</div>
    ...
    <input type="submit" ... >
</form>

I’m not a ruby expert but I was wondering if we can have a widget type “custom_html” which just renders what you add as string (HTML code) to enable adding some custom HTML elements in between the form elements.
So the form.yml may look like:

form:
  - cluster_section_header
  - cluster_attr1
  ...
  - gpu_section_header
  - gpu_attr1
  - gpu_attr2
  ...

attributes:
  cluster_section_header:
    widget: custom_html
    value: "<h3>Cluster options</h3>"
  cluster_attr1:
    widget: select
    ...
  gpu_section_header:
    widget: custom_html
    value: "<h3>GPU options</h3>"
  gpu_attr1:
    widget: text_field
    ...
  gpu_attr2:
    widget: select
    ...

Would this be feasible to implement?

[robinkar (Robin Karlsson)]

This is possible in a quite hacky way right now, but proper support for these types of elements would be very nice to have.
We currently do this to create headings between form elements:

attributes:
  custom_element:
    class: "d-none"
    skip_label: true
    help: |
      <h1>Custom heading</h1>

Here, class: d-none hides the input field, and skip_label: true removes the label. Then you use the help text to insert your custom HTML/Markdown.

[fenz]

Many thanks! I looked for hours for the “skip_label”!
Actually, I first tried to format the content of the label but it seems the content is escaped and the page will show the plain HTML you pass as label.

Now, skipping the label creation it is possible to format the input defining the style in the element directly:

attributes:
  custom_element:
    readonly: true
    skip_label: true
    value: "Custom h3 heading"
    style: |
      background: none;
      border: none;
      box-shadow: none;
      padding: unset;
      color: black;
      margin-top: 1em;
      margin-bottom: 16px;
      font-size: 1.5em;
      font-weight: bold;
      line-height: 1.43;

So, there is more effort to define the style but it allows more customization. I think it could be an alternative.
Thanks again for your answer!