I have a module which contains a multiselectListBox, a listView, and a submit button. Within the listview are various components, such as a single select and a checkbox. The source of the listView is
{{ formData2.value.filter(item => item.category_id !== undefined) }}
where formData2 is a global variable.
Within the module, the listView displays perfectly and everything functions just as it should.
However, when I use this module in one of my apps, the multiselectListBox and submit button appear, but I can't see anything to do with the listView. I suppose this means either 1) the listView itself is not displaying or 2) the listView is there but it's not displaying any of the components within it (e.g. the single select, the checkbox etc.).
Screenshot of the module multiselectListBox and listView:
I've ensured the module inputs are exactly the same in both the module and the app to troubleshoot, and I still run into this issue where the module displays the listView / components within the listView but the app does not.
I'm confused as to why this would occur? Why would a module behave differently when used within an app?
The issue is with my global variable, formData2. I don't know how to fix it, since it's working fine within the module... more details below.
When I change the listView data source from {{ formData2.value.filter(item => item.category_id !== undefined) }} to be something else, such as {{ getReqdCategories.data.filter(item => item.is_required) }}, then the listView displays.
i.e. the issue is with my global variable formData2. It is initialized to be
{{
[{
"booking_id": bookingId.value,
"party": moduleContainer.userType
}].concat(
getReqdCategories.data.filter(item => item.is_required).map(item => ({
category_id: item.category_id,
vendor_id: null,
vendor_contact_id: null,
will_be_on_site_day_of_event: false,
arrival_time_day_of_event: null
}))
)
}}
where bookingId.value and moduleContainer.userType are both inputs to my module.
I have added an output to the module whose value is {{ formData2.value.flatMap(item => item.category_id).toString() }}. When I access this output within the module, it evaluates properly to ",5", whereas, in my app, it evaluates to an empty string "".
Hey @megan! Thanks for reaching out! And for your patience, as well - we generally don't like to let new topics go this long without an answer. I'll have to look into how it may have slipped through the cracks.
To the question at hand, though - is this still an issue for you? I'm able to render relatively basic information with a module and listView component, so there's something else going on. My instinct is that this might have something to do with data types and filtering, but I can't be certain.
Are you able to share a JSON export of your module? Because it looks like you've defined some queries in it, as well, it would be super helpful to export it with hard-coded data.
And for your patience, as well - we generally don't like to let new topics go this long without an answer. I'll have to look into how it may have slipped through the cracks.