New Form Builder combined with components is not working

There seems to be a bug or issue with the new form builder. In my case, to keep design consistent in my projects I have created various input components.

When I try to use these, the variable is not appearing. If I try to use regular input fields that are not components, then it works.

This is causing a little headache with me, as it seems that I need to build forms without components, and that means it’s a lot more challenging to keep design and logic consistent in the application.

Anyone else experiencing this issue and have figure out a way to resolve it? I contacted support, but they said it’s a limitation that they can’t resolve currently.

2 Likes

Hi @erikm3103

It’s not a bug. Fields is just for native inputs. We don’t support components, date pickers and other elements there yet.

Since nobody came with a good solution, I would advice you to take a look at the ‘Starter kit’ project template > form builder. They have something that you could start from to build what you need.

I faced the same issue and ended up creating my own form builder with custom datamodel and components.

This works now.

1 Like

Hmm, still having issues. Field components don’t seem to get picked up by Form Containers. Anyone able to replicate this? Curious as to how everyone is doing CRUD without this.

Hi,

Give each field (for example a input field) a specific name such as inputField1. It then shows up in the Form Container, at least for me.

Okay, I think naming might be the issue. The thing is, Name isn’t bindable. Is there a workaround? Otherwise Input Components will be broken.

I find that when I put a input component inside a form, I get this field which is bindable. “Field name”

If I remember correctly, take a input component you created and move it inside a form, then click “Edit” on the input component and you should be able to see this field. Give it a name and it will show up in the "local inputs” of the form :slight_smile:

Hmm, that only shows for inputs for me, not for input components. Are you sure this is a component?

~~Okay, I think I see the issue. My inputs are 2 layers deep into the component, which means that Form Container panel doesn’t show :confused:~~


Actually, I think it is just because the Starter Kit Components use outdated inputs that don’t support this. If I replace the inputs, the panel seems to show.

Having done some further experimenting, I think I have the steps for getting your custom inputs working with form container:

  1. Start with the ‘Starter Kit’ inputs as your base. This gives you the component proporties, variables and workflows you will need.
  2. Import one of the starter kit fields so that you can look inside the component. You’re going to need to replace all the inputs inside of it with new base inputs because they will be missing the ‘Form Container’ panel which makes the input compatible.
  3. When you create a new input all the proporties and variables will carry over, so the only thing you’ll need to copy is the workflow called ‘Update exposed var and emit event’ (title will vary slightly based on the specific input).
  4. Now the part that ensures it is compatible with the form container:
    1. go to the form container section on the third tab of the input.
    2. bind field name to something that will be unique for each input (I chose ‘label’)
    3. set custom validation to ‘yes’
    4. bind validation to ‘value.valid’.

Hopefully this helps someone in future. Inputs are not as simple as you might hope.

1 Like