Rajeev Pentyala – Microsoft Power Platform

In this article, lets learn

• Building a Canvas App with the functionality to upload and display images to/from Azure Blob.
• Embed the Canvas App in Model Driven App.

Before we start, make sure you have the following prerequisites met.

Prerequisites:

• PowerApps account. Refer here to procure an account.
• Azure Storage Account and Container. Refer here for steps to create Azure Storage account.

Now that we know pre-requisites, lets understand the high level design:

• Configure an Azure Container
• Configure a ‘Model Driven’ App with OOB ‘Account’ entity.
• ‘Embed’ Canvas app to ‘Account’ form.
• Configure Canvas App with ‘Upload’ and ‘Display’ files to Azure Blob feature.
• Save & Publish the Canvas App

Configure an Azure Container and capture ‘Access Keys’:

• Add a new Container in Azure Storage Account.

• Copy the ‘Storage account name’ and ‘Key1’ under ‘Access Keys’ tab of storage account, which would be needed in next steps.

Configure a ‘Model Driven’ App with ‘Account’ entity:

• Configure a new ‘Model Driven’ App with OOB ‘Account’ entity.

‘Embed’ Canvas app to ‘Account’ form

When adding an embedded canvas app to a form always use a required field. Refer article for detailed steps.

• Open the ‘Account’ entity’s Main customization form.
• Add a new ‘Tab’ to the form and place ‘Account Rating’ field.
• Go to ‘Field Properties -> Controls’ tab of ‘Account Rating’ field.
• Click on ‘Add Control’ and choose ‘Canvas app’ and click on ‘Add’

• Click on ‘Customize’ which opens up a new ‘Canvas App’ with ‘ModelDrivenFormIntegration’ component and few fields.

Configure Canvas App with ‘Upload’ and ‘Display’ files to Azure Blob:

As we are building ‘Upload’ to Blob functionality we would’t need the default fields.

• Delete the auto populated fields and ‘Form1’.
• Add a ‘Add picture’ control to the form.

• Add an ‘Azure Blob Storage’ connector and provide ‘Storage Account Name’ and ‘Account Access Key’ captured in previous steps.

Now that we established connectivity between our Canvas app and Azure Blob container. Lets add the Upload functionality.

• Add ‘Upload’ button and ‘OnSelect’ add following statement to upload the file to blob
  • AzureBlobStorage.CreateFile(“canvasimages”,AddMediaButton1.FileName,AddMediaButton1.Media);
    • “canvasimages” is the Container Name.

• Run the ‘Canvas App’ and browse and ‘Upload’ image.

• Make sure the file gets saved to ‘Blob’ container.

Steps to display images in Gallery:

• Add a Gallery and set the ‘items’ property as below
  • AzureBlobStorage.ListFolderV2(“JTJmY2FudmFzaW1hZ2Vz”).value
  • “JTJmY2FudmFzaW1hZ2Vz” is the Azure Container ID.

• Now set the ‘Image’ property of image control as below
  • AzureBlobStorage.GetFileContent(ThisItem.Id)

Save & Publish the Canvas App:

• Save the Canvas App.

• Navigate to Model Driven app’s ‘Field Properties’ window.
• You should see the ‘App Id’ populated.

• Click ‘Ok’ and publish the customization’s.

Test the Embedded Canvas App:

• Open the existing Account record.
• Navigate to ‘Upload’ tab and you would get the Canvas App loaded.

• Click on ‘Tap or click to add a picture’ to browse the image you would want to upload.
• Click on ‘Upload’ button to upload image.
• We can also add ‘Reset’ option using ‘Reset(AddMediaButton1)=true;‘ statement.
  • Also add “ModelDrivenFormIntegration.RefreshForm(“true”);” which refreshes the data on the host model-driven form.

Notes:

• Refer guidelines while working with embedded canvas apps.

🙂