Merge Files using The Attachment Control in Power Apps

In Power Apps, the SharePoint List Attachment Control provides an easy and efficient way to add or remove files from a SharePoint list.

Until recently, we have always used this Control in conjunction with a SharePoint List. However, we have now developed an easier method that uses a SharePoint List Attachment control, which doesn’t require a SharePoint List as a Data Source.

In this post, we’ll use the SharePoint List Attachment Control in Power Apps, upload a couple of documents, merge them into a Single PDF, and then send that PDF as an email attachment.

The benefits of being able to do this are obvious, so without further ado, let’s get started!

In order to reduce complexity, we have broken the steps down into discrete parts.

  • Part 1: Create a Power App and use the Attachment control.
  • Part 2: Create a Flow with Power Automate to merge the list attachments into a single PDF and then send that PDF as an email attachment (this post). 

Part 1: Create a Power App and use The Attachment control.

STEP 1: Create a SharePoint Online List.

STEP 2: Add the SharePoint List to PowerApps as follows:

  • Step 2a: Sign in to Power Apps, and then, if necessary, switch to the appropriate environment.
  • Step 2b: Under the ‘Make your own app’ label, click on ‘Canvas app from blank’(screenshot below).
  • Step 2c: Give your App an appropriate name and select the layout of your choice, for this demo, we’ll select ‘Tablet’ as shown in the image below and then click on ‘create’.
Canvas app from blank 
Design the app you want, and connect it to hundreds of 
data sources. 
Canvas app 
App name 
PowerBootCampDemd 
Format 
@ Tablet 
O Phone 
x 
Cancel
  • Step 2d: Add an Edit Form to the Power Apps Canvas.
    • Click ‘Add an item’ from the inset pane or ‘connect to data link on your screen’.
    • When The Data sources blade opens, search for ‘SharePoint’.
    • Select the data-source as ‘SharePoint’ and click on ‘Add a connection’.
File Home Insert 
View 
Q New screen v Label 
or 
Action 
Button 
x 
x 
intions Share and 
Text v 
Input v Gallery 
RGBA(25S, 255, 255, 1) 
Data table 
Forms v 
Media 
1 
Charts 
PowerBootCampl 
Icons 
Data sources 
p SharePoint 2 
SharePoint Sites 
Common Data Serace 
SharePoint 
SharePoint 
Add a connection 
SharePoint 
x 
4
  • Step 2e: Connect your SharePoint List to the App.
    • On the Power Apps builder screen, when the ‘Connect to a SharePoint Site’ blade opens, Enter the URL / location of your list and click on ‘Connect’.
File 
Home 
Insert 
View 
Action 
fiv RGBA(25S, 
x 
255, 
255, 
PowerBootCampC 
u Char 
1) 
Connect to a SharePoint site X 
Enter the Sharepoint URL for the location of your list. 
Learn more 
https://muhimbisupport.sharepoint.com/sites/ 
Data sources
  • Step 2f: On the Power Apps Canvas, click on ‘Add an item’ from the inset pane or ‘connect to data’ and add the SharePoint list.
File Home Insert 
View 
Q New screen v Label 
Data sources 
Search 
V In your app 
PowerDemoSP 
Action 
Button 
x 
Text v 
Input v Gallery v 
RGBA(255, 255, 255, 1) 
Data table 
Forms v 
Media v 
u Charts v 
PowerBootCampC 
Icons v 
Cust 
3 
Sharepoint - testßmuhimbisuw:a.onmicrcs... 
V Entities 
Current environment 
C n Data Service 
an -Be paneorcornec: to
  • Step 2g: On the ‘Insert’ tab, click on Forms and select ‘Edit Form’.
File Home Insert 
View 
Q New screen v Label 
Tree view 
Action 
Button 
x 
Text v 
Input v Gallery 
RG8A(255, 255, 255, 1) 
C)a+z table 
Forms v 
Edit 
Display 
Q Media v 
Charts v
  • Step 2h: Your Power Apps screen should look like the screenshot below.
  • Step 2i: Your Power Apps screen should look like the screenshot below.

STEP 3: Configuring The SharePoint Attachment Control.

  • Step 3a: Copy The SharePoint Attachments Control outside the Forms Control configuring The SharePoint Attachment Control.
    • Right Click on the Attachment Control in the Form and click on ‘Unlock’.
Card : Attachments 
is nom i ng _ 
a Unlock
  • Step 3b: Select the “Attach file” Control and copy it outside the Form..
ard Attachments 
is nothing Mt*. , 
Open Sans 
v 
13 
X 
Cut 
Copy 
Paste 
Reorder 
Align
  • Step 3c:  Your Power Apps screen should look like the following image.
> 0
  • Step 3d: Delete the Form as shown in the image below:
  • Step 3e: Remove the Data-connection as shown in the image below:
Data sources 
p Search 
V In your app 
PowerDemoSP 
Sharemint - 
Entities 
Connectors 
x 
Edit data 
Refresh 
Remove
  • Step 3f: Your Power App should only have one control, and should look like the screenshot below:
