Hide empty data fields


#1

Is there a way to hide a data field that does not have any information in it?
I want some restaurants to be FAVORITES, but the ones without that comment have a large gap between text fields.
Example database:


The data links in my component:
dataLinks
Here is the list display showing the large gap in entry #2.

Thanks for any input!


#2

Hi, I haven’t tested this but I’m pretty sure if you put text labels into Scroll flow then empty text labels will be “ignored” and Scroll flow content will fill the gap automatically.


#3

No, I tried that solution. The gap is still there. I’m trying to think of a way I can make the database hide the element.


#4

It works at least on my project when removed the address from restaurant item. Please double check that elements are in Scroll flow and data is really empty (no spaces etc).

20

P.S. you can always hide/show components with its Visible (true/false) prop. You can even attach a value transformer script to create some logic about when to hide/show component. Note that it works only for components, not individual element such as text label.


#5

Thank you so much for following up. I’ll give that another try. React Studio is INCREDIBLE! I have not begun working with Native Studio, but am excited to give it a try.
Thanks again, Perry


#6

Tried everything and cannot get this to work.
The database:
theDatabase

The component with blocks highlighted:

The component with blocks not highlighted:

The list (block two is blank but still has the space):

Element settings:

Data settings:
dataSettings

Can you see anything that I am doing wrong. I also made video but I can’t upload it to this forum.
Thanks, Perry


#7

There are screenshots only from Design canvas which is not 100% 1:1 with the exported code and how it looks in browser. Design canvas needs to show even empty text label so you can click it. Is it really so that empty blocks are visible when you test your app in browser?


#8

Thank you for clarifying that. It seems so obvious now.


#9

Great that this is now solved. There is pretty often misunderstanding between the design canvas how the app renders in the browser. The design canvas is usually the “best guess” about how the design will look in browser (the design canvas is not browser based so we create draw it programatically).

Actually I personally think that our design canvas might be too accurate. The main idea behind the studio is that users could build their own app factory by building their own plugin library. Studio would then be just an assembly line for building the App’s main skeleton. The code could then be taken from assembly line (Studio) into development pipeline and finally into production.


#10

Would love a tutorial on how to add react code components into the plug-in library. I am paying a developer to come help me with this over the weekend. I’ll post what I learn (if anything) for others.