Good day all,
Been looking around for a solution to print a specific component for example a backendless data table or a specific block in UI builder using the custom code function.
Is this a possibility?
Kind Regards
Raymond
Hi Raymond,
Could you please clarify what you mean by “print a data table”?
Regards,
Mark.
Hi @mark-piller
Thanks for your reply. It is basically to create a button with the window.print() using the custom code block, this to print only the specific component for example a data table as shown below.
As always appreciate your time and effort.
Kind Regards.
Raymond
Hello @Raymond_Woodley!
You can create a separate page to which you can send print data.
And on this page you can convert this data to the view you need and send it to print with a block of custom code:
Regards,
Alexander
Thank you for your response I actually came to the same conclusion on Friday, however with passing a table or a block I am still hitting a wall.
I copy the div outer html and pass it to the new page, then use the UI Component Custom HTML to recreate it. This works great with an image or text but does not work for more complex div’s such as a table or a UI Block containing Data.
Am I missing something obvious.
Once again thanks.
Kind Regards,
Raymond
Perhaps the problem is that the data has not yet been loaded.
You can add logic that will execute window.print() only after the data is loaded, or just add a delay:
Regards,
Alexander
Hi all,
I have come up with the following solution, I realise the practice is frowned upon, and am completely open to other suggestions, but thought I would post it just incase it might help someone else. Using this method you can print to PDF which also might resolve a few problems for some.
var print_div = document.getElementById(“Your_Anchor_ID_Here”);
var print_area = window.open();
print_area.document.write(print_div.innerHTML);
print_area.document.close();
print_area.focus();
print_area.print();
print_area.close();
Kind Regards,
Raymond
This does however lead me to another question, UI data tables do not have anchor ID’s is it possible to add one?
Hello Raymond Woodley!
Did I understand you correctly, do you mean that the given id in the UI Builder cannot be used to search with getElementById?
Regards,
Alexander
That is correct, it only works with an anchor. When using the ID in UI Builder it returns the following error in the browser.
{“code”:6007,“message”:“The specified resource was not found”,“errorData”:{}}
Also when the element is inspected no ID can be found.
Kind Regards,
Raymond
Hello Raymond Woodley!
You can wrap your component in a block, or you can specify a class and use document.querySelector(".myclass") to search for it.
Regards,
Alexander