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).
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:
Flex Properties
And the flex properties of the column container:
Blocks to Display
When the screen starts, I pass my list of objects into my display functions:
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.
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.