Passing values between templates and server side script( gs)

Question

What i have - 3 files,

sidebar.html (step 1)
model_less_dialog.html (Step 2)
server side script (.gs)

What i want to do : I want to send values of sidebar.html and model_less_dialog.html on server side script.

My existing solution is working fine with

localStorage.setItem('selectedSidebarValues', selectedData);

passing information between templates and server side. I want to find a best practice to pass the values between the templates and the server side script other than localStorage(). Users can modify localStorage() before sending it to Server Side Script (.gs) Which can be dangerous

Step-1 sidebar.html :

$("#selectBtn").on("click",function() {

    -------------------
    --- piece of code ---
    -------------------
    
    var selectedData = 'all selected values';

    //storing step 1 selected data in local storage.
    localStorage.setItem('selectedSidebarValues', selectedData);
    
    //call the server script method to open the model less dialog box
    google.script.run
          .withSuccessHandler(
              function(result, element) {
                  element.disabled = false;
              })
          .withFailureHandler(
              function(msg, element) {
                  console.log(msg);
                  element.disabled = false;
              })
          .withUserObject(this)
          .openModelLessDialogBox();
  
});

Step-2 model_less_dialog.html:

$("#selectBtnModelLessDialogBox").on("click",function(){

    //collecting step 1 selected data from local storage.
    var selectStep1 = localStorage.getItem('selectedSidebarValues');
    var selectStep2 = 'all selected values';

    //call the server script method
    google.script.run
        .withSuccessHandler(
            function(result, element) {
                element.disabled = false;
            })
        .withFailureHandler(
            function(msg, element) {
                console.log(msg);
                element.disabled = false;
            })
        .withUserObject(this)
        .calculatePolicy(selectStep1, selectStep2);
  });

server side script (.gs) :

function openModelLessDialogBox() {
   var ui = SlidesApp.getUi();
   var htmlOutput = HtmlService
                           .createHtmlOutputFromFile('model_less_dialog')
                           .setWidth(250)
                           .setHeight(300);
   ui.showModelessDialog(htmlOutput, 'model less dialog');
}
 
function calculatePolicy(selectStep1, selectStep2) {
  ----- ----- --- 
  ----- ----- --- 
  ----- ----- ---
}

So this is how I passing values to the server.

You know, you could simply use `PropertiesService`: sidebar invokes a server-side script that saves data from step 1 in script/user properties. Dialog invokes a server-side script that saves data from step 2 and invokes a function that gets the saved data and acts upon it (or gets saved data from step 1 and reuses data from step 2, as it is available). In both cases a `"click"` event handler will suffice. — Oleg Valter is with Ukraine, Aug 03 '20 at 11:03
@OlegValter as i read "Properties cannot be shared between scripts. " https://developers.google.com/apps-script/reference/properties/properties-service — Naresh, Aug 03 '20 at 11:06
:) no, i used only single script (gs) for this functionality , but i think i got your words which you suggested above, — Naresh, Aug 03 '20 at 11:09
@OlegValter Problem with your suggestion would be asynchronous execution of apps script. If multiple people are working on the slide, during the second execution, the first saved sidebar data property of 1 user maybe overwritten by another user. — TheMaster, Aug 03 '20 at 13:59
@TheMaster - hm, that can be mitigated by `LockService`. Also, why not save to user properties and avoid collision in the first place? — Oleg Valter is with Ukraine, Aug 03 '20 at 18:19
@OlegValter Lock would be slow. But yeah, didn't think of user properties. It should solve the issue. — TheMaster, Aug 03 '20 at 19:29
@TheMaster - yeah, I agree, `Lock` would slow down the flow significantly. As another possible solution I can think of persisting / reading from a database like Firebase, should be fast and scalable — Oleg Valter is with Ukraine, Aug 03 '20 at 19:32

TheMaster · Accepted Answer · 2020-08-03T12:46:08.233

Easiest way is to pass the data in templates:

Sidebar calls modaldialog with argument selectedData
```
.openModelLessDialogBox(selectedData);
```
Modal dialog has a template:
```
var selectStep1 = <?= sidebarData?>
```

Pass through the data from sidebar to modal dialog through server:

function openModelLessDialogBox(sidebarData) {
   var ui = SlidesApp.getUi();
   var htmlTemp = HtmlService.createTemplateFromFile('model_less_dialog');
   htmlTemp["sidebarData"] = sidebarData;
   var htmlOutput = htmlTemp.evaluate()
                     .setWidth(250)
                     .setHeight(300);
   ui.showModelessDialog(htmlOutput, 'model less dialog');
}

Another way is to directly communicate through window.top. See Related answer

Passing values between templates and server side script( gs)

1 Answers1