Unanswered

Displaying an image in Dynamics Form

(1) Share

Report

Posted on by Hagru

Hello!

I am building a Model Driven PowerApp that is keeping track of players in my club. I am saving images as URLs, and would like to display them in the Player Form. Is this possible?

As you can see in the right column, I have an image URL. I would like to display it as an image instead of the URL.

Categories:

Building Power Apps

I have the same question (0)

All responses (6)

Answers (0)

Sunil Pashikanti 736 Moderator on at

Like (1)

Report

Hi @hagru,

To display images in a Model Driven PowerApp form using URLs, follow these steps:

Enable Image Field:
In your Model Driven App, navigate to the form where you want to display the image.
Open the form properties.
Look for the option to “Show image in the form” and enable it.
Image Field Configuration:
Add an image field to your entity (table) in the Dataverse.
This field will store the image URLs.
Form Design:
Edit your form and add the image field to the form layout.
Bind the image field to the appropriate data source (the image URL field).
Display Images:
When you view a record in the form, the image field will display the image corresponding to the URL stored in your data.

Remember to adjust the field names and settings according to your specific app and data structure. This approach allows you to display images directly within the form.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

Sunil Pashikanti - Tech Blog: PowerApps

Was this reply helpful? Yes No
Hagru 8 on at

Like (1)

Report

Hello @SunilPashikanti!

I tried this before posting, and I tried again now after reading your reply, but the result remains the same. Here is my process:

I verify that the "Show image" checkbox is checked under Form Properties, and I add an image field to the Player table.
I add the field to the form in my app, open the datacard and the Image element, where I insert the image URL, as shown in the picture below:

The picture is displayed, albeit under a blue button saying "Add image" or something similar, and I'm thinking this looks good, until I try submitting the form, when nothing happens.

I checked the activity monitor, and it says I get an unexpected error. I'll add a picture of that below. Upon removing the image field from the form, I am able to submit forms again.

The patch request payload is successful, but the two others fail, causing the whole form submit to break.

I know the setting in form properties say that it displays the primary image of the table, does it matter if the single image field I have is marked as Primary Image or not? And does it matter if I check the "Can store entire image" on the image field or not?

Not quite sure what is going wrong.

Was this reply helpful? Yes No
Sunil Pashikanti 736 Moderator on at

Like (1)

Report

Hi @hagru,

Here are some steps to consider:

Image Field Configuration:
Ensure that you’ve correctly added an image field to your entity (table) in the Dataverse.
The field should store the image URLs.
Verify that the field is properly bound to the appropriate data source (the image URL field).
Form Properties:
In the form properties, make sure you’ve enabled the option to “Show image in the form.”
If you’re using an image field, it should display the image corresponding to the URL stored in your data.
Primary Image Setting:
The “Primary Image” setting in form properties refers to the primary image associated with the record.
If you’re using a separate image field, it doesn’t necessarily need to be marked as the primary image.
The “Can store entire image” option determines whether the field can store the entire image or just a URL. If you’re storing URLs, you can leave this unchecked.
Unexpected Error:
Common issues could be related to permissions, data validation, or incorrect field mappings.
Patch Request:
Since the patch request payload is successful, focus on the other two requests that fail.
Double-check the data source and ensure that the image URL field is correctly referenced in your patch requests.
Testing:
Temporarily remove the image field from the form and test form submission. If it works without the image field, it might help narrow down the issue.
Consider testing with a different image URL to rule out any specific issues with the current image.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

Sunil Pashikanti - Tech Blog: PowerApps

Was this reply helpful? Yes No
Hagru 8 on at

Like (1)

Report

Hello @SunilPashikanti

I have confirmed that I have added an image field to my table. I have tried two fields, one where the "Can store entire image" is checked, and one where it is not checked. Both of them seems to store the full image in the table if I upload an image to the field and submit it. Or at least it looks that way in the overview of the records. I am unable to edit the column on the record in that view of rows.

If I click and add a picture to the form field, it uploads the picture. I can see the picture in the table and in the player form where I want to display it. However, I don't want to store the actual image, just the URL. Why do I want to do it this way? Because I get the image URLs from an API. They are easy to store in a URL field, but then I can't display them in the Player Form, which is what I want to do.

When you say "bound to the appropriate data source (the image URL field)", what does that mean exactly? I have the form in my app where I add the field. I have tried changing different properties in the "Image" part of the datacard that is added to different image URLs, but whenever I do that and try to submit the form, I get errors.

Was this reply helpful? Yes No
Sunil Pashikanti 736 Moderator on at

Like (1)

Report

Hi @hagru,

Storing image URLs in a URL field while displaying them in a Model-Driven app form can be a bit tricky:

Image Web Resources:
Navigate to the form editor for your table.
Choose where you want to add the image in the form.
On the Insert tab, select Web Resource.
On the General tab, choose the web resource image (which should be the image URL) that you want to add.
Specify a name for the web resource, and you can also provide a label and alternative text.
Binding to the Appropriate Data Source:
When I mention “bound to the appropriate data source,” I mean connecting the image control (such as an Image component) in your form to the actual data field that holds the image URL.
In your form, make sure the image control is bound to the field where you store the image URL. This ensures that the image displayed is dynamically linked to the data in your table.
If you’re using a data card for the image, set its properties (such as the Image property) to reference the correct field containing the URL.
Troubleshooting Errors:
If you encounter errors when submitting the form, double-check the following:
Ensure that the data source (table) has the correct field for storing image URLs.
Verify that the data card properties (such as Image) are correctly configured to use the URL field.
Confirm that the image URLs retrieved from your API are valid and accessible.
Test the form with a sample record to see if the image displays as expected.

Image web resources (model-driven apps) - Power Apps | Microsoft Learn

How to show an image on Model-Driven app form - Power Platform Community (microsoft.com)

Let’s show an image on the Power Apps Portal form, too – It Ain't Boring (itaintboring.com)

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

Sunil Pashikanti - Tech Blog: PowerApps

Was this reply helpful? Yes No
Hagru 8 on at

Like (0)

Report

Hello again @SunilPashikanti
I appreciate your patience with me here, but I still can't seem to figure it out.
I have a table field called "Image_URL" that I have set to datatype "URL". When I add a player, I get the image URL from an API, and store it in this field. This is the image I would like to display in my model driven form.

I'm unable to store URLs in Image fields in Dataverse, and I am not sure how to bind the Web Resource to display the URL saved in my Image URL field. Some screenshots of the process would be very much appreciated.

If it is not necessary to save the image in the PowerApps form I am submitting, then I would like to avoid that. I get a URL that I save to the Image URL field, this is the URL of the picture I want to display in the form I added as a screenshot in my initial post.

Was this reply helpful? Yes No