Custom Collection Viewer Problem

Mobile
1

In retool mobile app there is a custom collection viewer and then I added buttons.
Now I'm facing two issues:

  1. For the buttons is there a way to know the row once the button is clicked so I can perform a query on that row using a button.
  2. When I press decline button the particular row should be hidden.
2

Can you share some screenshots of the component and the inspect panel?

4

I added an press event handler to collection as a js query:

Screenshot 2023-08-21 at 11.28.52 AM
Screenshot 2023-08-21 at 11.28.52 AM1646×880 105 KB

5

Try adding a button in the custom collection. it does not acknowledge a selected item when a button is added and clicked. The button just works independently without returning data about the row it is embedded in.
@ScottR

6

I did and it seems that this is a bug or a yet to be developed feature based on the fact that a button has the Click event and doesn't support the Press event handler....

7

@Kabirdas
@bca

are there any workarounds for this ??

8

There is an item value in scope on the Button click trigger event. You can pass it directly to your query via additionalScope.

Screenshot 2023-08-21 at 1.11.12 PM
Screenshot 2023-08-21 at 1.11.12 PM1258×734 59.4 KB

3 Likes
9

Thank you so much @bca

How do I go about the second issue:

  1. When I press decline button the particular row should be hidden.

Is it possible

10

It's hard to say without knowing your exact setup and app logic, but there are a number of ways to go about hiding a particular row, depending on whether pressing Decline has to update data or not and also depending on how you load the data into the collection.

I would assume that pressing Decline would trigger a query that updates a field somewhere, or else the row would display again to the user when the data is refreshed.

This implies that your main data query would have to filter the orders displayed to not include "declined" orders.

In that case, it could be as simple as:

  1. Press Decline - trigger decline order query ( which updates a row and sets a status/flag for the given order).
  2. As part of the decline order success, trigger/refresh the original data query (which filters the declined orders).

There are other methods also, like combining the above with a temp state so that the whole thing is more responsive to the user, but it would add quite a few more things to have in place.

2 Likes
11

@27shutterclicks
Thanks for your input. I want the row to be removed from the screen for that user, it should not affect the db.

12

How will the app know to hide that row for that user?

You could use the Hidden field on the container to hide that order based on a flag/condition, but that info needs to be stored somewhere whenever the Decline button is pressed.

If not the db, maybe local storage then - it depends on how you want to go for the app data structure logic.

2 Likes
13