Can we change a picture in a Google Doc dynamically? - google-apps-script

I am coding a contract application in Google App Script.
It creates a GoogleDoc from a template that include an image of the seller's signature and initials.
As there are five seller, and a dozen different templates, is there a way to change the image of signature and initials?
I have no clues where to start looking for that.
thanks and have a nice day!
Eric
EDIT : I found something about InlineImage in DocumentApp... still looking

Here is a little code which appends a an image in a Google doc. Hope this will give you Idea to get going.
Similar concept I used to make a resume builder application which replaces Profile picture and a signature image
//Make a UI form to upload Image
function doGet() {
var app = UiApp.createApplication();
//Form
var form = app.createFormPanel().setEncoding('multipart/form-data').setId('form');
//Add this form to the application
app.add(form);
//Panel to hold form elements
var panel = app.createVerticalPanel();
//add this panel inside form
form.add(panel);
//Now create form elemnts
var label1 = app.createLabel('Upload Image');
var uploadControl = app.createFileUpload().setName('file').setId('file');
var submitBtn = app.createSubmitButton('Submit');
//Add all these elemnts to the panel
panel.add(label1).add(uploadControl).add(submitBtn);
//Return the application to the service URL
return app;
}
//This function is callend when the form is submitted
function doPost(e){
var fileBlob = e.parameter.file; //This is the image blob if an image is uploded
//Open the document
var doc = DocumentApp.openById('ID OF GOOGLE DOC')//change Id of the document
//get the body of document
var docBody = doc.getActiveSection();
//Append the iamge in document body
docBody.appendImage(fileBlob);
//Save and close the document
doc.saveAndClose();
}

Related

How can I replace the text in a Google Doc header with a script?

I am trying to create a letterhead template for coworkers. I have tried the following, but it does not work:
function myFunction() {
// Display dialog boxes
var ui = DocumentApp.getUi();
var nameResponse = ui.prompt('Enter your name');
var positionResponse = ui.prompt('Enter your position');
var phoneResponse = ui.prompt('Enter your phone number');
var docNameResponse = ui.prompt('Enter a name for your Google Doc');
//Make a copy of the template file
var documentId = DriveApp.getFileById('ID-goes-here').makeCopy().getId();
//Rename the copied file
DriveApp.getFileById(documentId).setName(docNameResponse.getResponseText());
//Get the document header as a variable
var header = DocumentApp.openById(documentId).getHeader();
//Insert the entries into the document
header.replaceText('##name##', nameResponse.getResponseText());
header.replaceText('##position##', positionResponse.getResponseText());
header.replaceText('##phone##', phoneResponse.getResponseText());
}
If I change the header variable to .getBody, I am able to replace the placeholder text (providing I copy it to the body section), but it does not work with getHeader.
For anybody getting this problem in the future.
getHeader() only works for me if I go to the header in google docs double click it. Then it will open the header section and then click on "Different first page". Only then it worked for me.
Don't ask why

Using a button on a copied sheet to open the linked form

