Conditional rendering fields in universal editor

[CarlosPe9]

Hi everyone,

We are working in a project with a React App and editing the content via Universal Editor. The content is being handled with content fragments.

We have a content fragment that has 3 fields: depending on what you select in the first field we want to display the second field or the third field.

Since each field in the universal editor looks like an iframe itself we cant figured out how to manage this case.

Is there any way to achieve this?

Thanks!

Carlos.

[daniel-strmecki]

Hi @CarlosPe9,

based on my experience so far with the Universal Editor, this is not possible. In my project, we used the approach of showing/hiding fields all the time in the old CF editor, but when we switched to the new CF editor we abandoned it and looked for alternative ways to solve it.

Good luck,

Daniel

[sarav_prakash]

Hi @CarlosPe9 , your question sounds, you want to author components/fields that are conditionally rendered. 

I too have similar react app. On Load of page, default route is rendered. The iFrame canvases entire app, preventing authors to click on links/buttons to switch components. 

But we use Preview button. Clicking Preview, removes the canvas and allows use to navigate/switch views. Once right component is loaded, we disable Preview mode and continue authoring. 

Did you try this Preview button and does it help you? 

[CarlosPe9]

Hi Sarav!

Wat we want is to be able to render conditial fields depending o a selector.  For example, if we select in the Backgrond type "Color" we dont want to display the image "image" field

We read something about custom fields but it seems that it only works for the CF old version.

Thanks!

Carlos

[sarav_prakash]

understood. this is on extension, not ootb ue. I haven't done such customization on extension. I ll try on my extensions, for similar usecase and reply if it works.

[arunpatidar]

Hi @CarlosPe9 

You can check this if you want to show/hide field conditionally in the editor.

https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/dev... 

[CarlosPe9]

Hi Arun!

Thanks for your reply, unfortunately the links seems to work only if you work with pure components right?

We use content fragments to populate our content so in order to create our components-definition.json we have to point to the content fragments model instead of defining our component.

[arunpatidar]

Hi @CarlosPe9 

Yeah it may possible that CF does not support this OOTB.

Not sure if AEM Extensions helps here - https://developer.adobe.com/uix/docs/#explore-extensible-services 

[kautuk_sahni]

@CarlosPe9 Did you find the suggestion helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

[CarlosPe9]

Hi Kautuk!

Thanks for the interest! but unfortunately it doesn't seem to work

bests,

Carlos