There was a requirement that any user in the organization can update his/her profile picture across all Office 365 apps – the approach was quite straight forward: use Power Apps, save the user data in SharePoint and use Power Automate HTTP connector to do a POST using a Graph API endpoint – however, it seems now that the Power Automate HTTP is a Premium connector which becomes overpriced as all the users in the organization are going to use it, therefore used Azure Web Jobs which did the job well. Note that WebJobs provide an easy way to run scripts or programs as background processes in the context of your app.

Let’s get started.

A. Power Apps & SharePoint

A1. Create a new blank app with a Tablet layout preferably.

A2. Insert an Add picture control to upload the image.

Set the OnSelect property as follows

Set(CapturedPic, UploadedImage1.Image);
Set(vImg,JSON(UploadedImage1.Image,JSONFormat.IncludeBinaryData));
If(Value(Text(Len(vImg) * .00000073,”[$-en-US]##.##”)) >= 4, Notify(“Please choose an image less than 4 Mb”),””);

A3. Insert an Image control to validate the uploaded image.

In the Image property, set it as CapturedPic

A4. Add some labels to make the app more descriptive as follows:

It is preferable to show the image size in a label, the reason being is that Graph API support only an image size less than 4Mb, to show the size set the Text as: “Image size: ” & Text(Len(vImg)*.00000073,”[$-en-US]##.##”) & ” Mb”

A5. Now comes the submission of data to SharePoint

On the OnSelect button, add the following code

//Used for delegation purpose
ClearCollect(
    userImage,
    imgCapture.Image
);

//Checking whether the entry of the same user exists in the list
ClearCollect(
    IsEntryExists,
    Filter(
        UsersProfileData,
        EmployeeUPN = CurrentUser.Email
    )
);

//If so then Update otherwise Add
If(
    CountRows(IsEntryExists) > 0,
    Patch(
        UsersProfileData,
        LookUp(
            UsersProfileData,
            EmployeeUPN = CurrentUser.Email
        ),
        {
            Title: User().FullName,
            EmployeeDisplayName: CurrentUser.FullName,
            EmployeeUPN: CurrentUser.Email,
            EmployeeMail: Office365Users.MyProfile().Mail,
            EmployeePhotoApproval: If(
                chkApprove.Value = true,
                "yes",
                "no"
            ),
            IsUpdated: false,
            UserLanguage:Lower(Language()),
            EmployeePhotoAsBase64: First(userImage).Url,
            EmployeePhotoAsText: Substitute(
                JSON(
                    imgCapture.Image,
                    JSONFormat.IncludeBinaryData
                ),
                """",
                ""
            )
        }
    ),
    Patch(
        UsersProfileData,
        Defaults(UsersProfileData),
        {
            Title: User().FullName,
            EmployeeDisplayName: CurrentUser.FullName,
            EmployeeUPN: CurrentUser.Email,
            EmployeeMail: Office365Users.MyProfile().Mail,
            EmployeePhotoApproval: If(
                chkApprove.Value = true,
                "yes",
                "no"
            ),
            IsUpdated: false,
            IsDeleted: false,
            UserLanguage:Lower(Language()),
            EmployeePhotoAsBase64: First(userImage).Url,
            EmployeePhotoAsText: Substitute(
                JSON(
                    imgCapture.Image,
                    JSONFormat.IncludeBinaryData
                ),
                """",
                ""
            )
        }
    )
);

//Reset all controls and notify
Set(
    CapturedPic,
    Blank()
);
Reset(chkApprove);
Reset(AddMediaButton1);
Notify("Photo submitted successfully - please check after sometimes in Delve portal.");

This is the structure of the SharePoint list

The application should like as follows

Next: Part 2 – Azure Web Jobs & Grap API