What are you trying to do? (please be as specific as possible and include relevant screenshots, code snippets, and reproduction steps)
I want to create a Jira-style kanban board organised in swimlanes. My data consists of Themes and Ideas coming from a DB. One Theme can have many ideas associated with it. The final objective is to have a grid with 1) themes as rows, 2) ideas’ statuses as columns, 3)cards for ideas as values.
So something like this:
What have you tried so far? (please link relevant docs and other forum posts)
I was able to get to the point where I have Themes as swimlanes and ‘cells’ populated with all the ideas available. However, I can’t seem to be able to use the theme’s id as a filter for the query populating the cell’s content! In this screenshot two separate theme ids as well as belonging ideas are highlighted with continuous and breaking line respectively:
I can’t figure out how to reference the id that is the result of one query (for themes) to act as a filter for another query (for ideas). I was able to use expressions like $queries.challenges.data[0].id but that simply makes every row filter to the same Theme. How do I make it dynamic?
OK so I think you have a challenges and ideas table, and you need to fetch ideas based on the challenges.
If I understood that correctly, I think there are 2 ways you could solve this:
Easy way but less performant: Create a new component for the ideas. The component should take in the challenge ID as a prop. Then you can configure your ideas query on the challenge ID. However this will result in an N+1 query, but it might be okay if there’s not too much data.
Better way but requires more JavaScript: In a single query, the ideas query should get ALL ideas for each of the challenge IDs in. Then you’ll need to write some JavaScript to figure out which ideas to display for which challenges. This avoids the N+1 query performance problem but will be quite a bit more complex to implement.
I am understanding based on this that you have used $queries.challenges.data[0].id as a filter expression to only display ideas that match the challenge id that expression returns - so it would get only the 1st element (with index 0).
I couldn’t manage to open your project, so assuming your idea elements are children to your challenge element, change $queries.challenges.data[0].id to $queries.challenges.data[currentIndex].id and it should filter only those for the current challenge.
Thanks @jason , I have followed the initial path of low resistance, by wrapping ideas in each column into an object that takes in query results as a prop.
I will have to pay the price in performance for now while at MVP stage. My coding skills are non-existent.
