Get a copy of Body to make a "preview" window

Question

I'm basically doing a mail-merge (replacing Total: $ {total_amount} for Total: $ 20.00) in a Google Docs document with Google App Script.

However, I want a preview option, where I show a modal dialog or something, and then I append to it a copy of the Body of the actual document. That way I can replace all the variables and keeping the original format (bold, italics, etc).

I already have an implementation that loads the current document as HTML exported and appends it to the dialog.

html = getGoogleDocumentAsHTML();
replaced = replace(html);

output = HtmlService.createHtmlOutput(replaced)
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setWidth(700)
  .setHeight(500);

DocumentApp.getUi().showModalDialog(output, 'Preview');

/*
 * @see http://stackoverflow.com/questions/14663852/get-google-document-as-html#answer-28503601
 */
function getGoogleDocumentAsHTML(){ ...

But with this approach I am unable to show the pages, so that the user knows the paragraphs that fits on each page, layout, etc.

Is there any way to get a copy of the Document's Body to do this, or a similar approach?

You can create temp copy the working doc, modify it as requested by the user. Embed the modified temp doc itself in a model dialog. Then remove the temp document when the user makes the choice. The embedded doc will retain all the page numbering and layout. — Spencer Easton, Jan 27 '17 at 14:47
@SpencerEaston can you provide an example as the answer, please? — Christopher Francisco, Jan 27 '17 at 15:15
@ChristopherFansisco which part? Copying, modified, and deleting a document is pretty straight forward. Do need a snipped showing how to embed the doc in a dialog box? — Spencer Easton, Jan 27 '17 at 16:28
@SpencerEaston correct. Embedding a document in the dialog. You might want to include what you said in the first comment so that other people may also consider your approach. Thanks a lot! — Christopher Francisco, Jan 27 '17 at 16:50

score 0 · Answer 1 · answered Jan 31 '17 at 13:57

1) Create a copy of the active document.
2) Make changes to this copy of the document.
3) Embed the changed document in a dialog box.
4) After user is done previewing the new document, delete the modified copy.

You can display a document in a dialog box using an iframe. Dialog sizes of course can be changed from the example below. The the important part is https://docs.google.com/document/d/{id}/preview?authuser=0. I tacked the authuser=0 to give the hint to use the current users credentials. This isn't necessary, but it can prevent the account chooser box for popping up.

code.gs

function renderDocument(docId){      
  var html = HtmlService.createTemplateFromFile('dialog');
  html.ID = id
  var ui = DocumentApp.getUi();
   ui.showModalDialog(html.evaluate().setWidth(800).setHeight(910), "html") 
}

dialog.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <iframe frameborder="0" style="width:90%;height:900px" allowfullscreen="" src="https://docs.google.com/document/d/<?=ID?>/preview?authuser=0"></iframe>
  </body>
</html>

Get a copy of Body to make a "preview" window

1 Answers1