Archive

Posts Tagged ‘Download’

Canvas App | Display and Download large data sets of Images from Azure Blob Container with no delegation issues

In one of my previous articles, I detailed the steps to embed a Canvas app with upload image to Azure Blob feature.

In this article lets see, how to work with large data sets and achieve following:

  • Displaying blob images in Gallery.
  • Ability to Download the image.
Pre-requisites:
  • Azure Storage Account and Container. Get free Azure subscription here
  • Dynamics 365 account. Get 30 days trail here

Set up Azure Storage Account and Container

  • Connect to your Azure portal.
  • Create a new Storage Account and capture the Storage Account ‘Name’ and ‘Access Key’.
    • I’ve named Storage Account name as ‘expmar’
  • Create a new Container and copy the Name.
    • I named my Container as ’employee’.
  • Upload few images, which will be used to display in Canvas App.

Steps to create Canvas App and Connect to Azure Blob

Create Azure Blob Storage Connection:
  • Connect to Power Apps Portal using your Dynamics 365 account.
  • To connect to Azure Storage Account from Canvas App, we need a new ‘Azure Blob Storage’ Connection.
  • Click on ‘Data -> Connections -> Azure Blob Storage’ and provide Azure Storage Account ‘Name’ and ‘Access Key’ captured in previous section and click ‘Create’.
  • Up on successful creation, you should see the ‘Azure Blob Storage’ under ‘Connections’.
Steps to Create Canvas App and display blob images
  • Create a new Canvas App.
  • Add the ‘Azure Blob Storage’ connection created in previous step to the Canvas App from ‘Data -> Add a connection’.
  • As we established connection to Azure Storage Account, next, connect to ‘Container’ (i.e., Employee) and read the images to a List.
  • Use following formula on App’s ‘On Start’ event.
  • This formula, reads the images from ’employee’ Container and store the images in ’employeePhotos’ Collection.
  • Now we have the images in ’employeePhotos’ Collection, add a Gallery control and bind to ’employeePhotos’ Collection.
  • To display images, In the Gallery, add an ‘Image’ control and in the ‘Image’ property add following formula.
  • To display image name, add a ‘Label’ control and set Text as ‘ThisItem.DisplayName’.
  • To check whether images are rendering click on ‘App -> Run OnStart’ and you should see the images upload to Azure Blob Container in the Gallery.

Steps to Build Download feature
  • To download an image from Azure Container, we would need following 2 values:
    • URL : Azure Storage Account URL.
      • URL format would be “https://{Storage Account Name}.blob.core.windows.net
      • In my case, its “https://expmar.blob.core.windows.net”
    • SasToken (Shared access signature Token):
      • Generate the ‘Shared access signature’ as below from Azure portal.
  • Set ‘URL’ to ‘bloburl’ and ‘Token’ to ‘sastoken’ variables ‘OnStart’ of the App.
  • Complete ‘OnStart’ formula looks as below.
  • Add a ‘Download’ icon to the Gallery.
  • On ‘OnSelect’, use ‘Download(bloburl & ThisItem.Path & sastoken)’ formula.

Test the App
  • Run the App and you should see Images and ‘Download’ icon as below.
  • Click on ‘Download’ icon and image should get downloaded.

🙂

Categories: PowerApps Tags: , ,

Dynamics Portals – Add Download feature to the Forms

September 22, 2019 Leave a comment

In my previous article I’ve explained the Portal styling using Metadata option.

This article is the extension to the styling article, where I will explain how to add ‘Download’ feature to the Form.

I am going to use the ‘Registration’ form as an example, and will see the steps to add a ‘Download’ link to a word document.

Add the Document as a Web File:

  • As a first step, create a new ‘Web File’ and note down the ‘Partial URL’.

Dld_1

  • Next, add the document which you want your Portal user to download from Portal, as a Web File attachment under notes.

Dld_2

Design HTML with Download link:

  • Design the HTML page as per your requirement.
  • For the download link, add a <a> tag with an ID.
  • Add a JScript function, to read the <a> tag by ID and set the web file URL in the document.ready() event.

Dld_5

  • Add the HTML to the Portal entity forms ‘Metadata’ record.

Lab_7

  • Browse the Portal form and you should see the document link, which opens the document on click.

Dld_3

Note:

  • You can only add the allowable file types as the ‘Web File’ attachment.
  • To change the allowable file types, navigate to ‘Settings -> Administration -> System Settings’ and modify in the ‘Set blocked file…‘ field.

Dld_4

🙂