Home > PowerApps > [Step by Step] Embed “Azure Blob” connector Canvas App in Model Driven App

[Step by Step] Embed “Azure Blob” connector Canvas App in Model Driven App

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.

Canv_8

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

Canv_9

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

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

Canv_22

‘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’

Canv_2

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

Canv_3

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.

Canv_7

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

Canv_10

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.

Canv_11

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

Canv_12

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

Canv_13

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.

Canv_23

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

Canv_16

Save & Publish the Canvas App:

  • Save the Canvas App.

Canv_17

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

Canv_18

  • 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.

Canv_21

  • 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.

Canv_24

Notes:

  • Refer guidelines while working with embedded canvas apps.

🙂

 

 

Leave a Reply to Victor Onyebuchi Cancel 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 )

Google photo

You are commenting using your Google 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

%d bloggers like this: