Hide CMS Data if the Field is empty

Hey !

Pretty easy. You could have something like this :

CMS field.value ? true : false

CMS field.value is bind to the field.

If there is something in a field value so display it otherwise don't display it. It is bound to the Show" field.

Here is the doc: https://docs.webstudio.is/university/foundations/expression-editor

Hope it help!

Thanks! thats what i need. I am trying to solve my issue now, but wasn't successful.

My current problem is, i have a Date field in Notion which is delivering an start and an end date. In between them there is a text field with a "-". If the Date end field is emty, i want the text field to be hidden.

I tried following code for this in the Expression Editor:
" - " $ws$dataSource$T5B4YObtwgSDASHWEX86G7ZK.properties.Veranstaltungsdatum.date.end ? true : false

If you have "-" in the field so the field is not empty?

yes.
I want to have the "-" displayed when the field "veranstaltungsdatum.date.end" has a value, and hidden when it's not.

ah all right it's not the same thing

😄 i thouht that. Do you know how to do that?

if "veranstaltungsdatum.date.end" = 12/03/2024 you want to add "-" and hide the field if there is no value?

thats correct.

You can do that

thanks a lot 🙂 working exactly how it should be !

does this work for conditional logic in forms too?

Can you be more specific for forms? What do you need to do?

I want to show a box with checkboxes, depending on the selected answer in the select field above. Like in the Screenshot. If Option 1 is selected, the fields are showing. if option 2 is selected, hidden.

interesting. Never tried. I gonna check how it's possible. Agree, it would be nice to do that. I know that's possible on form builder, but I don't know how it can be achieve in Webstudio!

If its switching without submission, then only using some js to hide/show the div

All right I was not sure. I tried without an HTML embed but it was not possible

Thanks Oleg!

@paso_sb So you have to add an HTML embed with some JS. You just have to get their value (check or not) and Show the div or not.

getting back to this. @Milan Boisgard | Uncode School @Oleg Isonen this one works for the expression editor for text fields.
Is there a way to apply this to boxes? Like i want a whole section to be displayed if a field is empty?

If the field data is coming from your cms, you just add an expression to the Show toggle in the Box settings. Use an expression like cmsData.foo.bar ? true : false and surround with backticks (`)

still not getting my head around this properly.
I used this for the expression editor "$ws$dataSource$MyL8FnoQg_Hb5S_N2ud20.data.results[0].properties["Veranstaltungsdauer inkl. Pausen (min)"] ? true : false "

The editor is showing no errors, but it's not working

Can you try a test expression like 0 === 0 ? true : false, surrounded by backticks? and than switch to 0 === 1 instead? Should result in show/don't show.

Something must be wrong with your condition. If $ws$dataSource$MyL8FnoQg_Hb5S_N2ud20.data.results[0].properties["Veranstaltungsdauer inkl. Pausen (min)"] has any result, your expression should result in true and the component should show.

got it 2 minutes ago.
just needed to make the API Path correct.

but thanks a lot for ur help.
So, your first suggestion works 🙂 ❤️

alright! glad it works!