Contact

    Set a HubSpot module field's Display Conditions in local development

    Difficulty Level: Advanced. This post assumes a strong understanding of HubSpot tools and technical knowledge. Insutructions are given as guidelines and may require additional customisation.

    At the time or writing there is no documentation on HubSpot about how to set a custom module's "Display conditions" if you're using local development for HubSpot CMS Hub Themes.

    While it's likely to be published soon, here's a quick how to to tide you over in the meanwhile. 

    In the UI, a field's "Display Conditions" looks like this:

    HubSpot custom module - display conditions

    The example above only shows this field of the "Add Headline" boolean field is enabled.

    The current suggested workaround is to set this in the UI, you can pull this back into your local development tool by using the fetch command with --override (watch out using override).

    When you do this, this is what's pulled into your fields.json file: 

    [
      {
        "name" : "headline",
        "label" : "Headline",
        "required" : false,
        "locked" : false,
        "validation_regex" : "",
        "allow_new_line" : false,
        "show_emoji_picker" : false,
        "type" : "text",
        "default" : "HAVE A NICE DAY",
        "visibility" : {
          "controlling_field" : "add_headline",
          "controlling_value_regex" : true,
          "operator" : "EQUAL",
          "access" : null,
          "hidden_subfields" : null
        }
      }
    ]

    so you can use the visibility parameter to set your field's "Display Conditions", and update the text in bold below:

      "visibility" : {
        "controlling_field" : "field_name",
        "controlling_value_regex" : "field_value",
        "operator" : "EQUAL",
        "access" : null,
        "hidden_subfields" : null
      }

    These are the available operator values:

    • EQUAL (is equal to)
    • EMPTY (is empty)
    • NOT_EMPTY (is not empty)
    • NOT_EQUAL (is not equal to)
    • MATCHES_REGEX (custom regex)
    Written by: Stephanie O'Gay Garcia Orginally Published: April 18, 2020 Last Updated: April 19, 2020

    Thank you! I appreciate the feedback 😊

    Sorry to hear that! 🙁

    I'd appreciate if you could take a moment to let me know how I can improve this article.

    New call-to-action
    hand-drawn-monitor-and-mouse

    Looking for a HubSpot website developer?

    Let me help you with website themes, templates, page setup and custom modules. 

    Get in touch

    Stephanie O'Gay Garcia

    Hi! 👋 I'm a freelance HubSpot Website Developer based in Toronto (Canada). Give me a shout if you have questions about this post or there's anything I can help you with.