Untitled

<!DOCTYPE html>
<html>
  <head>
    <base target="_top" />
    <link
      rel="stylesheet"
      href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"
    />
    <!-- The CSS package above applies Google styling to buttons and other elements. -->
    <style>
      .branding-below {
        bottom: 54px;
        top: 0;
      }
      .branding-text {
        left: 7px;
        position: relative;
        top: 3px;
      }
      .logo {
        vertical-align: middle;
      }
      .width-100 {
        width: 100%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
      }
      label {
        font-weight: bold;
      }
      #seta-options,
      #setb-options {
        background-color: #eee;
        border-color: #eee;
        border-width: 5px;
        border-style: solid;
        display: none;
      }
      #seta-text,
      #setb-text,
      #button-bar,
      #submit-subject {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class="sidebar branding-below">
      <form>
        <div class="block">
          <input type="checkbox" id="setting-a" />
          <label for="setting-a">Collect generated document urls in spreadsheet?</label>
        </div>
        <div class="block form-group" id="seta-options">
          <label for="seta-text">
            Spreadsheet to write to (URL)
          </label>
          <input type="text" class="width-100" id="seta-text" />
          <!-- more options -->
        </div>

        <div class="block" id="button-bar">
          <button class="action" id="save-settings">Save</button>
        </div>
      </form>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      /**
       * On document load, assign required handlers to each element,
       * and attempt to load any saved settings.
       */
      $(function() {
        $("#save-settings").click(saveSettingsToServer);
        $("#setting-a").click(toggleexportToSheet);
        google.script.run
          .withSuccessHandler(loadSettings)
          .withFailureHandler(showStatus)
          .withUserObject($("#button-bar").get())
          .getSettings();
      });

      /**
       * Callback function that populates the notification options using
       * previously saved values.
       *
       * @param {Object} settings The saved settings from the client.
       */
      function loadSettings(settings) {
        $("#seta-text").val(settings.sheetURL);

        if (settings.exportToSheet === "true") {
          $("#setting-a").prop("checked", true);
          $("#seta-options").show();
        }
      }

      /**
       * Toggles the visibility of the setting a options.
       */
      function toggleexportToSheet() {
        $("#status").remove();
        if ($("#setting-a").is(":checked")) {
          $("#seta-options").show();
        } else {
          $("#seta-options").hide();
        }
      }

      /**
       * Collects the options specified in the add-on sidebar and sends them to
       * be saved as Properties on the server.
       */
      function saveSettingsToServer() {
        this.disabled = true;
        $("#status").remove();
        var exportToSheet = $("#setting-a").is(":checked");
        var settings = {
          'exportToSheet': exportToSheet
        };

        // Only save if export selected
        if (exportToSheet) {
          settings.sheetURL = $("#seta-text")
            .val()
            .trim();
        }

        // Save the settings on the server
        google.script.run
          .withSuccessHandler(function(msg, element) {
            showStatus("Saved settings", $("#button-bar"));
            element.disabled = false;
          })
          .withFailureHandler(function(msg, element) {
            showStatus(msg, $("#button-bar"));
            // showStatus("failed", $("#button-bar"));
            element.disabled = false;
          })
          .withUserObject(this)
          .saveSettings(settings);
      }

      /**
       * Inserts a div that contains an status message after a given element.
       *
       * @param {String} msg The status message to display.
       * @param {Object} element The element after which to display the Status.
       */
      function showStatus(msg, element) {
        var div = $("<div>")
          .attr("id", "status")
          .attr("class", "error")
          .text(msg);
        $(element).after(div);
      }
    </script>
  </body>
</html>