Managing Profile Pictures on Custom Pages in Microsoft Dynamics 365 Business Central

Introduction

When creating custom pages in Business Central, sometimes you need to allow users to handle profile pictures. Whether you're working with a custom Employee Profile page or another entity, it's crucial to provide intuitive ways for users to manage their pictures.

In this blog, we’ll walk through the process of implementing four key actions for handling profile pictures in custom pages:

1. Take Picture: Capture a picture using a camera.

2. Upload Picture: Allow the user to import an image file.

3. Export Picture: Provide an option to download the profile picture.

4. Delete Picture: Delete the existing profile picture.

These features can be achieved using AL (the programming language for Business Central).

Pre-requisites

Business Central (OnPrem/Cloud)

Setting Up the Custom UserProfile Page

Let’s first define the User Profile page where the user can manage their profile picture. This page will provide the fields for Profile ID, Profile Name, and a FactBox to display the profile picture.

Code

page 50213 "UserProfileCard"

{

PageType = Card;

SourceTable = "UserProfile";

ApplicationArea = All;

Caption = 'User Profile';

layout

{

     area(content)

     {

         group(Group)

         {

             field("Profile ID"; Rec."Profile ID")

             {

                 ApplicationArea = All;

             }

             field("Profile Name"; Rec."Profile Name")

             {

                 ApplicationArea = All;

             }

         }

     }

     // FactBox area to display profile picture

     area(factboxes)

     {

         part("Profile Picture FactBox"; "ProfilePictureFactBoxPart")

         {

             ApplicationArea = All;

         }

     }

}

actions

{

     area(Processing)

     {

         action("Take Picture")

         {

             ApplicationArea = All;

             trigger OnAction()

             var

                 Camera: Codeunit "Camera";

                 InS: InStream;

                 PicName: Text;

             begin

                 // Validate the selected profile

                 if not IsProfileSelected(Rec."Profile ID") then

                     exit;

                 // Check if the camera is available

                 if Camera.IsAvailable() then begin

                     // Get and import the picture

                     if Camera.GetPicture(InS, PicName) then begin

                         // Import the picture into the profile record

                         Rec."Profile Picture".ImportStream(InS, PicName);

                         Rec.Modify(); // Save the modified record

                         Message('Profile picture updated successfully.');

                     end

                     else

                         Message('Failed to capture the picture. Try again.');

                 end

                 else

                     Message('No camera detected. Please connect a camera.');

             end;

         }

         fileuploadaction("Import Picture")

         {

             ApplicationArea = All;

             Caption = 'Import';

             Image = Import;

             ToolTip = 'Import a picture file.';

             trigger OnAction(Files: List of [FileUpload])

             var

                 FileName: Text;

                 InStream: InStream;

                 FileUpload: FileUpload;

             begin

                 Rec.TestField("Profile ID");

                 if Rec."Profile Name" = '' then

                        Error(MustSpecifyNameErr);

                 if Rec."Profile Picture".HasValue() then

                     if not Confirm(OverrideImageQst) then

                         exit;

                 // Ensure the file is valid

                 if Files.Count = 0 then

                     Error('No file selected.');

                 // Iterate through the Files list (typically just one file)

                 foreach FileUpload in Files do begin

                     // Create the InStream from the current file

                        FileUpload.CreateInStream(InStream);

                     Rec."Profile Picture".ImportStream(InStream, FileName);

                 end;

                 Rec.Modify(true);

                 Message('Picture imported successfully: %1', FileName);

             end;

         }

         action("Export Picture")

         {

             ApplicationArea = All;

             Caption = 'Export';

             Image = Export;

             ToolTip = 'Export the picture to a file.';

             trigger OnAction()

             var

                 FileName: Text;

                 OutStream: OutStream;

                 InStream: InStream;

                 TempBlob: Codeunit "Temp Blob"; // Helps with the stream conversion

             begin

                 Rec.TestField("Profile ID");

                 Rec.TestField("Profile Name");

                 // Ensure there's a profile picture to export

                 if not Rec."Profile Picture".HasValue() then begin

                     Message('No profile picture found to export.');

                     exit;

                 end;

                 // Generate a file name for the exported picture

                 FileName := Rec."Profile Name" + '_ProfilePicture.jpg';

                 // Export the image to an OutStream via TempBlob

                    TempBlob.CreateOutStream(OutStream); // Prepare the OutStream

                 Rec."Profile Picture".ExportStream(OutStream); // Export the Media field content into the OutStream

                    TempBlob.CreateInStream(InStream); // Create InStream from TempBlob to use for download

                 // Trigger the file download

                    DownloadFromStream(InStream, FileName, '', '', FileName);

                 // Show success message

                 Message('Profile picture exported successfully as %1', FileName);

             end;

         }

         action("Delete Picture")

         {

             ApplicationArea = All;

             Caption = 'Delete';

             Image = Delete;

             ToolTip = 'Delete the picture.';

             trigger OnAction()

             begin

                 Rec.TestField("Profile ID");

                 if not Confirm(DeleteImageQst) then

                     exit;

                 Clear(Rec."Profile Picture");

                 Rec.Modify(true);

             end;

         }

     }

}

trigger OnAfterGetCurrRecord()

begin

     SetEditableOnPictureActions();

end;

trigger OnOpenPage()

begin

     CameraAvailable := Camera.IsAvailable();

end;

var

     Camera: Codeunit Camera;

     CameraAvailable: Boolean;

     OverrideImageQst: Label 'The existing picture will be replaced. Do you want to continue?';

     DeleteImageQst: Label 'Are you sure you want to delete the picture?';

     SelectPictureTxt: Label 'Select a picture to upload';

     FileManagement: Codeunit "File Management";

     MustSpecifyNameErr: Label 'You must specify a profile name before you can import a picture.';

local procedure SetEditableOnPictureActions()

begin

     // Enabling or disabling the delete/export actions based on whether a picture is present.

end;

// Function to check if a profile is selected

procedure IsProfileSelected(ProfileID: Code[20]): Boolean

begin

     if ProfileID = '' then begin

         Message('Please select a profile first!');

         exit(False);

     end;

     exit(True);

end;

}

