Loading ...

Implementing a Profile Photo Uploader on Acumatica’s Employee Screen

09 February 2025

Adding a profile photo uploader to Acumatica’s Employee screen (EP203000) is an excellent way to enhance the user experience and personalize employee records. While this functionality is not directly supported through the Customization Project Editor, it can be achieved using custom code.

Below, I’ll outline the steps to implement this feature, including the DAC definition and ASPX customization.

Step 1: Add the DAC Field

To store the profile image, create a custom DAC field. Use the PXDBString attribute to store the image URL in the database and ensure it’s Unicode-compatible.

Code Example:

#region UsrEmployeeImgUrl 

[PXDBString(255, IsUnicode = true, InputMask = "")] 

[PXUIField(DisplayName = "Employee Image URL")] 

public string UsrEmployeeImgUrl { get; set; } 

public abstract class usrEmployeeImgUrl : PX.Data.BQL.BqlString.Field<usrEmployeeImgUrl> { } 

#endregion

This code creates a new string field, UsrEmployeeImgUrl, to store the URL of the uploaded image.


Step 2: Add the ASPX UI Component

Use the <px:PXImageUploader> control to create an image uploader in the ASPX page.

ASPX Code:

<px:PXImageUploader 

    runat="server" 

    ID="imgUploaderUsrEmployeeImgUrl" 

    DataField="UsrEmployeeImgUrl" 

    AllowUpload="true" 

    ShowComment="true" 

    DataMember="CurrentEmployee" 

    Height="320px" 

    Width="430px" /> 

 

This control allows users to upload and preview images directly on the Employee screen.

Key Attributes:

●     DataField: The DAC field (UsrEmployeeImgUrl) where the image URL is stored.

●     AllowUpload: Enables image upload functionality.

●     ShowComment: Displays a comment box for additional notes on the image.

●     DataMember: Links the control to the CurrentEmployee data view.

●     Height and Width: Customize the dimensions of the image preview area.

Step 3: Publish and Verify

  1. Customization Project:

○     Add the DAC code to a new or existing graph extension.

○     Update the Employee screen’s ASPX markup with the <px:PXImageUploader> control.

  1. Deploy the Customization:

○     Publish the customization project in Acumatica.

○     Verify the Employee screen displays the new uploader control.

  1. Test Functionality:

○     Upload a test image to ensure it saves the URL in the UsrEmployeeImgUrl field.

○     Confirm the image displays correctly in the preview area.

Key Considerations

●     Database Compatibility: Use a string data type to store the image URL. If you need more advanced storage (e.g., file blobs), consider integrating Acumatica’s file management APIs.

●     Custom Roles: Ensure appropriate user roles have access to upload and view images.

●     Image Validation: Add server-side validation for file type and size, if necessary, to maintain data integrity.

Screenshot Example

Below is how the uploader will appear on the Employee screen (EP203000):



Final Thoughts

Adding a profile photo uploader to Acumatica enriches employee records and improves system usability. This guide provides the foundational steps to implement and customize this feature. With minor adjustments, you can tailor the uploader to suit various business needs.

Feel free to experiment and build upon this example for other screens!