Model custom fields showIf

Technical Questions CMS
1

Is there a way to make custom fields in a model conditional based on another field? For example, show a field only if a boolean field was set to TRUE?

I know you can do this using the showIf parameter in a custom component. Maybe it’s possible through like the custom JavaScript custom field? If so, how would I target those fields

2

Hi @tyler.hozie,

Currently, this feature is not available, we request you kindly submit a feature request at Builder.io Ideas

3

Hi @manish-sharma ,

Continuing on above , i have the scenario where i am using the SHOWIF method on a text field that’s visibility is controlled by a boolean field . So the text field shows up if the boolean toggle is ON .

Now i made the toggle ON => filled out the text => i get the same correct data in my nextjs app . But when i toggle this OFF , the same text data is still present in my responce . Shouldn’t that be just gone with the field as we don’t see the field with toggle , we also should not be getting the field info anymore ?

4

@manish-sharma , any update on this ?

5

Hello @SrittamMishra ,

Can you share the code example?

6

Hey @manish-sharma ,

Here is the code :

{
      name: "activateFreeShipping",
      type: "boolean",
      defaultValue: false,
    },
    {
      name: "freeShippingSection",
      type: "object",
      subFields: [
        {
          name: "message",
          type: "richText",
          required: true,
        },
        {
          name: "successMessage",
          type: "richText",
          required: true,
        },
        {
          name: "threshold",
          type: "number",
          required: true,
          defaultValue:0
        },
      ],
      showIf: function(options) {
        return options.get("activateFreeShipping");
      },
    },

As you notice , the entire section freeShippingSection depends on the toggle activateFreeShipping . Once the fields message / successMessage / threshold is field , it just there all the time whether you toggle activateFreeShipping is ON/OFF . An ideal behaviour could be to make those fileds empty as soon as you toggle it off . Let me know your view on this .

7

Hello @SrittamMishra,
So you want the input field value to be cleared when activateFreeShipping is toggled off and on, is that correct?

8

Hey @manish-sharma ,

Yes . The ideal behaviour could be , all the fileds of freeShippingSection should be hidden on toggle in the responce . Currently , all the keys are returning in the responce whether the toggle is ON or OFF .

9

Hello @SrittamMishra,

I was able to reproduce a similar behavior on my end. This is actually working as intended because ShowIf props are designed to hide or show based on certain conditions and not clear the input fields. Therefore, I would recommend writing a logic in your component JSX where you can check if activateFreeShipping is false, then ignore the input values or clear them.

Additionally, you can try using the onChange prop, although I’m unsure if that will provide a viable solution.