BorderCoIor 
Tree view 
Screens Components 
p Search 
Screenl 
j DatacardValue2_1 
x 
Error) , 
Edit in the formula bar 
? Cet help for this error 
Parent . BorderCoIor , 
Red)
  • Step 3g: Clear all the Errors with the Attachment action by clicking on “Edit in the formula bar” and clear the text in the formula bar (repeat this step until the formula bar no longer shows a white cross on a red background.
  • Step 3h: Rename your Attachment control (I have renamed mine to ‘Attachment_Control’) and set the Maximum attachments to ‘2’.

STEP 4: Getting the attachments from The Attachment Control .

Before we begin working with the Attachment Control, let’s review how The Attachment Control is formatted, so we can retrieve the attachments from it.

  • The Attachment control is of type “Table”.
  • When the attachments are passed through the JSON Function, they return a URL, not the Base 64 bit content.  To get the file content, we need to set the attachment to an ‘Image Control’ and then pass the ‘Image’ to the JSON Function to get the Base 64 bit string.   Don’t worry, we’ll explain this fully and it’s really very simple to do.
  • Step 4a: To work around the above noted formatting issue, we’ll use a ‘Gallery Control’ and set the items function to ‘Attachment_Control.Attachments’.
Items 
Attachment ControL.Attachments
Click on the image to open in new tab.
  • Step 4b: For the ‘Gallery Control’ image, set the function to “ThisItem.Value”.
File Home Insert 
View 
Q New screen Label 
Image 
Tree view 
Screens Components 
p Search 
g:' App 
Screenl 
Galleryl 
Separatorl 
NextArrow1 
Z Subtitlel 
Z Titlel 
Imagel 
j Attachment_Control 
Action 
Button 
Text v 
Input Gallery 
ThisItem.Va1ue 
is n othins 'tt"hed_ 
Attuh file 
Data table 
Forms 
Q Media 
Charts 
PowerBootCaml 
Icons
  • Step 4c: Similarly set the Title1 to ‘ThisItem.Name’.
File Home Insert 
View 
Q New screen Label 
Text 
Tree view 
Screens Components 
p Search 
App 
v Screenl 
v Galleryl 
Separator I 
s NextArrowl 
Z Subtitlel 
Z Title, 
Q Imagel 
Attachment_Control 
Action 
Button 
Text v 
Input Gallery 
Thi sitem. Name 
There is nothing 
fie 
Data table 
For ms 
Q Media v 
Charts v 
PowerBoot 
+2 Icons v

Step 5: Formula used to convert attachments to BASE 64 BIT content.

  • Add a button to the Flow Canvas and rename the button to ‘Collect Attachment Data’.  You just need to paste the Formula below to the button’s ‘OnSelect’ property to convert attachments to BASE 64 BIT content.
Clear(FileCollection);

Collect(
    FileCollection,
    Gallery1.AllItems
);

ForAll(
    FileCollection,
    Collect(
        FileContent,
        {
            File: JSON(
                Image1.Image,
                JSONFormat.IncludeBinaryData
            ),
            FileName: Title1.Text
        }
    )
);

Set(
    FileData,
    JSON(FileContent)
);

What does the above formula do?

  • Clear(FileCollection)
    • The ‘Clear’ function deletes all the records of a collection. The columns of the collection will remain.
  • Collect(FileCollection,Gallery1.AllItems)
    • The ‘Collect function’ adds records from the ‘Gallery1.Allitems’ (Which is connected to Attachment Data Source) to Collection name ‘FileCollection’.
  • ForAll(FileCollection,Collect(FileContent,{Img:JSON(Image1.Image,JSONFormat.IncludeBinaryData),Name:Title1.Text}))
    • The ForAll function will loop from all the items in ‘Gallery1’ and store it in a new collection ‘FileContent’.
  • Collect(FileContent,{File:JSON(Image1.Image,JSONFormat.IncludeBinaryData),FileName:Title1.Text})
    • In the ‘FileContent’ Collection we will have two Columns “File” and “FileName”.
    • ‘File’ Column > We will use JSON Function to Convert the ‘Image1.Image’ Control to Binary using the Formula  File:JSON(Image1.Image,JSONFormat.IncludeBinaryData)
    • “FileName” > We will store the value of Title1.Text Field using formula FileName:Title1.Text.
  • Set(FileData,JSON(FileContent))
    • Convert the Value of a Collection ‘FileData’ to JSON and Sset the value to a variable “FileData”.


Step 6: Associating a Power Automate Flow to a button.

  • Add another button to the Power Apps Designer Canvas and rename the button to ‘Trigger Merge Flow’.  To do this,
    • select the Button Control ‘TriggerMerge Flow’, select ‘on Action’ tab and then click on ‘Power Automate’.
    • The ‘Power Automate’ blade then opens and click on ‘Create a new flow’.
on select 
fx v false 
Power Automate 
Data 
Power Automate 
+ Create a new flow 
x 
Screen 1 
There is n Omi n: 
Triu« 
c 
q9 Trigger Merge Fl...

Now that we have created our Power App and configured the Attachment Control, please review our next post in this series where we’ll create a Power Automate Flow and merge the files into a Single PDF, and send that PDF as an email attachment.

One thought on “Merge Files using The Attachment Control in Power Apps

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s