How to separate and use data (image, label, audio) from dynamic CardViews?


Hi Kodular community, :waving_hand:

I’m building a music app using dynamic components in Kodular. I’m creating dynamic CardViews from a list like this:

[
[“Dance”, “https://example.com/image1.jpg”, “”, “https://example.com/audio1.mp3”],
[“Afrobeats”, “https://example.com/image2.jpg”, “”, “https://example.com/audio2.mp3”],

]

Each inner list includes:

Index 1: Label text (e.g., genre name)

Index 3: Image URL

Index 5: Audio source URL

:bullseye: What I’m trying to do:

When any dynamic card is clicked, I want to:

Get the index of the clicked card

Use that index to extract the corresponding:

    📷 Image

    🏷️ Label

    🎵 Audio source

Display the label and image

Set Player.Source to the audio URL and play it

:cross_mark: Issue:

I’m having trouble getting the index or selecting the correct sublist and fields. Sometimes I get errors like:

The operation select list item cannot accept the arguments: [list], [component]

:brain: What I’ve tried:

Using GetId(component)

Extracting the number from the ID

Selecting item from list using the index

But I’m not sure I’m handling it the right way or assigning IDs correctly.

Any help or block examples would be appreciated! :folded_hands:

Thanks in advance!

Show us how do you create the dynamic card views?

suppose if you use plain number alone to create the main card view then get the clicked component id using like this. If you search in community you will get plenty of results and you no need to make a post even for that

I tried it but its not working with my new dynamic cardviews

The operation select list item cannot accept the arguments: , [((Gospel https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHP4nfY_Zqu_myqQDANrKneatkWmRqpMrM6A&s 2024 https://www.malawi-music.com/songs/BASOPU.mp3) (Afrobeats https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcReuKgNFqzeQApyXsOlGk8b3B97DnCrdaCMTQ&s 2020 https://www.malawi-music.com/songs/BASOPU.mp3) (Amapiano https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSmyfxNlqIRddnz69hLappSnq9NC6Ibl62MiA&s 1999 https://www.malawi-music.com/songs/BASOPU.mp3) (Slow Jamz https://cdn-images.dzcdn.net/images/cover/9636c9851c45fbd87352a4563b35d19e/1900x1900-000000-80-0-0.jpg 2018 https://www.malawi-music.com/songs/BASOPU.mp3))], [card 21]

pls show your blocks so as to help you. also see the error, how the index could be card2?

Better use replace block to replace the card +one space . It may work to you

here’s

So it clears you are using card 2 along with the id, so in the above block i suggested you use replace block to replace the card 2 with an empty text to get index

and this will give the proper index of the clicked dynamic card view

The operation select list item cannot accept the arguments: , [Gospel], [1]

Don’t know whats wrong with me todays​:cry::cry: since morning

but why again you want to replace the card 2 from the proper index number?

remove the replace blocks and use only get index in index place of the select item list

But make sue this index 1 will give global DATA first row item, if you want to get image url , then again you should use one more select list item list block to get the 2nd item i think for the image

Like this? But inserted of getting single item, it showing all that row items inn the lable

pls understand the logic. While creating dynamic component, first you get global data items using get number, from this new list (i mean row) you are parsing only the 2nd item of this list. So here you should use like this

Solved, now it works, i wasn’t understand the selects, sorry i have 6 months experience so its takes me more time to figure it out, anyway thanks

1 Like