title: Send an array from the client-side to the server-side and return it to the client-side with PropertiesService
body: <p>I want the script to be able to retain the most recent position of each list item when the page is refreshed (i.e. If list 1 starts as A,B,C and I change it to B,A,C and refresh the page, it stays as B,A,C.).</p>
  
  <p>I'm attempting to use the <code>PropertiesService</code> to take an array from the web app, save it and then return it to the web app so that when I refresh the page, all the list items are in their most recent position. </p>
  
  <p>You can see the previous question I am working from <a href="https://stackoverflow.com/questions/51510370/where-should-i-be-calling-the-getuserproperties-function/51510579">HERE</a>. (I started a new thread because this is related, but is a separate issue.) Going off of that and the comments/answered provided there, what I have below is not working as intended. One error I've gotten from the console is <code>Uncaught ReferenceError: saveList is not defined at HTMLButtonElement.onclick</code>.</p>
  
  <p><strong>How do I get the <code>PropertiesService</code> to save the list AND return it when I refresh the page?</strong></p>
  
  <p><strong>How do I get the client and server sides to "communicate" with each other?</strong> </p>
  
  <p>As Diego pointed out, <em>"The function you have that defines position doesn't talk with <code>saveList()</code>, so you're not saving anything."</em> I'm just not sure how to make that happen. </p>
  
  <p><strong>How do I get the <code>positions</code> array from index.html, to code.gs and back to index.html?</strong></p>
  
  <p>FROM CODE.GS: </p>
  
  <pre><code>function doGet() {
    return HtmlService.createHtmlOutputFromFile('index');
  }
  
  function savePositions(myProperty, positions) {
   PropertiesService.getUserProperties().setProperty("myProperty", positions);
  }
  </code></pre>
  
  <p>FROM INDEX.HTML:</p>
  
  <pre><code>&lt;script&gt;
        $(function() {
          google.script.run.withSuccessHandler(buildOptionsList)
              .getTeamArray();    
        });
  
  
        function buildOptionsList(uniqueArray) {
          var div = document.getElementById('myList');
            for (var i = 0; i &lt; uniqueArray.length; i++) {
              var ul = document.createElement('ul');
              var li = document.createElement('li');
              var cLass = li.setAttribute('class','ui-state-default');
              var iD = li.setAttribute('id',uniqueArray[i]);
  
  
          li.appendChild(document.createTextNode(uniqueArray[i]));
          div.appendChild(ul);
          div.appendChild(li);
            }
         }
  &lt;/script&gt;
  
  &lt;script&gt;
    $( function() {
      $( "#myList, #flight1a, #flight1b, #flight2a, #flight2b, #flight3a, #flight3b, #sortable2" ).sortable({
        connectWith: ".connectedSortable",
        update: function(event, ui) {
          var changedList = this.id;
          var order = $(this).sortable('toArray');
          var positions = order.join(';');
  
          console.log({
          id: changedList,
          positions: positions
  
          });
           function saveList() {
    google.script.run.savePositions("myProperty", JSON.stringify(positions));
  
    JSON.parse("myProperty");
  } 
  }
      })
     });
  
  &lt;/script&gt;
  
    &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;button onclick="saveList()"&gt;Click me&lt;/button&gt;
  </code></pre>