html - HTML (Metro 4) と Google スプレッドシート、データの非同期読み込み

Question

私は10月以来、アイテムの配列をselectにロードしようとしています。テンプレートの同期コーディングではできますが、非同期コーディングではできません (説明)。ビデオを見たり、stackoverflow の質問を次々と読んだり、Google のドキュメントやメトロのドキュメントを読んだりしましたが、理解できません。これは、.gs ファイルバックエンドと、サイドバーの読み込みに使用される .html ファイルを使用する Google Apps スクリプトプロジェクトです。

私はこのHTMLを持っています

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- Metro 4 -->
    <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
  </head>
  <body>
    <!-- Title -->
    <h2 style="text-align: center;">Add New Job</h2>

    <!-- Job Name -->
    <p style="text-align: center;"><span class='mif-chat-bubble-outline'></span> Job Name</p>
    <input type="text" data-role="input" data-prepend="Name: ">

    <!-- Creator Name -->
    <p style="text-align: center;"><span class='mif-user-check'></span>  Job Creator</p>
    <select data-role="select" id="mySelectList">
    <optgroup label="Employees">
           <option value="" selected> Loading... </option>     
    </optgroup>
    </select>    

    <nl></nl>
    <p style="text-align: center;">
      <button class="button success cycle " id="confirmButton"><span class="mif-checkmark"></span></button>
    </p>
    
    <!-- Metro 4 -->
    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
    <script>
      $(function() {
        $('#txt1').val('');
        console.log("Running updateSelect");
        google.script.run
          .withSuccessHandler(updateSelect)
          .getEmployeeNames();
      });

      function updateSelect(vA)//array of value that go into the select
      {
        var select = document.getElementById("mySelectList");
        select.options.length = 0;
        for (var i=0; i<vA.length;i++){
          console.log("Creating items %s, %s", vA[i], vA[i]);
          select.options[i] = new Option(vA[i],vA[i]);
          console.log ("select.options[i] = %s, select.options = %s.", select.options[i], select.options);
        }
      }

      console.log("My Code Ran");
    </script>

  </body>
</html>

実行時にこのコンソールフィードバックを提供します。

コンソールのフィードバック

すべての Cookie とキャッシュを消去し、すべてのアドオンを無効にしましたが、問題は解決しませんでした。

オプションが「読み込み中...」から実際に入力した新しい値に変更されないのはなぜですか? 参考までに、機能する次のコードがありますが、非効率的な方法で (呼び出されるのではなく、テンプレート自体の内部で) 機能します。

<!-- Creator Name -->
    <? var employees = getEmployeeNames(); ?>

    <p style="text-align: center;"><span class='mif-user-check'></span>  Job Creator</p>
    <select data-role="select"  id="jobCreator">
    <optgroup label="Employees">
     
        <? for (var i = 0; i < employees.length; i++){ ?>
           <option> <?= employees[i] ?></option>
        <? } ?>
      
    </optgroup>
    </select>

getEmployeeNames() のバックエンドスクリプトを次に示します。1次元配列または2次元配列の両方を返すようにしました。関数は期待どおりの出力を提供しますが、HTML 選択はまだ新しいオプションで更新されません。

function getEmployeeNames(){
  var employeeSheet = SpreadsheetApp.getActive().getSheetByName('Dropdown Lists');
  var names = employeeSheet.getRange(5, 4, employeeSheet.getLastRow(), 1).getValues();

  names = removeBlankEntries(names);

  Logger.log ('Employee Names "%s"', names);

  return names;  
}

function removeBlankEntries(arr){
  
  var output = [];
  arr.forEach(function(value){
    if (value != "" & value != " "){
      output.push(value[0]) // add [0] to make it 1d
    };
  });
  return output;
}

Logger.log の出力例を次に示します。

8:27:00 AM Info Employee Names "[PM, Employee 2, Employee 3, Employee 4]"

または、2次元配列を与えるように設定します。

8:28:00 AM Info Employee Names "[[PM], [Employee 2], [Employee 3], [Employee 4]]"

さらに、サイドバーがコードに読み込まれる方法を次に示します。

function loadNewJobSidebar(){
  var htmlTemplate = HtmlService
            .createTemplateFromFile("addJob");

  var htmlOutput = htmlTemplate.evaluate()
          .setTitle('Add New Job');
  var ui = SpreadsheetApp.getUi();
  ui.showSidebar(htmlOutput);
}

どんなガイダンスも役に立ちます。上のビデオが最高だと思い、3、4回コピーしましたが成功しませんでした。私は 10 年間コーディングをしてきましたが、それは副業にすぎませんが、何ヶ月もの間問題が発生したことはありません。

== モンスタースレッドになってすみません。以下は、レプリケーションの正確な手順です ==

新しい空白の Google スプレッドシートを作成します。
スクリプトエディターを開き、addJob という名前の HTML ファイルを作成します (.html が最後に自動的に追加されます)。
HTML ファイルで、「I have this HTML」というタイトルのこの投稿の最初のスニペットからコードを正確にコピーします。
code.gs ファイルで、次のコードをコピーします。

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  // Or DocumentApp or FormApp.
  ui.createMenu('Manage Sheet')
      .addSubMenu (ui.createMenu('Jobs')
        .addItem('Add New Job', 'loadNewJobSidebar'))
        .addToUi();
}

function getEmployeeNames(){
  return ["Bob", "Jamie", "Ted"];
}


function loadNewJobSidebar(){
  var htmlTemplate = HtmlService
            .createTemplateFromFile("addJob");

  var htmlOutput = htmlTemplate.evaluate()
          .setTitle('Add New Job');
  var ui = SpreadsheetApp.getUi();
  ui.showSidebar(htmlOutput);
}

スクリプトエディタから onOpen() 関数を実行します。実行を許可します。
スプレッドシートに戻り、カスタムメニューで [シートの管理 -> ジョブ -> 新しいジョブの追加] を選択します。
サイドバーが読み込まれ、「読み込み中」と表示されますが、getEmployee() 関数からの名前は使用されません。
F12 を押して、選択オプションをロードする必要があることを示すコンソールログステートメントを確認します。

html - HTML (Metro 4) と Google スプレッドシート、データの非同期読み込み

1 に答える 1

Related

Reference