#Conditionally render the Input or DatePicker in a list

1 messages · Page 1 of 1 (latest)

muted spade
#

Hi! I’m using a List component in Appsmith. Inside each list item, I have a Container that holds an Input and a Select. The Select has multiple options like “Email,” “Retailer,” and “Joined At.”

What I want to achieve is:
When the user selects "Joined At", I want to show a DatePicker instead of the Input inside the same list item.

How can I conditionally render the Input or DatePicker based on the selected option inside each list item?

silk wedgeBOT
#

{?{ }?} ** mustache syntax to evaluate the condition and render the appropriate widget. Here's how you can achieve this:

  1. Add a Select Widget inside your Container and set its options to "Email", "Retailer", and "Joined At".

  2. Add an Input Widget and a DatePicker Widget inside the same Container.

  3. Use the visible property of both the Input and DatePicker widgets to control their visibility based on the selected value of the Select widget.

For the Input Widget, set the visible property to:

{?{ Select1.selectedOptionValue !== "Joined At" }?}

For the DatePicker Widget, set the visible property to:

{?{ Select1.selectedOptionValue === "Joined At" }?}

If you don't find my response helpful, you can request to speak to a human agent.

muted spade
#

yes this is working but the placement is distorted I want the datepicker to be placed in the textInput when the textInput is not visible and vice versa

silk wedgeBOT
#

{?{ Select1.selectedOptionValue !== "Joined At" }?} **

  • DatePicker Widget:
  • Set visible to: ** {?{ Select1.selectedOptionValue === "Joined At" }?}

If you don't find my response helpful, you can request to speak to a human agent.

muted spade
#

yeah im requesting to talk to a human agent

silk wedgeBOT
#

Someone from our team will reach out to you on this thread. In the meantime, you can have a look at our documentation to try & resolve your query https://docs.appsmith.com?utm=bot

Introduction | Appsmith

Organizations build internal applications such as dashboards, database GUIs, admin panels, approval apps, customer support tools, etc. to help improve their business operations. Appsmith is an open-source developer tool that enables the rapid development of these applications. You can drag and drop pre-built widgets to build UI. Connect securely...

muted spade
#

here's the context

I moved into using pagination but because of this the default filter only filters the fetched data that's why I'm creating my own filter that directly modifies the query. Everything is working now I just need this UI to be fix

image.png
silk wedgeBOT
#

Have you set the height property of the widgets (Container, DatePicker, Input widget) to Auto-height so that it won't take up any space when hidden?

muted spade
#

Components inside the List component don't have a height property. Even the container within the List doesn't expose a height setting, so I can't set it to auto height either.