Display module fields in Sitefinity using conditions in the back end - sitefinity

Question

I'm looking for a way to show module fields conditionally on the back end screen of Sitefinty.
For example, say I've created a module through module builder - and I have two fields: a checkbox and a text field.
I'd like the text field only to display to content editors only after they've checked the checkbox field. Ideally that checkbox could hide/show a handful of fields on the spot through the content entering process.
Is there a straightforward, maintainable way to go about this?
Currently using version 10.2, it'd be great to know how to accomplish
this via both the new and old UI.
Hoping there is an advanced setting I just don't know about, but
willing to go a JS approach as well.
Thanks!

Answer 1

After a little digging I've been able to find a working solution. Here's how I handled it:
Note: [module] and [section] assume your custom module name and section. If you didn't setup sections in backend screens and tweaks then all of the fields will be under MainSection
Step 1 - Add a custom script to the module in advanced settings.
Assuming this is a dynamic module...
Create a JS file in your project and reference it in advanced settings by going to:
Advanced settings > Dynamic Modules > Controls > [module] > Views > [Module]View > Scripts
Click Create New and point the script location to the JS file you created.
Step 2 - Add custom classes to your fields
Stay where you're at in advanced settings and navigate to the fields you've made. For example:
Advanced settings > Dynamic Modules > Controls > [module] > Sections > [Section] > Fields > [Field]
On this page scroll down to CSS Class and add a custom CSS class to this field
Step 3 - Add your custom Javascript
Sitefinity uses jQuery so I worked with that and set up some really basic JS based off the class names:
$(document).ready(function(){
$('.myTextBox').hide();
$('.myCheckbox input').on('change', function(){
var $this = $(this),
textBox = $('.myTextBox');
$this.is(':checked') ? textBox.show() : textBox.hide();
})
});
Note: the custom CSS class gets applied to the parent wrapper of the actual element
Now when a content editor goes to add a new content item to a module, checking that specific checkbox will show and hide the custom text box.
Besides the fact that this process seems a little over the top, there are a few other issues:
You have to set the call to your custom script on the edit and insert
view.
It doesn't take into account any validation.
With Sitefinity getting a backend UI upgrade, long term sustainability is questionable.
I'll leave this question unanswered for a while if there is a better/easier approach to this.