Configure Azure storage in the PowerApps portal.

Introduction: This blog explains how to Enable or configure Azure Blob Storage in PowerApps Portal. By enabling this you can take advantage of the greater file storage capability of Azure.

This feature is supported for web files, entity forms, and web forms

Steps to be followed:

Creating Storage Account:

  1. Login to Azure (https://portal.azure.com/)
  2. Go to Storage accounts
  1. Click on “+New”
  1. Enter Details.
  • Select the Subscription, Select or create a new Resource group
  • Give Name to your Storage Account
  • Select Location
  • Account Kind: Storagev2 (general purpose v2)
  • Replication: Read-access geo-redundant storage (RA-GRS)
  1. Click on “Review+Create”
  1. Click on create.

NOTE:

  1. The storage account must be created in the same Azure AD tenant as your PowerApps tenant.
  2. The storage account should be created in the same region as the PowerApps environment you plan to use.

Once the Storage account is created copy the value of the Access key

  1. Open your Storage account
  2. Go to Access keys
  1. Click on Show keys
  1. Copy the value of connection string

Adding CORS RULES to Storage Account

  1. Go to CORS and add below values.
  • Allowed origins: Enter your PowerApps Portal URL. example, https://vyassupport.powerappsportals.com
    Ensure the allowed origin doesn’t have trailing /.
  • Allowed verbs: GET, PUT, DELETE, HEAD, POST
  • Allowed headers: Specify the request headers that the origin domain may specify on the CORS request. For example, x-ms-meta-data*, x-ms-meta-target*, or * to allow all.
  • Exposed headers: Specify the response headers that may be sent in the response to the CORS request and exposed by the browser to the request issuer. For example, x-ms-meta-*, or * to allow all.
  • Maximum age (seconds): Specify the maximum amount time that a browser should cache the preflight OPTIONS request. For example, 200.

Creating Setting record in Portal Management.

  1. Go to Portal Management
  2. Go to Settings –> New
  1. Enter Name and Value
  • Name: FileStorage/CloudStorageAccount
  • Value: Paste the value of the connection string that we copied from the Azure storage account

Create one more setting record to Specify the storage container

  1. Go to Settings –> New
  1. Enter Name and Value
  • Name: FileStorage/CloudStorageContainerName
  • Value: adxstudioportals

Creating Site Settings record:

  1. Go to Portal Management
  2. Go to Site settings –> “+New”
  1. Enter below values.
  • Name: WebFiles/CloudStorageAccount
  • Value: Paste the value of the connection string that we copied from the Azure storage account
  1. Create one more site setting record with below details.
  • Name: WebFiles/StorageLocation
  • Value: AzureBlobStorage

Customizing Entity form(Basic form)

  1. Open the entity form on which you want to enable Azure storage.
  2. Go to the “Entity Form Metadata” tab and click on “+New Entity Form Metadata”.
  1. Add below Values and save the record.
  • Entity Form: Select the form on which you want to enable Notes
  • Type: Notes
  • Create Enabled/Edit Enabled/Delete Enabled: Select true or false based on your requirement
  • File Attachment Location: Azure Blob Storage
  1. Go to your Portal you can see the notes section now. (if you don’t see this then clear the cache of the portal)

Now let’s see how does Azure Blob storage work.

  • Create a Note with an attachment in it.
  • In Model-driven app(dataverse) it will look like below:

When a file is uploaded to Azure Storage by using the portal, it’s represented by a note on an entity(table) and a placeholder for the attachment.

  • When users download this attachment from the model-driven app they can see the below details in the downloaded file.

We can add the Azure Storage web resource to a form to make it more user-friendly. (Adding Azure Storage Control)

  1. Open the form on which you want to make changes
  2. In the form editor for the relevant form, select Web Resource on the Insert tab.

Important Note: You must create two separate forms for the entity(table) one that will be used in Portal and one in the model-driven app. You should make the below changes in the form which you are going to use in the model-driven app don’t make these changes in the form which you are using in the PowerApps portal.

  1. Search for “adx_annotations/adx.annotations.html” web resource and select that.
  1. Enter Name, Label, Custom Parameter and click on OK.

Custom Parameter(data): azureEnabled=true

  1. Remove the existing notes control.
  1. Save the form, and then publish the changes.

Adding CORS RULES to Storage Account for your Dataverse

  1. Go to your Storage Account.
  2. Go to CORS and add below values.
  • Allowed origins: Enter your Domain(dataverse URL). example, https://orgfc9a3b09.crm8.dynamics.com
    Ensure the allowed origin doesn’t have trailing /.
  • Allowed verbs: GET, PUT, DELETE, HEAD, POST
  • Allowed headers: *
  • Exposed headers: *
  • Maximum age (seconds): 5000

You can see now we have two CORS Rule one for PowerApps Portal and one for Model-driven app.

After making all this changes go to your model-driven app.

The new control will now be rendered on the page, giving you the ability to manage your attachments in Azure Storage.

a cloud icon to denote that this file is stored in Azure Storage. You can continue to store attachments in Dataverse; those files will be denoted with the paper-clip icon.

Viewing your Attachment in Azure Storage

  1. Go to your Storage account
  2. Go to Containers
  3. Open the adxstudioportals container.
  1. Open the folder.
  1. You can see your attachment inside that folder.

NOTE:

  1. Azure storage integration only works with Notes configured in Entity Form Metadata. Azure Blob as storage is not used if you use Portal Comments that can be set up using Timeline. Though Portal Comments also provide the capability for files to be uploaded as attachments, these files are only stored in Microsoft Dataverse.

Read this blog to enable file attachment on entity(basic) form in PowerApps Portal: https://vblogs.in/file-attachment-on-basicentity-form-in-powerapps-portal/

Leave a Reply

Your email address will not be published. Required fields are marked *