Adding text to document using checkboxes and buttons? - google-apps-script

Question

I'm creating an apps script add-on for google docs(word-like), I created a sidebar with check boxes and a button and want to print specific text into the document after I click the button and depending on which check boxes I have highlighted, so far I managed to create the sidebar with the Html components but I can't manage to print the text in the document.
<link href="https://ssl.gstatic.com/docs/script/css/add-ons.css" rel="stylesheet">
<div class="sidebar">
<div class="elements">
<input type="checkbox" id="myCheck1">Check Box 1<br>
<input type="checkbox" id="myCheck2">Check Box 2<br><br>
<button class="blue" id="process" onclick="myFunction()">Print</button><br><br>
<p id="text1" style="display:none">Checkbox1 is CHECKED!</p>
<p id="text2" style="display:none">Checkbox2 is CHECKED!</p>
</div>
</div>
<script>
function myFunction() {
var checkBox1 = document.getElementById("myCheck1");
var checkBox2 = document.getElementById("myCheck2");
var text = document.getElementById("text1");
var text = document.getElementById("text2");
if (checkBox1.checked == true){
text1.style.display = "block";
} else {
text1.style.display = "none";
}
if (checkBox2.checked == true){
text2.style.display = "block";
} else {
text2.style.display = "none";
}
}
</script>
This is the Html I have for the sidebar and tried an example I found online to print the text but this will print the text on the sidebar bellow the button not on the document.
function onInstall() {
onOpen();
}
function onOpen() {
DocumentApp.getUi()
.createAddonMenu() // Add a new option in the Google Docs Add-ons Menu
.addItem("KO Addon", "showSidebar")
.addToUi(); // Run the showSidebar function when someone clicks the menu
}
function showSidebar() {
var html = HtmlService.createTemplateFromFile("KO")
.evaluate()
.setTitle("KO Addon Options"); // The title shows in the sidebar
DocumentApp.getUi().showSidebar(html);
}
And this is the main code to add the sidebar to the document, I was only able to print things on the document with code on the main but I just don't know how to make them work together, any help would be greatly appreciated,
Thanks.

Answer 1

You want to put the values retrieved from HTML side to Google Document.
If my understanding for your question is correct, how about this sample? In your case, when the values of HTML side send to Google Apps Script, you can achieve it using google.script.run.
Sample script:
HTML side:
Please add the following script to the end of myFunction() at HTML side.
google.script.run.putValues({checkBox1: checkBox1.checked, checkBox2: checkBox2.checked});
GAS side:
Please add the following function to Google Apps Script.
function putValues(obj) {
var body = DocumentApp.getActiveDocument().getBody();
body.appendParagraph(JSON.stringify(obj));
}
Note:
In this sample, it supposes that your script shows the side bar on Google Document and it works fine.
After you modified your script, please open the side bar. When the push button is clicked, the values of check boxed are sent to Google Apps Script and put the values to the active Document.
This is a simple sample script. So please modify it to your situation.
References:
google.script.run
If I misunderstand your question, please tell me. I would like to modify it.