For Developers

Save DOM Element As Image Attachment In Salesforce

3 min read
CloudAnswers photo
CloudAnswers
Share
TODO

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 a promise callback. This method returns the image in Data URIs format. We need to extract (dataUrl.split(,)image: /uploads/) 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.

The saved attachment looks like as below for me:

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 help@cloudanswers.com or chat with us.

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


CloudAnswers photo
CloudAnswers
Share

About CloudAnswers

Salesforce apps, powerful components, custom development, and consulting. Our experienced team helps you to create and modify workflow processes in salesforce.

Related Articles

For Developers

Batch Apex Error Event - CloudAnswers Hackathon

A hackathon is an event usually put together by a tech organization. The event brings programmers together over a specific period to collaborate on a project.

June 28, 2021

5 Min Read

For Developers

Embed Image In Conga Document Using Salesforce ID

Learn how you can embed an image uploaded as a Salesforce Attachment in a Conga Document. Use the Conga IMAGE tag you can embed images.

February 25, 2021

4 Min Read

For Developers

Deploy a Hasura GraphQL API for Salesforce in minutes

Salesforce API limits can stop you from using Salesforce data. Get around that, by using open-source Hasura GraphQL API for Salesforce.

January 12, 2021

3 Min Read