Hey everyone,
I'm getting some bugs when using InstanceValues in my ListView component.
Despite InstanceValues being enabled - I'm getting an undefined for the components.
In editor mode, I'm able to untick and tick the InstanceValues box which seems to fix the issue, but for users this isn't possible. The problem returns when refreshing the page, even in editor mode.
Has anyone come across this before? Any suggestions are appreciated!
Hello @Abhyuday_Luthra welcome to the community,
I think you are not selected any of the rows from the table because in the list view you are using the selectedRows so its for multiple rows. If you want to use the data for the single row you can use the selectedRow.
For example in my demo i am using selectedRows that's working perfectly :
Hey, thanks for the reply. I've had the rows selected (data source in the first screenshot) but it's still not working. Do you have any other suggestions?
Even the transformer isn't picking up the InstanceValues in the ListView in my case. There is very clearly data within the components.
@Abhyuday_Luthra,
I can try to help you debug this.
Can you send me the export of your app's JSON file? You can export it like this:
Hey @Abhyuday_Luthra
you have to use some component in listview and from that component names.value you can get the data as i show in example
Thanks for replying Linda!
This is the export:
Payments.json (505.4 KB)
The issue is arising in ListView1 instance values not being referenced in ListView2's components.
The ListView1 that I'm trying to get values from has the multiple components all with set values that you can see here. I'm trying to reference the Currency2 component which has values in ListView1 but it's not being referenced using the InstanceValues.
@Abhyuday_Luthra,
What happens when you actually enter (or change) the data in the input field? I think this what the purpose of the input text fields are, and so when you actually input data into them, the instanceValues update. Is this true for you?
@lindakwoo Yes that's the intention. However the updated values within the components can't be accessed since the InstanceValues are showing as undefined. The "primaryKey" value in the InstanceValues object works but none of the components are accessible in the object.
Sorry @lindakwoo I've just done some more testing and it looks like after editing the values within those ListView1 components, the InstanceValues are accessible. In our use case there are only some cases where the values need to be updated - most of the time the default values are used. Is there a way for instance values to work in both cases? Or would I need to do a check and select the default values for when they've not been changed?
@Abhyuday_Luthra,
I think that it is ONLY the last instanceValue that is not updating, is that the same for you? As in, when you continue to select more and more rows, it is only the final instanceValue in the listView that is not showing up. As you select rows, the one that previously was not showing up will now appear and it is only the latest selected row that does not appear. However, if you were to enter data in ANY input in the listView, they will ALL appear.
This is definitely a bug and I have submitted a ticket, but in order to help you with a workaround, can you describe to me exactly what the user does to interact with this app?
@lindakwoo It seems to be all of the InstanceValues that are not updating. The components values in the ListView all have default values. When a user makes a change to one of these default component values - the InstanceValues from the ListView1 start to work. But until a change is made to one of the values, the components seem to not be accessible through the InstanceValues.
In terms of the interaction - the user selects rows in table3 for orders to be paid. There is a "Pay balance" button on table3 which opens ModalFrame1.
The first view in ModalFrame1 has a ListView1 component which has details of the payments to be made for each selected order. These values are all defaulted based on the values in the selected rows. If a user wants to change the amounts there is a switch for them to select which makes the components editable.
These values are then referenced in ListView2 in the second view of the modal for a summary of the payments to be made - this is done using InstanceValues (which are currently not working unless the user changes one of the component values in ListView1).
@Abhyuday_Luthra,
I have filed a ticket for this bug. Meanwhile I think I may have a workaround for you. Add an event handler on your table3 on row select to run a query that looks like this:
setTimeout(() => {
listView1.clearInstanceValues();
listView1.resetInstanceValues();
}, 100);
I added this to my local test and it solved the issue of instanceValues not updating:
I hope this works for you!
@Abhyuday_Luthra ,
Can you send me some dummy data that you are using to populate table3? I would like to test your app here on my local machine to see what is happening. Thanks.
@lindakwoo This .csv should have some example data that fits into the table3 component.
Retool Sample Data - Sheet1.csv (3.9 KB)
@Abhyuday_Luthra,
I believe I have fixed the issue, which was due to a bug with instanceValues inside modal frames. (Again, I have submitted a bug ticket for this) I have converted your app to a multipage app instead of your using modal frames. Is this what the user flow should look like?
You can also test it here (note that there is no logic on page 3 yet)
I have tweaked a couple of the queries in table3 on rowSelect that were hindering my progress. ( I commented them out) But I think you can see what I have done. Table3 is now on page 1, and what WAS the first steppedComponent in your modal frame has been moved to page 2. You can make a button after users select their rows to bring you directly to page 2 (again, page 3 is not working yet, but I placed your second steppedContainer in it as a placeholder). Note that because the selectView1 and table3 are on different pages, they cannot access each other, so I created a global variables called selectedRows, which is set when rows are selected in table3. This global variable is now the source for the listView1. (note that in the process of copying the stepped containers and moving them to their own pages, a lot of component names have changed (I think listView2 is now listView10), so some of those links may be broken. But I got the main functionality working with instanceValues.
Here is the json file for the changes I've made to your app.
payments_multipage_app.json (492.8 KB)
Please let me know if you have questions
@Abhyuday_Luthra,
Just checking in to see if my suggestions worked out for you.
Hi @lindakwoo sorry I haven't had the chance to get to this just yet. Will try next week and update you on the progress!
