Form structure changed with path_selector widget

[fordste5]

We recently updated our OnDemand installation to 3.1.7 and are now in the process of updating all of our interactive apps to use path_selector instead of data-filepicker.

We have applications that provide dynamic forms with logic in form.js to hide/unhide fields. The javascript is straightforward:

/**
 * Hide an option by form_id
 *
 */
function hide_option(form_id) {
  let form_element = $(form_id);
  let parent = form_element.parent();
  parent.hide();
}

/**
 * Show an option by form_id
 *
 */
function show_option(form_id) {
  let form_element = $(form_id);
  let parent = form_element.parent();
  parent.show();
}

This works fine for data-filepicker, but with the new path_selector widget it doesn't hide the "Select Path" button, only the text field and help text.

Examining the HTML, it looks like other fields are wrapped in a single div, while the path_selector widget has a div for the text field and help text inside another div that also includes the "Select Path" button.

We could add some extra logic to form.js to jump up one more parent for these particular fields, but I think it would be helpful if the path_selector widget divs were structured the same way as other fields.

[johrstrom]

Do data-hide directives work for you? If so, seems like you can replace that form.js - or at least that portion of it.

https://osc.github.io/ood-documentation/latest/how-tos/app-development/interactive/dynamic-form-widgets.html?#hiding-entire-elements

[johrstrom]

Also just to close the loop on this: here's the 3.1.x implementation of that same data-hide functionality. Looks like we try to find the first parent that has form-group class, and we hide it.

ondemand/apps/dashboard/app/javascript/dynamic_forms.js

Lines 419 to 423 in f1e1a96

	$(`#${changeId}`).parents().each(function(_i, parent) {
	if(parent.classList.contains('form-group')) {
	changeElement = $(parent);
	}
	});

Though - you should be careful here because the implementation has changed and will need updating again once you upgrade to 4.0 (the next release).

But that said - data-hide directives in the YAML will continue to work from 3.1 and beyond, even if the implementation of them change behind the scenes.

[fordste5]

I tested the data-hide functionality and it works like a charm. Thanks for the information!

[johrstrom]

OK - so I take it this ticket is good to close?

[fordste5]

Yes, good to close.