Google App Maker 스프레드시트를 DB로 만들기~참가 추가~

우선 소개

그 이그, 그 弐을 보고 있는 전제입니다.
Google App Maker 스프레드시트를 DB로 만들기 ~ 그 단 보기 ~
Google App Maker 스프레드시트를 DB로 만들기

그럼 마지막으로 데이터를 추가해 봅시다.

추가 버튼 및 양식 만들기

list 화면에 추가할 버튼을 배치합니다. (이것은 Google이 제공하는 템플릿에서 빌려 왔지만 무엇이든 괜찮습니다.)


PAGE[+] -> Page 적당히 이름을 붙입니다.
Page Datasource는 해당 단으로 만든 testDB를 설정합니다.


왼쪽 메뉴의 위젯에서 Form을 드래그 앤 드롭하여 배치합니다.
Choose Datasourcr -> testDB -> NEXT
편집 -> NEXT
No는 자동 생성되므로 체크를 해제하고 FINISH


이대로 입력을 할 수 없는 & 초기치가 들어 버리므로 @Company , @Structure , @Name 를 삭제합니다.


textbox를 배치합니다.


대체로 추가 화면은 완료입니다만, 최초로 배치한 list의 「+」로부터 천이하도록(듯이),
Property Editor -> Button -> onClick을 선택하고 Navigate to Page... -> new를 설정합니다.


그리고는 new로 불필요한 페이지 천이 버튼을 삭제해, BACK 버튼, ADD 버튼을 추가합시다.
BACK 버튼은 list로 전환하도록 onClick 이벤트를 설정하십시오.


일단 화면의 작성이 끝났으므로, 정상적으로 화면 천이할 수 있는지 확인해 주세요.

추가 처리

여기에서는 ADD 버튼을 클릭했을 때의 추가 처리를 써갑니다.
이미 Client Script와 Server Script는 이미 작성되었으므로 작성합니다.

클라이언트 스크립트

/*
 *追加
 */
function addCell(){
  var addRow = 0;
  var company = app.pages.new.descendants.TextBox1.value;
  var structure = app.pages.new.descendants.TextBox2.value;
  var name = app.pages.new.descendants.TextBox3.value;

  var array = [addRow,company, structure, name];

  google.script.run.setValue(SPREADSHEET_ID,SHEET_NAME,array);
}

서버 스크립트
이전에 작성한 스크립트에//추가 부분을 더했습니다.

/*
 *処理
 */
function setValue(spreadsheetId, sheetName, array){
  var spreadsheet = SpreadsheetApp.openById(spreadsheetId);
  var sheet = spreadsheet.getSheetByName(sheetName);
  var updateRow = Number(array[0]) + 1;

  //追加
  if(array[0] === 0){
    var addNo = sheet.getLastRow();
    array[0] = addNo; 
    updateRow = addNo + 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]);
  }
}

ADD 버튼의 onClick 이벤트를 설정합니다.

addCell();
app.showPage(app.pages.list);
widget.datasource.load();

동작 확인해 봅니다.



그래, 괜찮아!

・・・라고 생각이나 몇번인가 추가하고 있으면 list로 돌아가도 추가분이 반영되지 않는 현상이 되어 버렸습니다.
스프레드 시트에서는 성공적으로 추가되었지만 ...

ADD의 onClick 이벤트를 약간 개선하면 개선되었습니다.

createRow();
setTimeout(function(){
  app.showPage(app.pages.list);
  widget.datasource.load();
},1000);

위화감없는 정도는 어떻습니까?

요약

그런 느낌으로 전 3회 예정으로 써 왔습니다만 삭제도 원하는 생각이 들었습니다.
여기까지 하면 이제 할 수 있다고 생각합니다만 완결시키고 싶다고 하는 의미로 삭제도 쓸까...