Filtering via images. Check out the diagram

[Sertan_CPH]

Hi all,

I made a diagram for you guys to understand what I am trying to achieve. I have a product and I have been working on an app that shows the BOM (bill of materials) in a gallery. 

The purpose of the app is to get out of excel sheets and make it more user friendly. So far I have achieved regular drop down filtering and creating a gallery. 

My question is if it is possible to filter the levels of the product simply by clicking on the images and deep dive into that assembly unit. Then the second level you repeat the process. The levels are basically specified in the source data columns, so there are corresponding data available. 

I am not sure how to convert the images with a transparent background into a button that only corresponds to the pixeled area... Please check out the pictures and try to guide me on how to get around this and code it. Thanks!

[WarrenBelz]

Hi @Sertan_CPH ,

Put a button over each of the images with the Fill and HoverFill set to Transparent. You can also set the PressedFill to this if you do not want it to appear when clicked. A "hand" will appear when hovering over it. Set the OnSelect as normal.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

[WarrenBelz]

Hi @Sertan_CPH ,

Just checking if you got the result you were looking for on this thread. Happy to help further if not.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

[Sertan_CPH]

Hi @WarrenBelz ,

I am hundred percent sure I wrote an answer to you but for some reason it didn't go through. I may have forgotten to click send. 

Your answer unfrotunately not exactly what I am looking for. I prefer to have the image itself to be a button. So the graphic's transparent area won't respond but only the pixel area will respond to a click. This is to make sure user can touch any part of the graphic component.

Imagine a face where you can touch eyes, mouth and nose without interfering the rest. How can I do that?

[WarrenBelz · Accepted solution]

@Sertan_CPH <

You cannot "segregate" an image into parts. I answered with the button example as that is what you mentioned. You can do the same thing with an icon with both color and fill set to transparent.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.