Customer experience | Sales, Customer Insights,...

Custom editable form on portal. Print afterward

(0) Share

Report

Posted on by Marcel Lathouwers

168

I have two requirement from a customer I'm struggling with. Hopefully I will find some answers here. I'm not a big coding expert myself.

We have a product record in Dataverse (CDS) with basic info like itemno, description. dimension. Also editable dimensions for packaging dimension. The later are filled in by the vendor.
This information should then be printed on a A4 layout so it can be put on the outside of the box.

Preferably we create the input form very similar to the printed layout. So a standard entity form is rendering much to basic. How do i get the different input fields on dedicated places on my web page?
What would be a simple approach to let the portal user print the 'pixel perfect' shipping mark? A download pdf file would be ok,

The print should also include an image of the product. Should I go the web file route for that of a URL to the image?

All responses (4)

Answers (0)

Suggested answer

oliver.rodrigues 4,052 on at

Like (0)

Report

RE: Custom editable form on portal. Print afterward

We highly recommend users to migrate to PowerUsers community for new Portal questions:

powerusers.microsoft.com/.../PowerAppsPortals

------------

Hi, take a look at this article to see if it helps: oliverrodrigues365.com/.../

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.
Clofly 260 on at

Like (0)

Report

RE: Custom editable form on portal. Print afterward

Hi Marcel,

Form layout in portal is match to form in Dynamics, the customization we apply to the Dynamics form will reflect on the portal form.

You could just run "window.print();" to keep the form layout of web page.

Regards,

Clofly
Marcel Lathouwers 168 on at

Like (0)

Report

RE: Custom editable form on portal. Print afterward

That is great stuff, thx!

I will investigate this week

Any thoughts on the custom form layout?
Clofly 260 on at

Like (1)

Report
RE: Custom editable form on portal. Print afterward

Hi Marcel,

Try JavaScript to capture the whole product form element and print its content via browser built-in Window.Print() method.

1. Copy the following code to the web page of your entity form > Content page > Custom Javascript

$(document).ready(function () { $(".actions").append(''); }); function PrintElem() { var content = $('div[data-name="product_details"]').html(); var mywindow = window.open("", "PRINT", "height=400,width=600"); mywindow.document.write("" document.title ""); // Inject external CSS style to the document mywindow.document.write(''); mywindow.document.write(''); mywindow.document.write(""); mywindow.document.write("
" document.title "
"); mywindow.document.write(content); mywindow.document.write(""); mywindow.document.close(); // necessary for IE >= 10 mywindow.focus(); // necessary for IE >= 10*/ mywindow.print(); mywindow.close(); return true; }

2. As the screenshot reveals, the code will insert a custom button "Print" after the default "Submit" button.

3. After clicking the JS-generated button, it will open the print dialog.

However, it seems that the layout and value of some fields(date field) are not captured due to there are many CSS on page to control layout and data display.

Alternatively, we could also simply run window.print() to print all window contents, it seems that the result is better than manual capturing.(Date field data are captured.)

(It is supported to save window content as PDF directly in Chrome.)

Reference:

https://stackoverflow.com/questions/2255291/print-the-contents-of-a-div