Using a module within a ListView

[Nick]

Using a single module with this input works:

Using the input and module within a ListView doesn't work:

The input is exact the same. I've checked those by clicking on the input like the example below.

How can I make the module work within a ListView?

[victoria]

Hey @Nick!

Bad news. There may be a small amount use cases where modules and listviews work together, but they are not currently supported together. As modules are still fairly new (and were in Beta until last week), we're still working on efforts to improve their overall performance, including blocking certain items from listviews (like modules or other listviews).

Let me know if there's anything I can actually help with, or there's any more bad news I can deliver 😓

[dlwocks31]

I would also like to see module within ListView. It seems like it fails loudly(instead of silently) right now, don't know whether it is supposed to be a improvement

[scarrucciu]

Running into this same problem. Have a module (the module is just a text component for testing) inside of a container inside of the list view, and the module just shows "undefined" as the text, even though the input to the module seems to be valid. Outside of the ListView the module with the same input works just fine and shows the input text. The screen shot below shows the modules with the same input (in the list view and outside) with the component info and how it renders.

[victoria]

Hi @scarricciu! I tried to repro (text inside container inside list view inside module), and it seems to be working for me in both the module and a parent app that contains the module. What is the undefined supposed to be instead?

[scarrucciu]

@victoria Bringing this error back up. Detailed steps to recreate below, and please let me know if you need more info.

1. Create a module that has a query tied to the module, the module just displays the results of the query when it loads
2. Create a app
3. Put the module in the app, the module renders as it should, the query tied to the module runs, etc
4. Create a list view in the same app. In the list view put a container. In that container put the same module.
5. The module in the listview container is blank, even though it is the same module put in the same app in step 3, just this time inside the listview container.
6. In looking at the logs, I can see that the query associated with the module I put into the listview container has failed with the following error related to the pageUuid. It seems that in a listview the pageUuid is undefined in contrast to an app:

7. The logs for the module placed outside of the listview container show that the query was successful. You can see that the module name "activitySummary" and the query "tasks" are the same for each, with the only difference of one being in the listview (activitySummary3).

[victoria]

Hi @scarricciu! Thank you for taking the time to share your really helpful repro. I followed along as closely as I could and ran into a blocker—Retool does't support modules inside of listviews, or modules inside of containers inside of listviews.

There are quite a few incompatibilities between listviews and modules, so if you try putting a module inside a listview, it shouldn't let you! Same with trying to put a module in a container, then that container inside a listview. There is a "bug" that allows you to first put a container into a listview, then a module into that container, though you still shouldn't be able to.

So in short,

Listview > Module

Listview > (Container > Module)

(Listview > Container) > Module possible, but also not supported.

[scarrucciu]

Got it! Is this something that you all are planning on changing (compatibility between modules and listviews)?

[victoria]

I don't believe so, though I went ahead a created an internal bug report for visibility, and tagged this thread so I can update with any news!

Update [07/22/22]: We removed this hacky workaround to place list views inside of other list views, since we don't currently support this (in short, the list view uses the i value and having two list views both using the same i gets wonky). However, we are working on officially supporting nest list views very soon. Modules in list views might take a little longer to launch due to the complexity, but also coming soon!

[tradesorg_chris]

Now that nested list views are supported, is there an updated timeline for modules in list views?

PS. I really appreciate that you circled back to give a status update. Thanks!

[victoria]

Hey @tradesorg_chris! There's an internal ticket already for this, but no timeline yet. Just asked for an update, so I'll share it here as soon as I hear back.

[oles]

I could also really use this now

[andy.barilla]

+1

I'm ending up with a lot of needlessly duplicated code due to this limitation

[ktbg]

I'm also tossing in my vote for modules within a listview please!

[nl-setech]

Yep! Me too! Lots of duplicated code, and it won't be able to dynamically adjust to changes in the data size.

[Pradip_Kumar_Parkar]

@victoria

not

Hey @victoria
Listview1> Container1 >input fields
Listview1 > Container1 >listview2 > input fields
Listview >listview1> input fields

how can I access the value of input fields, whenever I try to get the data of Listview1 it's giving me

• container1 undefined
• retoolInternal_rowKey undefined
  

please help

[victoria]

Hi @Pradip_Kumar_Parkar!

You should be able to just reference the input component specifically, you'll just need to input the correct index variables to properly access the nested data.

https://docs.retool.com/docs/create-custom-list-views#the-i-variable

Let me know if you have any questions about this!

[Pradip_Kumar_Parkar]

Hey @victoria
thank you

[victoria]

Of course - I hope this was helpful!

[Mark_Png]

My solution was to make each block in my listview a module itself. Then I (cringe) added 10 of those modules and used the « hidden » feature to hide those that were not needed. Bloated, not elegant, but it helped me get pass this frustration.