Understanding the Key Actions

Let’s break down the actions implemented in this custom UserProfile page:

1. Take Picture

This action utilizes the Camera Codeunit to capture a picture. If the camera is connected, it will fetch an image and store it in the "Profile Picture" field.

• Prerequisite: The user needs a camera device.

• Flow: Capture -> Store -> Confirm with Message.

2. Import (Upload) Picture

The Import Picture action allows users to upload a picture from their local system into the "Profile Picture" field. It uses the FileUpload control and confirms if the existing image should be replaced.

• Prerequisite: The user must choose a file from the local system.

• Flow: Select file -> Import -> Confirm with Message.

3. Export Picture

The Export Picture action downloads the profile picture to the user’s system. The image is exported to an OutStream, then triggered for download using DownloadFromStream.

• Flow: Export -> Download -> Confirm with Message.

4. Delete Picture

The Delete Picture action clears the profile picture field. It prompts for confirmation before removing the image.

• Flow: Confirm -> Delete -> Update.

Benefits

1. Improved User Experience: Easy management of profile pictures directly within Business Central enhances user personalization and interface engagement.

2. Efficiency: Centralized picture management streamlines workflows, saving time by eliminating the need for third-party tools.

3. Better Data Management: Profile pictures linked to user profiles improve clarity, accuracy, and professional appearance.

4. Flexibility: Businesses can customize profile pages for various entities, from employees to clients, based on specific needs.

5. Data Security: Keeping profile pictures within Business Central ensures all data remains secure and centralized.

6. Enhanced Communication: Profile pictures promote recognition and stronger collaboration within teams, and better interactions with clients.

7. Consistency: Standardized picture management ensures uniformity across the organization.

Conclusion

In standard Business Central, the functionality for managing user profiles and pictures is built-in. However, when working with custom pages, you often need to implement these features manually. By using the actions outlined above, you can offer users the ability to capture, upload, export, and delete profile pictures.

This approach allows you to customize the behavior according to your business needs, whether it's for internal employee profiles or custom user management systems.

By following this guide, you’ll be able to seamlessly integrate profile picture management into your custom Business Central extensions, giving users an enhanced experience.