Components: hide blocks with empty properties

I have a component “speaker” with bunch of stuff inside:

  • Photo
  • Name
  • Job
  • Company
  • Biography

But not all speakers have company, some of them are labled as “expert at something”. When I don’t insert anything in “company”, I want this block to dissapear from DOM or hide at least because it messes with my flex layout.

Heavy usecase - biography. It’s a block with display: none by default that appers as a popup when you click on a speaker (I added some JS there). And there’s a lot of stuff inside of biography block - there’s header with speaker’s photo, name, company (dublicated) then divider and bio bellow as a long text. So, if I didn’t put anything in “biography” property, then I want that whole biography block to dissapear.

I think the only way to achieve this is to add more variants of conditions for elements inside component. There should be conditions based on properties. If property biography !== '', then show this block - some like that.

It’s already there in the dynamic conditions, but might be buggy for some cases

Got it. It suppose to be in “Dynamic data” option. I thought I’m gonna find option “Properties” there. When I pick “Dynamic data”, there’s “plus” icon there with tooltip “Connect property (Text)”. But biography is not text, it’s rich text, so it’s not even there. I hope devs will cover all property types. I can see this feature doesn’t work yet, thanks for pointing that out.