I am coding an app for a shop to start selling online. The owner asked an unusual request, at least for Thunkable features.
He wants the user when selecting an item from the list to stay in the same screen and fill other info like quantity ordered, size, color and while the user is keying these info the selected item should be highlighted in the list (Data Viewer List) for ease of reference for the user. This feature is not available out of the box.
I did a workaround and thought of sharing it with the community and I welcome your suggestions and enhancements.
The workaround does not provide full highlight but you might give me better solution.
I think this is possible if you use a Custom Data Viewer Grid/ List. You can add specific buttons to your liking, and inputs for the user to enter quantities, etc. Inputs, buttons and other components work normally inside Data Viewer Layouts. The button on click event and other events return the row id the same way as Left Swipe does. That way, when the user updates his/her item preferences, you can change that in your Data Source.
Hope this helps.
Merry Christmas!
Yes you are right but when I tried it, it wasn’t impressive at all for more than one reason.
Doing so means each row will occupy the space of more than 3 rows in the screen resulting in fewer data being displayed per screen.
In the other hand, I don’t know of a way to hide the additional components until the user selects a row and then view the extra components only for that selected row.
Sometimes, users look forward to things and then ideas very differently and without any consideration of platform limitations.
This is an app I’m doing for a client. His business is actually in garment and need to run the business online with payment and delivery all within the country (Bahrain)
The highlight of selected row is his idea not mine. However, I found it useful in other ways and tried to find a workaround.
The blocks I shared works fine in the web Live Test but does not work in the mobile app which is something I’m trying to figure how to fix it.
Of course, if you add a refresh block for the Data Viewer List, it works I’m the mobile app but I’m not changing the data behind the code and the refresh block should not be required.
I’m posting it to get better feedback from you all.
Do you mean the client wants other users to see the selection “live” on the app? Meaning: user 1 selects an item, then user 2, 3 or 4 while browsing is able to see what use 1 has selected? this is an interesting idea. I think this is doable with Thunkable using the Firebase realtime data base.
Only the user sees the selection. The way Thunkable treats a selection is only through an event.
The data list viewer will not show the selected row any different from other rows. The owner of the app wants the selected row to be highlighted just like Excel or Google sheets.
I see. Then your best bet is to construct your own “viewer list” with some labels/buttons in a scrollable column component and use clone blocks. So that you can control the attributes of individual items (such as highlighting wit colored backgrounds).
@gobassky
If you look at the project I shared, you’ll see that I made a good progress. They issue is that it works in the web Live Test but not on the phone.