How to add a custom image on a clickable image cell in a detail list

When adding images or Clickable images on a Powercat Detail List you can use Fluent UI icons or placeholder link. What if we want to use a custom image as a clickable image.

In today’s Example case we need to add cart image same as the one on canvas application. In order to do this, we are going to need to follow these steps:

1.Set up the icon that you want to use on an icon control on canvas application.

2. Take a screen shot inside the borders of the icon so that the width and height will be matching.

3. Add an Image control with the screenshot of the icon that you took.

4. Now that we got our custom image, we turn it to base 64. Add a button for doing that.

the reason why we are removing the first and last character is because the string that will be created will have ‘ on the beginning and the end,

the way we are going to populate the image on the detail list is by using a power automate, s we need the string outside the canvas application

5. we display the variable on a label so that we can copy it

Now all we need to do is paste this value on the power automate and use it as a clickable image and we are done.

 

The results look like this