まずはじめに
Google App Maker スプレッドシートをDBにする ～その壱 表示～
続いては更新になります。
表示したデータの編集画面の作成、更新処理の実装になります。
それではやっていきましょう
編集画面の作成
左メニューにあるウィジェットマーク -> Form をページにドラック&ドロップ
PAGEにチェックをいれ、NEXT
編集画面の名前をつけ、Page Datasourceは前回作成したtestDBを設定し、CREATE
testDBを選択してNEXT
Editを選択してNEXT
ここでeditableにチェックは入れられません。編集機能は自前で実装します。
こんな感じで表示されていればOK
編集画面が作成できましたのであとは前回作ったlistからedit画面に遷移するようにします。
listの行を選択し、Property Editor -> Events -> onClickを選択し、Navigate to Page... -> editを設定します。
ここで一度、確認してみましょう。
listの行をクリックするとeditに遷移し、クリックした行のデータが表示されていればOKです。
気づきましたか？
editに一度遷移するとlistに戻れないんです！しかも値の編集もできない！
ということでまずはBACKボタンも作りましょうか。もう何をするかお分かりですね。
edit画面にウィジェットからボタンを配置してEvents -> onClickからNavigate to page...->listを設定します。
（ついでに更新ボタンも置いちゃいました。）
あとここではNo以外を編集できるようにしなければなりません。
一旦、@Company,@Structure.@Nameを削除します。
ウィジェットからtextboxを選択して配置します。
配置したtextboxを選択してProperty Editor -> value -> binding
ここではCompanyを選択してこのようになればOKです。
これをStructure,Nameそれぞれ設定してください。
再度、プレビューから編集画面への遷移していただき、No以外が編集できること、BACKボタンでlistに遷移することを確認してください。
更新処理
これからScriptを書いていきます。
Client Script,Server Scriptどちらも必要です。
まずはUPDATEボタンを押した後に更新処理＆listに戻ってほしいのでボタンのonClickイベントを書きます。
配置したUPDATEボタンを選択してProperty Editor -> onClick -> Custom Action
updateCell();
app.showPage(app.pages.list);
widget.datasource.load();
左メニューのSCRIPT「＋」 -> Client を選択 -> CREATE
/*
* スプレッドシートID、シート名
*/
var SPREADSHEET_ID = 'スプレッドシートID';
var SHEET_NAME = 'シート名';
/*
* 更新処理
*/
function updateCell() {
var updateRow = Number(app.pages.edit.descendants.Field3.text);
var company = app.pages.edit.descendants.TextBox1.value;
var structure= app.pages.edit.descendants.TextBox2.value;
var name = app.pages.edit.descendants.TextBox3.value;
var array = [updateRow,company,structure,name];
google.script.run.setValue(SPREADSHEET_ID,SHEET_NAME,array);
}
左メニューのSCRIPT「＋」 -> Server を選択 -> CREATE
/*
*更新処理
*/
function setValue(spreadsheetId, sheetName, array){
var spreadsheet = SpreadsheetApp.openById(spreadsheetId);
var sheet = spreadsheet.getSheetByName(sheetName);
var updateRow = Number(array[0]) + 1;
for (var i = 0; i < array.length; i++){
var column = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var range = column.substr(i, 1) + updateRow;
var cellRange = sheet.getRange(range);
cellRange.setValue(array[i]);
}
}
確認してみます。
プレビューから編集画面へいき、項目を編集してUPDATEボタンをクリックします。
とりあえずlistに遷移して、値も編集した内容に変わっていますね。
スプレッドシートも変わっていますね。
いかがだったでしょうか。
面白いですよね、AppMaker！
少し長くなりましたここまで見てくださった方ありがとうございました。
ここまで出来れば追加も簡単ですが、次回は行を追加してみます。