How to work with depending fields

   —   

Today we will learn how to work with depending fields in forms of any kind (on-line forms, page types, web parts, etc.)

You probably know Kentico allows you to hide or disable fields of the same form depending on specified conditions. All of this is described in our documentation (in the Field advanced settings section):

Field editor

However, sometimes it is good to demonstrate it in action with examples. So, let’s start with some basic scenarios:

  • You have an on-line form with 2 radio buttons answering some question with options like Yes/No. When a user selects No, you want to show some text area to give them an opportunity to explain why No, however you don’t want to render that text area initially, since it would make the form too long. In this case you configure the radio buttons field to have the “Has depending fields” checkbox checked and the text area field with the “Depends on another field” checkbox checked as well. Now, all you need to do is write the proper Visibility condition for the text area to show only when the No option is selected:
    radioButtonsField.Value=="No"

     
  • Another example is similar to the form in the checkout process when you’re filling the shipping address and there is a checkbox indicating that the billing address is different than the shipping address. We could follow the same steps, that were described in the first scenario for each field of the billing address; however, instead we will take advantage of categories and we wrap those billing fields into a new category and then apply the Visible condition to the category instead:
    {% checkBoxField.Value==True %}

     
  • Until now a field was depending on another field of a form, so we’re going to learn that a condition doesn’t have to be always like that. We can simply disable a text box for public visitors, so that only authenticated users can fill it. The Enabled condition would look like this:
    CurrentUser.IsAuthenticated

     
  • What about the scenario when you want to show some property of your page type only when the page is located under specific location? There is no context of CurrentDocument on the Form tab of your page while you’re creating or editing it, so you can’t use the built-in macro code editor for the Visibility condition for this specific scenario, but you can replace the CurrentDocument with the EditedObject and it would work as expected:
    EditedObject.Parent.NodeAliasPath.StartsWith("/Specific/location")

There are also advanced scenarios that could be useful as an example for your inspiration:

  • You can control the visibility of some field dynamically according to more than one condition as well. Let’s say some field of your on-line form needs to be available only on a certain page and only if it is allowed via a query string. Clearly, the query string value is not a security barrier and your visitor can workaround it, but the following Visibility condition is more just for inspiration (the field appears only on the /some/path?show=yes page):
    CurrentDocument.NodeAliasPath=="/some/path" && QueryString.GetValue("show", "no") == "yes"

     
  • In all previous examples we hid or disabled inputs to prevent users from entering a value to them. Depending fields and their visibility/enabled condition can be useful for labels with no actual input as well. Now, I will tell you how to setup the Custom registration form to show if the user name you enter is taken by another user without submitting the form. We extend the alternative form (cms.user.RegistrationForm) by an extra field (UserNameValidation -> Text -> Label) and we fill the Caption with “User name is already taken”. We configure the UserName field to “Has depending fields” and the UserNameValidation field to “Depends on another field”. The Visibility condition would look like this one below:
    foreach (user in GlobalObjects.Users) { if (user.UserName == UserName.Value) {return true;} } return false;

(note: if you want to get rid of the colon that follows the Caption by default you can edit the web part with the code -> formUser.UseColonBehindLabel = false;)

Share this article on   LinkedIn