Custom Data View Grid // Cloned Grid with Clickable Images

The Any Component blocks are very powerful and in this post I want to share how you can use them to create a Custom Data Viewer grid with clickable images.

Video Tutorial

Explanation

Default Design

First we create a column container with a button inside that will serve as the default button (it will be removed later).
image
image

Button Properties

The properties are up to you, but some important ones I set to make the grid were the height and width of the button:
image

Flex Properties

And the flex properties of the column container:
image

Blocks to Display

When the screen starts, I pass my list of objects into my display functions:
image

Cloning Function

The display function clones the default button for every item in the list, then populates each clone and then removes the default button.
NOTE: I am setting the text value of the button to the ID of the object. This cannot be seen by the user, but is used to determine with item was clicked in the next step.

Select Item from Grid

Now when any button is clicked, I get the text value which is the id of the item and use this to determine where to go next. In my case to a particular YouTube video.
image

Next Steps

If you would like to see how I made this entire app, you can watch the full playlist here.
If you would like to remix this app, it is available in my Remix Vault which you can sign up for here.
If you would like to learn more about Any Components, check out this tutorial.