Did you ever have to capture a screenshot of a widget that displays some financial numbers in tabular format and then email those to a customer? Or maybe copy and paste the snapshot of financial numbers in a proposal document? If yes, in this article, we will see how to automate the process of capturing the snapshot and save it to Salesforce record for later use.

We will be using a dom-to-image Javascript library that can turn arbitrary DOM nodes into a vector (SVG) or raster (PNG or JPEG) image. I have uploaded that library as a Static Resource in my dev org. It would be best if you did the same before trying out the code I have shared below.

The key steps and gotchas are explained in the following steps are:

  1. Capture the DOM element: This part is pretty straightforward. We can capture the DOM element using the standard document.getElementById() Javascript method.
  2. Convert DOM element to Image: We have added a dom-to-image Javascript library for this step. This library has methods to convert the DOM node into a vector (SVG) or raster (PNG or JPEG) image. I’ve usedtoPng() the way it returns a promise and provides results in promise callback. This method returns the image in Data URIs format. We need to extract (dataUrl.split(,)[1]) the data from Data URI before saving it as an Attachment body.
  3. Save it as Attachment in Salesforce: I’m using Javascript remoting to send the data to the Apex controller. Since the dom-to-image library returns base64 encoded image data, we need to decode that before saving it in the Attachment record.

The scenario which I came across was to pull data from a Matrix report into a Conga document. Since Conga Composer only supports the Tabular reports, I decided to go with a custom solution to run the report and export report data. Then, I used a Visualforce component to render the data in the same format as that of a Salesforce Matrix report.

Once the report data is rendered in a Visualforce component, capture the DOM element, convert it into a PNG and save that as an Attachment on the Salesforce record as shown in the below snippet.

code sniped
sniped code

The saved attachment looks like as below for me:

image from DOM

If you need help with Salesforce or have something a little more complex that might require some advanced developer knowledge? We can help. Contact us at [email protected] or chat with us.


Read also Hack Test.loadData() to accept relational data

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: