Mobile app inventory management with scanner using google sheets

Hi.
I've created a simple inventory management app that reads data from a google sheet and displays it in a list collection. Using the label & icon action if the user taps on an item it navigates to a detail screen for the selectedItem where details can be edited. When they press an update button it updates the google sheet. This part all works great.
I'm struggling to get a scan button on the home page to read a barcode of the id number of the item which then takes me to the edit page for that scanned item. I can get it to navigate to the edit screen but how do I get from scanner.data to selectedItem?
I've searched here, google, youtube but can't see much on scanning, especially when using google sheets to store the data.
Any pointers would be greatly appreciated. (Please keep it simple, I'm new to this!)
Thanks!

The problem here may be that you have 2 different ways of navigating into your edit screen, and your edit screen does not know if it's supposed to be getting data from collectionView.selectedItem or scanner.data.

To solve this, you may want to set a temporary state value whenever you are navigating into your edit screen. (See the "Create new" button.)

Then you will need to add a press handler to your collectionView to update the state value on press (first image), and a capture handler to your scanner to update the state value on capture (second image).


Then your edit screen will need to be updated to read data based on the value of this temporary state, rather than reading directly from collectionView.selectedItem.

You'll have to tweak this to work in your app, since I'm not sure how your data is defined. LMK if you're still having trouble, and we can talk specifics over email: braden AT retool dot com.

1 Like

Thanks for the temporary state idea which I have now implemented. The scanners capture handler still doesn't seem to retrieve any data as the edit screen loads with no details but the press handler is working fine.
On my edit screen / input / data I'm using {{collectionView.selectedItem}}, should it have "self" in there somewhere to include the temporary state that we set up earlier?
Again, any ideas are much appreciated!

Since your collectionView has no knowledge of your scanner, reading from collectionView.selectedItem on your edit screen will probably not do what you want. Here are the pieces you may need:

  • a temporary state variable, selectedItemId, which stores the ID of the selected item. It's updated every time a scan happens or whenever a row in collectionView is pressed.
  • a transformer, selectedItem, which picks the correct item from collectionView.data based on selectedItemId.

Then your edit screen would read data from selectedItem rather than collectionView.selectedItem.