Editor's dependent() Method

Editor's dependent() method is a useful tool to tweak the form based on the user's input. For example, you may have a support office in Boston, so when the office is changed to "Boston", you'd want the "Position" field to automatically fill with "Support Engineer". Or perhaps, have a message to count how many characters are left in a string.

Try editing a user or create a new user, and change the office to "Boston" to see this in action. Or type into the "Name" field to see the counting!

This example was achieved by adding the following code into the document:

document.addEventListener('ct-ready', function(e) {
  var editor = e.editor;

  // Name field
  editor.dependent(
    'dp-52',
    function (val) {
      var length = val.length - 20;
      var msg = length > 0 ? 'too many' : 'remaining'

      return { errors: { 'dp-52': Math.abs(length) + ' characters ' + msg } };
    },
    { event: 'keyup change' }
  );

  // Office field
  editor.dependent('dp-54', function (val) {
    if (val === 'Boston') {
      editor.field('dp-53').set('Support Engineer');
    }

    callback(true);
  });
});