So the situation is that I have a script published as a web app that creates a copy of a spreadsheet into the google drive of the person who clicked it and opens it up.
There is a form attached to this spreadsheet that gets copied correctly. What I want is to have a button (drawing with a script attached) that when clicked will launch the google form in the same way as if the person had clicked 'Form > go to live form'.
I tried getting the form ID as follows (got this from another SO question):
var formUrl = SpreadsheetApp.getActiveSpreadsheet().getFormUrl();
var formID = formUrl.match(/[-\w]{25,}/);
However I do not believe that this is the id for the live version of the form, nor can I work out a way to put this id into a URL that will work. (I'm pretty sure this is the id for the form which you go to by clicking Form > edit form)
You can't link directly from a drawing, but you can use Apps Script to serve a popup which includes a link to the form. Here's a sample:
function showForm() {
// Helper function gets the live URL for the form
var sheet = SpreadsheetApp.getActiveSpreadsheet();
var form = sheet.getFormUrl();
showAnchor(form, "Google Form");
}
function showAnchor(url, name) {
// Build some simple HTML and display
var html = '<html><body>'+name+'</body></html>';
var ui = HtmlService.createHtmlOutput(html);
SpreadsheetApp.getUi().showModelessDialog(ui,"demo");
}
The other option is to include a styled cell that can serve as a "button" to the form. It removes the extra step of showing the popup to click on. That is as simple as writing a dynamic hyperlink formula:
function showForm() {
var sheet = SpreadsheetApp.getActiveSpreadsheet();
var form = sheet.getFormUrl();
sheet.getSheetByName('Sheet1').getRange(2,1).setValue('=hyperlink("' + form + '", "Open Form")');
}

Uploaad image button in google form

I created one google-form in that google-form i want user to upload their image. so i need a upload button to put their passport size image. i have written an separate code to upload image. where i can upload image the image comes and saved in drive. there are 2 pieces. i want this to merge or combine . i want to include a upload button image in the form and the uploaded image should come and save in the form spreadsheet. thanku
function doGet(e) {
var app = UiApp.createApplication().setTitle("Upload CSV to Sheet");
var form = app.createFormPanel().setId('frm').setEncoding('multipart/form-data');
var formContent = app.createVerticalPanel();
form.add(formContent);
formContent.add(app.createFileUpload().setName('thefile'));
formContent.add(app.createSubmitButton('Submit'));
app.add(form);
return app;
}
function doPost(e) {
// data returned is a blob for FileUpload widget
var fileBlob = e.parameter.thefile;
var doc = DocsList.createFile(fileBlob);
var app = UiApp.getActiveApplication();
//Display a confirmation message
var label = app.createLabel('file uploaded successfully');
app.add(label);
return app;
}
It's not possible to merge this function to a Google form.

How to preview an image located on a Google Drive using GAS

I want to show a preview of a file (located on Google Drive) selected from a list or tree.
If I try to display an image file the image doesn't show up (allthough it is the right fileId)
function doGet()
{
var app = UiApp.createApplication().setTitle("Image");
var urlDrive = 'https://drive.google.com/file/d/0BxjtiwHnjnkrUVFKaWVaM3BNZjg';
var urlWeb = 'http://cdn.ndtv.com/tech/images/gadgets/google_webfonts_ap.jpg';
// var url = urlWeb; // works
var url = urlDrive; // Doe NOT work
var image = app.createImage(url).setHeight(200);
var panel = app.createVerticalPanel();
panel.add(image);
app.add(panel)
return app;
}
The example shows that changing the url to a file not present on Google Drive it works.
In general I would like to know if it is possible to preview a file (including msWord, msExcel and pdf) in a panel using GAS. A small example will be appreciated much of course.
The problem is the way you get the url.
The only url that works in this case is the one you can see when you examine the image file with "details" in your drive browser window.
it is actually build differently but contains the ID so it is quite easy to re-build...
Here is how it goes:
function doGet(){
var app = UiApp.createApplication().setTitle("Image");
var imgFile = DriveApp.getFilesByName('Chrysanthemum.jpg').next()
ID = imgFile.getId();
Logger.log(ID);
var imgUrl = 'https://googledrive.com/host/'+ID
var image = app.createImage(imgUrl).setHeight(200);
var panel = app.createVerticalPanel();
panel.add(image);
app.add(panel)
return app;
}
test here
EDIT :
Since the code above seems not to work for files that are not publicly shared (not sure) here is another way to get the result (test app updated) that works with files that are shared to 'anyone with the link can view'.
Note That this is not logical since the app is deployed to run "as me" and is accessible to anyone even anonymous"... so from the G Drive pov I open the file... go figure why it behave like that ;-)
I tested in an anonymous session and it works.
I hope this solution will be suitable for you.
function doGet(){
var app = UiApp.createApplication().setTitle("Image");
var imgFile = DriveApp.getFilesByName('Chrysanthemum.jpg').next()
var ID = imgFile.getId();
Logger.log(ID);
var imgUrl = 'https://drive.google.com/uc?export=view&id='+ID
// var imgUrl = 'https://googledrive.com/host/'+ID; //for public files apparently
var image = app.createImage(imgUrl).setHeight(200);
var panel = app.createVerticalPanel();
panel.add(image);
app.add(panel)
return app;
}

How to get the file name selected by FileUpload without submit button?

I'm looking for how to get the file name by the FileUpload just by the file selected before a submit button pushed. But it seems not allowed.
I think the following code can probably hold up the FileUpload changed.
function doGet()
{
var app = UiApp.createApplication();
var panel = app.createVerticalPanel().setId('panel');
var fileUploader = app.createFileUpload().setName('thefile');
var handler = app.createServerHandler('fileChangeHandler');
handler.addCallbackElement(panel);
fileUploader.addChangeHandler(handler);
panel.add(fileUploader);
var form = app.createFormPanel();
form.add(panel);
app.add(panel);
return app;
}
But I don't know how to grab the file name in fileChangeHandler(). For example, the following is a failed code:
function fileChangeHandler(e)
{
var app = UiApp.getActiveApplication();
Logger.log(e.parameter.thefile);
return app;
}
Thanks very much for your comments ^^
You cannot use a regular button for FileUpload, you must use a SubmitButton. See these two answers.
GAS: GUI Builder, File Upload, Submit Button
File upload at google apps script