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!

Stu Furlong Stu Furlong · Accepted Answer · 2018-03-08T06:21:14

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.

Display module fields in Sitefinity using conditions in the back end

1 Answers