Conditionally display layout components with its children

[pharreX19]

Is it possible to apply the displayIf component to a layout component, so that the whole component with its children be displayed if the condition is met? Since I have quite a few field components within the layout container its a bit tedious to apply displayIf to every single field component.

[radekmie]

Hey @pharreX19. The DisplayIf component is just an example that shows how to approach this problem and you don't have to use it as it is presented in the docs but you could implement your own solution using the same idea. Sure, it gets tedious and requires you to write JSX for the form, but there's another way - doing it within a custom AutoField.

Using the AutoField.componentDetectorContext you could inspect the props and context and based on that decide, that this very component should not be rendered (i.e., rendered using a component that renders nothing). Then it's up to you how this logic looks like and whether it's a part of the schema, bridge, or even some external logic.

Having said that, there's also Form Builder - our WYSIWYG builder based on uniforms. It has a graphical editor of boolean expressions that determine whether a field should be rendered or no. It's a paid product, but maybe it's interesting for you too. In this case, feel free to contact us there or me directly.

[pharreX19]

Hey @radekmie, Thanks for the reply.
Im currently using the Form Builder that you have referred to and the displayIf component is doing pretty well when applied to a "LayoutNodeKind.Field". However I couldn't figure out a way to apply the condition (display the container when a certain condition is met) to a "LayoutNodeKind.Container".

Im hoping that when a condition is applied to a "Container (LayoutNodeKind.Container)", then the whole container with its children could be displayed/ hidden based on that condition.

[radekmie]

Ah, got it. Containers don't support conditional rendering yet, but we have it on our list. I'll forward your request to the team.