How to patch images from Power Apps to D365 F&SCM

Introduction

Patching images or, in other words, uploading images from a canvas app is a very common use case. Whether the data source is Dataverse or SharePoint, it is a functionality of many canvas apps. For the past 1 year or so, I have created several apps that connect to D365 F&SCM (formerly known as AX or F&O). One of the best ways to connect a canvas app to D365 is by using virtual entities. To learn more about virtual entities, click here.

Patching images using the camera control

The setup is pretty simple:

1. there is a camera control and a gallery to display the pictures clicked.
2. there is also a signature control to capture the customer's signature.

Here is a demo of the functionality, I will share the code after that:

The OnSelect of the Capture button is:

Collect(
    colImages,
    {
        ImageID: Text(GUID()),
        'Sales order': locSelectedSalesOrder,
        Value: camUploadPhoto.Stream
    }
); 

The 3 columns in the collection are:

1. Sales order column is to store the selected sales order from the previous screen.
2. ImageID is a unique identifier assigned to each image
3. Value is the image from the camera control

The code of the Upload button that takes the signature as well as the images in the collection and patches them to the Attachments table in D365 is as follows:

ForAll(
    colImages As ThisImage,
    Patch(
        'Sales order header document attachments V2 (mserp)',
        Defaults('Sales order header document attachments V2 (mserp)'),
        {
            'Sales order': locSelectedSalesOrder.mserp_salesordernumber,
            'Sales order headers V3': locSelectedSalesOrder,
            'File name': "Delivery receipt" & "_" & locSelectedSalesOrder.mserp_salesordernumber,
            'File type': "png",
            Type: "Delivery Receipt",
            Description: "Delivery receipt" & "_" & locSelectedSalesOrder.mserp_salesordernumber,
            'Archive file': With(
                {
                    varTempFile: JSON(
                        ThisImage.Value,
                        JSONFormat.IncludeBinaryData
                    )
                },
                Mid(
                    varTempFile,
                    Find(
                        ",",
                        varTempFile
                    ) + 1,
                    Len(varTempFile) - Find(
                        ",",
                        varTempFile
                    ) - 1
                )
            )
        }
    )
);
Patch(
    'Sales order header document attachments V2 (mserp)',
    Defaults('Sales order header document attachments V2 (mserp)'),
    {
        'Sales order': locSelectedSalesOrder.mserp_salesordernumber,
        'Sales order headers V3': locSelectedSalesOrder,
        'File name': "Customer signature" & "_" & locSelectedSalesOrder.mserp_salesordernumber,
        'File type': "png",
        Type: "Delivery Receipt",
        Description: "Customer signature" & "_" & locSelectedSalesOrder.mserp_salesordernumber,
        'Archive file': With(
            {
                varTempFile: JSON(
                    penSignature.Image,
                    JSONFormat.IncludeBinaryData
                )
            },
            Mid(
                varTempFile,
                Find(
                    ",",
                    varTempFile
                ) + 1,
                Len(varTempFile) - Find(
                    ",",
                    varTempFile
                ) - 1
            )
        )
    }
);

The key is the 'Archive file' value which is the base64 version of the image.

Patching images using the add picture control

If instead of the camera control, you use the add picture control, the code for the Capture button will change to:

Collect(
    colImages,
    {
        ImageID: Text(GUID()),
        'Sales order': locSelectedSalesOrder,
        Value: imgUploadPhoto.Image
    }
); 

where imgUploadPhoto is the image control within the add picture control. The code of the Upload button will remain the same.

Patched images in D365 F&SC

This is how the images show up in D365:

Recent articles

1. OnSelect – how to use for a clickable control in a gallery
2. How to connect an external barcode scanner with Power Apps
3. The modern text input control – what is new about it?