Module namespace issue with ListView at App level

App Building
1

Hello,

The issue reported here with the Forms: Module component namespacing causing hell is happening to me with ListView.

I have a module composed of a Container element and within it a ListView element.
My ListView element has a button to Add new block or Remove existing block. In order to keep the data modified in memory when Adding or Removing a block, I use a temporary state that I update with the content of the ListView before adding or removing.
It work fine in the module editor, but in the app it doesn't work because the access to the ListView data changes: listView.data.variable becomes listView.data['moduleId::variable']

To bypass the issue, I've added an input parameter to the module and I tweak the code like that for the Add:

let currentData = tmpState.value;

let key = '';
if (moduleId.value) {
  // To access property in Apps, Retool add prefix using module id
  key = `${moduleId.value}::`;
}
for (let j = 0; j < shifts.data.length; j++) {
  currentData[j] = {
      inputText: shifts.data[j][`${key}inputText1`],
    };
}
currentData.push({
  inputText: 'default value',
});
tmpState.setValue(currentData);

This works but I'm afraid that it may break following an update from you guys. Is there any way to solve this issue properly ?

Thanks

2

Hey @Xavier, Would you be able to reference the value of the component(s) within your Listview Component directly rather than through the listview.data property?

For instance, I've set up a simple repro of your issue where I have a Listview with a Button Component and a Text Component inside a Module. On my Button Component, I have an 'on click' event handler that sets a Temp State variable in my module to the value of the Text Component at the index of the clicked button (the Text components simply show {{ 'index' + i }}).

2472×1092 180 KB

When I try setting the Temp State variable to listview.data[i]['text1], it works in the module, but not in the app. In the app listview.data[i]['text1] is undefined.

2368×746 131 KB

However, if I try just setting the Temp State variable to text1[i].value, it works in both the module and the parent app.

2238×592 102 KB

Could that work for your use case?

2 Likes
3

Hello @everett_smith

Yes it does the trick using the reference instead of the listview.data access.

Thanks a lot for the help !

4

Hi, while this works, it makes it a bit clunky to work with listviews in production b/c now we can't easily iterate over the data property of the list view but instead have to work with the component object. This seems like a bug to me with listviews and modules, but maybe I am misinterpreting something. Are there any plans to "fix" this so that listview modules behave as expected in apps?

5

Hi @mseflek, We are tracking this internally but it's not on our roadmap to change how module components are referenced in an app at the moment. I've added your feedback to our internal ticket on the topic and if there are any updates I'll share them here! @Xaviers original workaround should allow you to still iterate over the data property of the listview directly if necessary.

6

Hi @Xavier and @mseflek, You might be aware of this already, but the keys of components in listview.data are no longer pre-pended with the module name when the module is used in an app!

1 Like
7

Hi @everett_smith, Great news thanks :+1: