Conditionalizing Structure Fields

Published on October 25, 2012 by in Back End

0

Imagine a situation. You have a structure with a bunch of fields. But only certain fields are relevant at certain times, based on the answers to other fields. What’s an admin to do? Well, thanks to custom fields, a lot, actually. Using a custom field, we can include a little JavaScript that will allow you to make certain fields conditional.

Featured Field Configuration

Featured Field Configuration

Let’s start with a structure. In this case, the News article structure, since most people will be familiar with it. Let’s say you want to add some additional functionality like making something be ‘sticky’ in WordPress. And let’s say that you want that to be for just a specific range of time. So obviously these date fields would only be important if you’ve set the news item to be featured, otherwise they’re just taking up space. Step one, let’s add the field that will control this featured state. I’ll use a radio button, and a basic boolean value.

Next, add a couple date fields, nothing special here. We’ll call them “Featured Start” and “Featured End.” The only important part is that at this point, these can’t be required (though with some extra JavaScript, you could manage that too – client side). In the end, you’ll have something similar to what’s below.

All three fields

All three fields

Now, let’s talk magic sauce. Add a custom field to the structure, and just drop it at the bottom (that’s probably where it is anyway after adding it). It’s not going to show anything, so it’s placement isn’t really important. We’ll call this field “Conditional Fields.” I’m going to do this with jQuery, because that’s what I happen to be better at. Hint: you can easily add jQuery to a custom field using my Resource Loader plugin. In the value for the custom field, drop the following code in.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
  // Prevent namespace collisions with Dojo, etc
  var j = jQuery.noConflict();
  // Function to show/hide fields
  function toggleFields(val) {
    if(val == '0') {
      j("${esc.h}featuredStart_tag,${esc.h}featuredEnd_tag").parent().hide();
    } else {
      j("${esc.h}featuredStart_tag,${esc.h}featuredEnd_tag").parent().show();
    }
  }

  j(document).ready(function() {
    // Hide our custom field's label
    j('${esc.h}conditionalFields_tag').parent().hide();
    // Check the field state on load and show/hide our conditional fields as appropriate
    var startingVal = j("input:radio[name=bool1]").val();
    toggleFields(startingVal);

    // Add click handler to show/hide fields on controlling radio button
    j("input:radio[name=bool1]").click(function() {
      toggleFields(j(this).val());
    });
  });
</script>

It’s that simple. You can easily adapt this to other field types besides radio buttons, or toggle multiple sets of fields on a structure. If you want to make the fields required based on the on/off state, you can’t use the built in required setting on the field. Instead, you’ll have to add a click handler to the submit button and run your own validation for that. Otherwise, everything else like regex validation, default value, etc should work as normal. This is a great way to simplify your content forms and provide progressive discovery on fields so users don’t feel overwhelmed the first time they see a structure.

No comments yet.

Leave a Reply