Creating OOB Notes with Attachment using Canvas Application

Creating OOB Notes with Attachments in a Canvas App

1. Objective and Context

We’ll create a Canvas App to manage notes related to an OOB account table. By default, the Notes table doesn’t include an attachment column. We’ll work around this limitation by creating a custom card with an attachment control.

2. Setting Up the App

1. Create a new Canvas App in Power Apps.
2. Connect the app to your data source (Dataverse).

3. Creating the Form for Notes

1. Add an Edit Form to your app. Connect the Form to Notes Table.
2. Add a Form Field (In my case I utilized the Modified On Field) and remove everything inside the card (We'll use it for attachment)
3. Inside the card, add an attachment control. You can obtain the attachment control by either:
• Adding a SharePoint form and copying the attachment control from there.
• Temporarily creating a document column in a Dataverse table and using its form control.

4. Attachment Control Setup:

• Add an attachment control to your custom card (as described earlier).
• Set the onAdd, onRemove, and onUndoRemove properties of the attachment control to the following formula:
  UpdateContext({locdATA: JSON(Image1.Image, JSONFormat.IncludeBinaryData)})

Explanation:

• When an attachment is added (onAdd event), removed (onRemove event), or undone after removal (onUndoRemove event), the formula will execute.
• It captures the binary data of the attached image using Image1.Image.
• The JSON function converts this binary data into a JSON representation, including the binary content.

 

5. Adding Fields to the Form

1. In the Form, add the following fields:
• Document: This will store the base64 content of the attachment.
• Mime type: To determine the document type.
• File name: To store the name of the attached file.
• Subject: For the note’s subject.
• Description: For additional details about the note.
• Is Document: Indicates whether the note contains an attachment.

6. Image Control for Attachments

1. Add an image control to the custom card.
2. Set the Image property of the image control to:
    First(AttachmentControl.Attachments).Value.
3. Set the Visible Property of the Image Control to false.
4. Set the maximum file attachment count of the attachment control to 1.

7. Default Properties for Document and Mime Type Columns

For the Document string column’s default property, use the following formula:

1. If(
2.     Form1.Mode = FormMode.New,
3.     If(
4.         CountRows(AttachmentControl.Attachments) > 0,
5.         Last(Split(
6.             If(Substitute(locdATA, """", "") = "null", "", Substitute(locdATA, """", "")),
7.             ","
8.         )).Value
9.     ),
10.     ThisItem.Document
11. )

For the Mime type string column’s default property, use this formula:

1. If(
2.     Form1.Mode = FormMode.New,
3.     If(
4.         CountRows(AttachmentControl.Attachments) > 0,
5.         First(Split(
6.             Last(Split(locdATA, ":")).Value,
7.             ";"
8.         )).Value
9.     ),
10.     ThisItem.'Mime Type'
11. )

8. File Name Text Input Default

Use the following formula for the File name text input’s default property:

1. If(
2.     Form1.Mode = FormMode.New,
3.     If(
4.         CountRows(AttachmentControl.Attachments) > 0,
5.              First(AttachmentControl.Attachments).Name
6.      ),
7.      ThisItem.'File Name'
8. )

9. Is Document Choice Control Default Selected Item

Set the default selected item for the Is Document choice control to:

1. If(
2.     CountRows(AttachmentControl.Attachments) > 0,
3.     ["Yes"],
4.     ["No"]
5. )

10. Sav, Understand & Testing

Add a button on the screen to Submit and Test the form.

Add TextInput in the screen and reference the "First(AttachmentControl.Attachments).Value" to understand the outcome we get directly from the attachment control. 

Add another TextInput and referene the Image1.Image to understand the usage of image control for getting the file contents of the attachment control.

11. Setting up related Notes (Optional)

If you want to create notes relevant to another Table Record you can also add the Regarding Column in the form.

To Learn More About Polymorphic LookUps

Click Here 

Download the sample solution from here:

Create-Notes-From-Canvas

And that’s it! You’ve now created a Canvas App that allows you to manage OOB Notes with attachments. Remember to customize the field names and controls according to your specific requirements. Happy app building! 🚀📝📎