How to Display Attachments on a Pop-Up Screen When Click on Attachment Icon in Canvas App Screen

```html

How to Display Attachments on a Pop-Up Screen When Click on Attachment Icon in Canvas App Screen

Attachments are commonly used in Power Apps applications for storing documents, images, PDFs, invoices, contracts, employee files, and customer-related documents.

Instead of navigating users to another screen, many organizations prefer displaying attachments inside a popup window when users click an attachment icon.

This approach provides a modern user experience, reduces navigation, and allows users to preview documents without leaving the current screen.

Power Apps supports attachment controls, galleries, containers, and popup-style interfaces that can be combined to build attachment viewers.

Business Requirement

Suppose a gallery displays records:

Employee Name
Department
Attachment Icon

When the user clicks:

📎 Attachment Icon

The application should:

Open Popup
↓
Display Attachments
↓
Preview File
↓
Close Popup

Instead of opening a new screen.

Common Use Cases

Employee Management

View employee documents.

Invoice Processing

Preview invoices.

Customer Support

Open attached screenshots.

HR Applications

View resumes and certificates.

Project Management

Display project documents.

Solution Architecture

Workflow:

Gallery
↓
Attachment Icon
↓
Popup Container
↓
Attachment Gallery
↓
File Preview

This is one of the most common popup design patterns used in Canvas Apps. Popup interfaces are typically built using variables and containers that control visibility.

Step 1: Create Popup Variable

On Screen Visible:


UpdateContext(
{
    varShowAttachmentPopup:false
}
)

Initially the popup remains hidden.

Step 2: Add Attachment Icon

Insert:

Icon
↓
Attachment

Inside the Gallery.

Example:

📎

Users click this icon to view attachments.

Step 3: Store Selected Record

Attachment Icon → OnSelect


Set(
    varSelectedRecord,
    ThisItem
);

UpdateContext(
{
    varShowAttachmentPopup:true
}
)

This stores the selected record and opens the popup.

Step 4: Create Popup Container

Insert:

Container

Properties:

Visible


varShowAttachmentPopup

Fill


RGBA(
0,
0,
0,
0.3
)

This creates a modal overlay effect similar to modern popup dialogs.

Popup overlays are commonly implemented using containers or labels that cover the screen and become visible through a variable.

Step 5: Create Attachment Gallery

Inside the popup add:

Vertical Gallery

Items:

SharePoint Attachments


varSelectedRecord.Attachments

Dataverse Files


RelatedFiles

The gallery will display all files attached to the selected record.

Step 6: Display Attachment Name

Add a Label inside Gallery.

Text Property:


ThisItem.DisplayName


ThisItem.Name

Output:

Invoice.pdf

Resume.docx

ProjectPlan.xlsx

Step 7: Preview Attachment

Add an Icon:

👁 View

OnSelect:


Launch(
ThisItem.AbsoluteUri
)


Launch(
ThisItem.Value
)

Users can preview attachments directly.

Power Apps commonly uses the Launch() function to open files and attachment URLs.

Step 8: Display Image Attachments Inside Popup

For image files:

Insert:

Image Control

Image Property:


ThisItem.Value

Result:

User clicks attachment
↓
Popup Opens
↓
Image Displays

This creates an inline image preview experience.

Step 9: Add Close Button

Insert:

❌ Close

OnSelect:


UpdateContext(
{
    varShowAttachmentPopup:false
}
)

Popup closes immediately.

Example Complete Flow

Gallery Record
↓
Click Attachment Icon
↓
Store Selected Record
↓
Show Popup
↓
Display Attachments
↓
Preview File
↓
Close Popup

SharePoint Attachment Example

SharePoint List:

Employee Requests

Columns:

Title
Department
Attachments

User clicks:

📎

Popup shows:

Resume.pdf

Passport.pdf

Certificate.pdf

Users can view documents without leaving the screen.

Dataverse File Example

Dataverse Table:

Employee Documents

Columns:

Name
File

Power Apps:


Gallery.Items =
EmployeeDocuments

Popup retrieves and displays all related files.

Advanced Enhancement

File Type Icons

Show different icons:

PDF → PDF Icon
Word → DOC Icon
Excel → XLS Icon
Image → Image Icon

Formula:


If(
EndsWith(
ThisItem.Name,
".pdf"
),
PDFIcon,
WordIcon
)

This improves usability significantly.

Modern UI Design

--------------------------------
| Attachment Viewer           |
--------------------------------
| 📄 Invoice.pdf      View    |
| 📄 Contract.pdf     View    |
| 🖼 Image.png        View    |
--------------------------------
|          Close             |
--------------------------------

This design resembles modern document management systems.

Best Practices

Use Containers for easier popup management
Store Selected Record to avoid repeated lookups
Use Gallery Controls to display multiple files efficiently
Use Launch() for quick file access
Add Loading Indicators to improve user experience
Restrict File Access using SharePoint and Dataverse security roles

Benefits

Better User Experience – View files without changing screens
Faster Navigation – Instant access to attachments
Modern Interface – Professional popup design
Improved Productivity – Users access documents quickly
Reduced Screen Complexity – Keep the application simple

Real-World Example

HR Employee Portal

Employee Record:

John Smith

Attachments:

Resume.pdf
Certification.pdf
Passport.pdf

User clicks:

📎

Popup opens displaying all files instantly.

No screen navigation required.

Conclusion

Displaying attachments in a popup screen is one of the most effective UI enhancements for Power Apps Canvas Apps.

By combining galleries, attachment controls, containers, variables, and file preview functionality, organizations can provide a seamless document-viewing experience.

Whether you are working with SharePoint attachments, Dataverse files, HR documents, invoices, customer records, or project files, popup attachment viewers improve usability, productivity, and overall user experience while keeping the application clean and professional.

```