In G+ Community Meter, we are using Form Publisher to create PDF exports

Post date: Aug 27, 2015 9:47:57 AM

One of the first feature requests we had after releasing this extension was the ability to save the report somewhere (the extension simply displays a window on top of the selected G+ Community and it isn't simple to copy the statistics). There were several ways to answer this need and we first looked at tools to generate PDF files with Javascript, but we quickly discovered that creating something pretty through such a tool can be complex.

Luckily for us, we have a wonderful add-on that generates beautiful PDF files from a Google Doc or spreadsheet template: Form Publisher. But how can you connect a Chrome extension like Community Meter with an add-on like Form Publisher?

Quite simply in fact! Form Publisher is an add-on for Google Forms. With it, people can fill a form and Form Publisher automatically generates files (docs, sheets or PDF) based on the data submitted by the user. People can fill forms... and apps can do so too! All we have to do is to make an HTTP POST call to the form URL, with data from the activity report generated by Community Meter and once the form is filled, Form Publisher is called and does the rest.

Let's dig in!

In your JS code, all you need is to create an object with all the data you want to submit to Google Form (you can use a standard FormData object) and POST it to the URL of your form (the URL should end with "/formResponse").

//create variable for your different datavar postForm = new FormData(); //use .append ti initialize your data submission// you find your number XXXX in the pre-filled URL//you can do it as many time as possible postForm.append('entry.XXXXXXXXXX', data); //initialize your requestvar xhr = nex XMLHttpRequest(); //and prepare your POST xhr.open('POST', 'https://docs.google.com/forms/d/YOUR_FORM_ADRESS/formResponse', true); //and post your data xhr.send(postForm);

Notice from the code above that each data (or answer) that we want to pass to the form must be linked to a specific, existing, question in your Form. And to associate each answer to the correct question, we need to use the questions' IDs. They are quite easy to find in Google Form, all you need to do is click on the menu Responses > Get pre-filled URL.

That's it, we have all the code we need to submit a Google Form from our Chrome extension. After that, all we need is to set up Form Publisher to create a PDF file based on this input.

Create your PDF

With Form Publisher, you can either choose a Google doc or a Google sheet as a template. Here, we've chosen to use a spreadsheet because we wanted to add some images in our PDF (like the profile pictures of each top contributor of a community). That's not really possible in Google Doc but quite easy with a spreadsheet thanks to the “=IMAGE()” function, which displays an image once we provide a URL (so all we have to do is submit the URL of each profile image in our form answer).

Remember that markers in your sheet must match the label fields / question titles from the Google Form. For example, if a label in your Form is "Total number of posts", add <<Total number of posts>> to the template where you want the data collected to appear.

If you want to take a look, you can make a copy of our spreadsheet template.

Form Publisher will make a copy of the spreadsheet, replace the markers by the info submitted and export this sheet as a PDF, where the =image() formula is correctly read and replaced by the right image.

Of course, we need to give the PDF report to the user who has asked for it. Form Publisher can send PDF as attachment to an email, so in Community Meter, we ask for the email address of the user and then send the PDF to them.

Finally, we wanted to send personalized emails (with the name of the community in the email body), so we plugged YAMM to the process as well. Form Publisher simply generates the PDF, hands it over to YAMM which sends the email. If you want to know more about this interaction, read this article: Managing invoices with Form Publisher, YAMM and Awesome Table.