For those who missed it I did a session for BC Tech Talk last year:

During that session I showed how to get a single image for an item record with an API call (35mins and beyond). The method was very simple to create a custom connector for the standard Picture API and just add a extra bit of text. Similar to this: https://api.businesscentral.dynamics.com/v1.0/8d0632b1-47bf-41fe-ba13-a838adf98c48/sandbox/api/v1.0/companies({companyID})/items({itemID})/picture({pictureID})/content

The green text pulls the image directly into an image control in the canvas app 👍. I mention in the video that you could have the picture images in the main gallery view – it will be slower this way but I was asked to at least explain how. The standard API isn’t that helpful here – VERY HAPPY TO BE TOLD HOW TO USE IT CORRECTLY – the endpoint doesn’t interact in the same was as a HTTP request would and it wants to produce a table of data and no matter how I work with the connector with the available formulas I just get errors. Can see from the Power Users forum this is a similar theme with others:

So to get around this a new page is needed with some extra capability. The end goal here is to create a custom connector for use in powerapps that gives the base64 image value for BC item records. I took inspiration for the solution from this blog which I’ve adapted slightly for latest version (at the time of writing being 17.2 – may have changed since): How to get picture from MediaSet through standard APIs. – Dynamics 365 Business Central Community

Final code is on github – Code: https://github.com/JAng13sea/Blogs/tree/master/ItemImages – but in essence you need a new API page for the item table. A field on the API page which is populated by a codeunit return value of text which has been converted into base64:

    procedure "Pic as JSON"(ItemNo: Code[20]) : Text;
    var
        Item: Record Item;
        TenantMedia: Record "Tenant Media";
        PicText: Text;
        PicInstr: InStream;
        JObject: JsonObject;
        JToken: JsonToken;
        TempBlob: Codeunit "Temp Blob";
        PicOStr: OutStream;
        Base64: Codeunit "Base64 Convert";
    begin
        Item.Get(ItemNo);
        If Item.Picture.Count = 0 then
            exit('');
        TenantMedia.Get(Item.Picture.Item(1));
        TenantMedia.CalcFields(Content);
        if TenantMedia.Content.HasValue then begin
            Clear(PicText);
            Clear(PicInstr);
            TenantMedia.Content.CreateInStream(PicInstr);
            PicText := Base64.ToBase64(PicInstr);
            JObject.Add('picture',PicText);
            JObject.SelectToken('picture',JToken);
        end;
        exit(JToken.AsValue().AsText());
    end;

Note that it has been added into a JSON structure to make it easy for other solutions to read it. From here you will need to create a custom connector for Power Platform. I did another video on this so check it out if you need guidance on that part:

Once the connector is in place and you have pulled the data from BC into a collection in PowerApps you can address the image value in the gallery. When using a gallery in PowerApps a predefined method exists for stating each row of the gallery – ThisItem – the value passed from BC is in Base64 but it needs decoding in PowerApps for an image control to display it. In the image control add the text “data:image; application/octet-stream; base64,” & ThisItem.picture

Depending on the volume of items with images this type of call could be very long so tread with caution. If you happen to be using images with other data or storing other blobs this pattern is a way to get the data into PowerApps.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s