-
Goal: I am using a repeatable container to display a list of objects. One of the fields of the each object is "status". So I'd like to use the Status component to display the status with a color and icon. The status field might have values like "paid" or "void". I'd like "paid" to be green with a checkmark or something.
-
Steps: I am displaying many other fields in this view using Text components, and then using {{ item.xxxField }} inside to show the value. For example, before trying to use the Status component I was showing the value in the Text field using
status: {{item.status}}. I cannot figure out how to get {{ item.status }} to display in a Status component, however. It just display nothing. -
Details: I can't get the Status component to display the status field of the items. Am I supposed to be using it in "Mapped" or "Manual" mode? When I click the "docs" link in the component editor it takes me to "Define option lists" page.
-
Screenshots:
-
App json export:
app-with-status.json (218.5 KB)
HI there @Charlie_Evett,
So the status component works a bit as the select component, first you need to define the options your status can have, and then you can provide the value.
So in your case, you can use Manual Mode and add two options
- paid within value (with Paid Label)
- void within value (with Void Label)
define the colors and settings for each option, and then add {{ item.status }} in the default value.
Remember to click on the FX button so you can define the default value dynamically.
Hope this helps!
Perfect. Thank you!
1 Like