Conditionally show modalOptions object input on table content if hasModal boolean input is set true

Technical Questions
1

Hey everyone!

I am currently stuck in a situation where I simply want to set a subfield object named ‘modalOptions’ “inside” the input field hasModal boolean when its value is set to true.

So basically, i would set both fields on table data, and in Data Model it would appear only boolean field option ‘hasModal’.

If its toggle is set to true, then modalOptions object fields would appear. Otherwise, they would remain hidden for a better data model operator UX.

I would love some insights on this issue.

2

To achieve conditional visibility of fields within your data model in Builder.io, you can use field dependencies. Specifically, you can configure the modalOptions fields to appear only when the hasModal boolean is set to true. This enhances the user experience by only showing relevant fields when needed.

Step-by-Step Guide

Here’s a step-by-step guide to set this up in Builder.io:

  1. Go to Your Data Model:

    • Navigate to the Models section in your Builder.io dashboard.
    • Select the data model you want to edit, or create a new one if necessary.

  2. Add the hasModal Field:

    • Add a boolean field named hasModal.

  3. Add the modalOptions Fields:

    • Add the fields you want within the modalOptions object. Each of these fields will be configured to only show if hasModal is true.

  4. Set Field Dependencies:

    • Use the showIf property to conditionally display the modalOptions fields based on the value of hasModal.

Example Configuration

Here’s an example configuration that you can use to set up your data model:

Step 1: Add the hasModal Field:

{
  name: 'hasModal',
  type: 'boolean',
  defaultValue: false,
  helperText: 'Toggle this to set modal options',
}

Step 2: Add modalOptions Fields with Dependencies:

Each field within the modalOptions object should have a showIf property configured to check the value of hasModal.

{
  name: 'modalOptionsTitle',
  type: 'string',
  helperText: 'Title of the modal',
  showIf: {
    'hasModal': true
  }
},
{
  name: 'modalOptionsDescription',
  type: 'string',
  helperText: 'Description of the modal',
  showIf: {
    'hasModal': true
  }
}

Full Example Registration

You can register your component with these fields using Builder.registerComponent and ensuring the conditional visibility logic is applied:

import { Builder } from '@builder.io/react';

const MyComponent = (props) => {
  // Your component logic here
  return (
    <div>
      <h1>My Component</h1>
      {props.hasModal && (
        <div>
          <h2>{props.modalOptionsTitle}</h2>
          <p>{props.modalOptionsDescription}</p>
        </div>
      )}
    </div>
  );
};

Builder.registerComponent(MyComponent, {
  name: 'MyComponent',
  inputs: [
    {
      name: 'hasModal',
      type: 'boolean',
      defaultValue: false,
      helperText: 'Toggle this to set modal options',
    },
    {
      name: 'modalOptionsTitle',
      type: 'string',
      helperText: 'Title of the modal',
      showIf: {
        'hasModal': true,
      },
    },
    {
      name: 'modalOptionsDescription',
      type: 'string',
      helperText: 'Description of the modal',
      showIf: {
        'hasModal': true,
      },
    },
  ],
});

Verify in the Visual Editor

  1. Open the Content Editor:

    • Navigate to the content entry for your data model in Builder.io.

  2. Toggle the hasModal Field:

    • Toggle the hasModal field to true and verify that the modalOptions fields (modalOptionsTitle and modalOptionsDescription) appear.
    • Toggle the hasModal field to false and verify that the modalOptions fields disappear.

Summary

By configuring conditional field visibility using the showIf property, you can ensure that modalOptions fields are only displayed when hasModal is set to true. This provides a cleaner and more intuitive user experience for those interacting with the data model in Builder.io.

1 Like
3

Thank you so much for your time.

This is well documented in builder.io, although I guess I couldnt express my issue… which is:

I would like to know if there is a way to set directly on Builder interface at Page model fields a condition where “if it hasModal, then show modlaOptions for the builder content operator. Otherwise, modalOptions are not shown.”.

I believe if there is a way, it would be a little less confusing for marketing squad to operate it.

But anyways, thanks a lot! Have a great day everyone.