Answered

HTML Control - Image + Text

(1) Share

Report

Posted on by sankhlay

183

Hello All - I have a Html control in my app where I am trying to get the image of the cetrtificate. The employee shud be able to export & download the certificates when in gallery. Since I have the certificate as image, I have been able to get the image in Power in HTML format and able to send that as an email as a blank template.

The certificates has 3 to 4 blank fields that I would like to populate dynamically based on the gallery data.

- How do I bring the HTML text control on top of the image eg. Employee Name; Department; Month, etc so that when the certificate is downloaded, it has all the details in the spaces designated for the same.

Thanks

Yash

Categories:

General Questions

I have the same question (0)

All responses (10)

Answers (1)

Suggested answer

WarrenBelz 151,895 Most Valuable Professional on at

Like (0)

Report

HTML Control - Image + Text

Hi @sankhlay

This video should be able to guide you through the process.

Please click Does this answer your question 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 a Like.
MVP (Business Applications) Visit my blog Practical Power Apps LinkedIn Buy me a coffee

Was this reply helpful? Yes No
sankhlay 183 on at

Like (0)

Report
HTML Control - Image + Text

@WarrenBelz - Thank you for your response. Attached is my image which I am able to get into Power Apps.

Below are teh steps thatI have followed:

Upload image in Power Apps

Set a variable with JSON- Code - Set(VarPicture, JSON(PP.Image,JSONFormat.IncludeBinaryData))

This displays the picture in the HTML control

The picture has 3 blanks and I would like to fill this based on the gallery item that is selected.

Once selected, I have a flow ready that will email the certificate to the employee.

Any help on that front will be appreciated. Thanks once again for your response.

Was this reply helpful? Yes No
WarrenBelz 151,895 Most Valuable Professional on at

Like (0)

Report

HTML Control - Image + Text

@sankhlay,

Assuming you are generating the HTML in Power Apps, you can insert them in the HTML code. You have not included the code or where you are getting the values from, so it is a bit hard to comment further.

Was this reply helpful? Yes No
sankhlay 183 on at

Like (0)

Report

HTML Control - Image + Text

My Bad @WarrenBelz - Forgot to paste the HTML code for the picture

Here is the code: "<img src=" & VarPicture & " & style'width: 797px;height:557px'>"

Was this reply helpful? Yes No
WarrenBelz 151,895 Most Valuable Professional on at

Like (0)

Report

HTML Control - Image + Text

Hi @sankhlay,

Where is the rest of the code for the certificate body and also the code (all in Text please) of how you generate the certificate.

Was this reply helpful? Yes No
sankhlay 183 on at

Like (0)

Report

HTML Control - Image + Text

Hello @WarrenBelz - Like I mentioned in my earlier post, I got the image via a variable from the JSON format - Set(VarPicture, JSON(PP.Image,JSONFormat.IncludeBinaryData)). I set the variable on the button which generates the image in HTML control.

In HTML control, I used the HTML code that I pasted.

The below video link is the reference point for me to start this.

https://www.youtube.com/watch?v=pFlwYy8ijiA&t=1095s

Was this reply helpful? Yes No
WarrenBelz 151,895 Most Valuable Professional on at

Like (0)

Report

HTML Control - Image + Text

@sankhlay

So the certificate is an image ? If so you cannot add text to it. You will need to generate the Certificate with HTML and then add the image with the process you are using now.
The only other way of tackling this would be to make the Certificate an image in a container, then overlay the required text and use the PDF function on the container to generate the image.

Please click Does this answer your question 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 a Like.
MVP (Business Applications) Visit my blog Practical Power Apps LinkedIn Buy me a coffee

Was this reply helpful? Yes No
sankhlay 183 on at

Like (0)

Report

HTML Control - Image + Text

Hello @WarrenBelz

While I am able to generate the image and other things, I am looking at dynamically populating the text controls based on gallery selected. When I tried, it does not allow Gal.Selected as an option. All my images and text controls are in a container.

This is my code that I have written -

Set(VarPDFNew,PDF(Container2,{Orientation: PaperOrientation.Landscape, Size: PaperSize.A5, Margin: "24pt 24pt 24pt 24pt"}))

Container 2 has Certificates image plus 3 to 4 text boxes.

I am looking at having that as a select option on each gallery tile and based on each tile selected, dynamically update the details in the text box.

Was this reply helpful? Yes No
Verified answer

WarrenBelz 151,895 Most Valuable Professional on at

Like (0)

Report

HTML Control - Image + Text

@sankhlay

So what code are you using for the Text controls overlaying the image ? You should need Text Labels with GalleryName.Selected.FieldName

Was this reply helpful? Yes No
sankhlay 183 on at

Like (0)

Report

HTML Control - Image + Text

Thank You @WarrenBelz for your help. I was able to get things dynamically. Really appreciate your support. Wishing you Happy New Year 2025.

Was this reply helpful? Yes No