Display module fields in Sitefinity using conditions in the back end

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.