Post
Ask Question

How to Bind Static Images in Gallery Control in Canvas App?

Issue

Recently I was working in Canvas App Power Apps. We needed to prepare a mock-up for a simple product app. We have 3 screens – Dashboard, Edit, and New Item screen. For the Dashboard, we were given dummy product images and content like product names and descriptions.

So, I started working on that. I uploaded images to the media. I created a Table for data and tried to bind it in the Gallery control. But I faced a strange issue. The Image was not rendering. Below is my table creation code for the app on-start event.

Set(ProductsData,Table(
    {
        ProductTitle:"Green Tea Cinnamon",
        ProductDescription:"Served hot or iced, this green tea contains cinnamon and ginger with a touch of mint for a refreshing taste. Naturally sweetened with apple juice, this tea is a great alternative to sugar-filled teas",
        Image:"Contoso Tea(4)"
    },
     {
        ProductTitle:"Green Tea Rose",
        ProductDescription:"GREEN TEA with ROSE is a green tea base blended beautifully flavoured with Rose petals giving fresh delicate taste with aromatic rose scent reminiscent of Turkish delight. This is a lovely delicate green tea that must be tried! DO NOT USE BOILING WATER on any GREEN tea as it will make it taste bitter.",
        Image:"Contoso Tea(12)"
    },
     {
        ProductTitle:"Green Tea Mint",
        ProductDescription:"Mint green tea can help improve digestion and relieve symptoms of indigestion, bloating, and gas. It may help boost the immune system and protect against infections. Mint green tea can help improve mental clarity and focus, as well as reduce stress and anxiety.",
        Image:"Contoso Tea(14)"
    }
    ))

bind static images in gallery control in Canvas App

Solution

In such a situation, I am getting poor in searching for a solution. Whatsoever terms I search in Google, I find out something new but not the solution. Most of the blogs are written on how to bind images from SharePoint. So, I am writing this blog to help myself and others in the future.

So, I went to learn the basics and search for how to bind images in control, and I found a solution in the Power Apps community question that was mentioning how to bind dynamic images on the gallery. I found that the issue is with the syntax. When you need to bind such things that Power Apps needs to resolve from itself, we need to use single quote (‘) instead of double quote when you create your data source. So, the correct data structure will be as follow.

Set(ProductsData,Table(
    {
        ProductTitle:"Green Tea Cinnamon",
        ProductDescription:"Served hot or iced, this green tea contains cinnamon and ginger with a touch of mint for a refreshing taste. Naturally sweetened with apple juice, this tea is a great alternative to sugar-filled teas",
        Image:'Contoso Tea(4)'
    },
     {
        ProductTitle:"Green Tea Rose",
        ProductDescription:"GREEN TEA with ROSE is a green tea base blended beautifully flavoured with Rose petals giving fresh delicate taste with aromatic rose scent reminiscent of Turkish delight. This is a lovely delicate green tea that must be tried! DO NOT USE BOILING WATER on any GREEN tea as it will make it taste bitter.",
        Image:'Contoso Tea(12)'
    },
     {
        ProductTitle:"Green Tea Mint",
        ProductDescription:"Mint green tea can help improve digestion and relieve symptoms of indigestion, bloating, and gas. It may help boost the immune system and protect against infections. Mint green tea can help improve mental clarity and focus, as well as reduce stress and anxiety.",
        Image:'Contoso Tea(14)'
    }
    ))

Once I fixed the syntax, my images started showing in the gallery.

bind static images in gallery control in Canvas App

Reference