【AppMaker】受付システムを成仏させる

corp-engr 情シスSlack（コーポレートエンジニア x 情シス） #2 Advent Calendar 2019の2日目の記事です。
過去にAppMakerで作ったものを紹介(成仏)します。

#はじめに
これから成仏させる"AppMakerで作った受付システム"は使われることはなくなりました。
ここで成仏させたい。

これからどんな感じで作ったのか解説していきます。
AppMakerで何が出来るか知りたい、AppMaker触ってみたい、何かを作るため勉強している、そんな人には参考になると思います。
AppMaker面白いですよ。

ちなみに受付システムとはRECEPTIONISTとかACALLとかいわゆる無人のiPad受付をイメージしています。
実際にはやっていませんが、当時はChromebook TabletとChrome Enterpriseでキオスクモードに設定したらそれっぽくなるんじゃないかなーと考えていました。

#出来上がりはこんな感じ



呼び出すとメールが届く

#画面と機能
ちょっとのコーディングで作れます。
ちなみにAppMakerにはStyle EditorがあってCSSを記述することが出来ますが、今回そこはノータッチです。
TOP
　・ 担当者検索へ遷移
担当者検索
　・ 担当者検索、選択
　・ 来訪者情報入力へ遷移
　・ TOPへ戻る
来訪者情報入力
　・ 来訪者の会社、名前、人数の入力
　・ 担当者へ通知
　・ 完了後、TOPへ戻る
　・ 担当者検索へ遷移
#TOP
Create new App > Blank Application
Appの名前を適当につけて、既にPAGESにあるものをRenameしてTopとしましょう。
Widget > Vertical Panelをドラッグ&ドロップで全体に配置して、同じくWidgetからLabelとButtonを配置します。

Labelを選択してWidgetの右のドロップダウンから好きなデザインにします。
そもまま右側にあるProperty Editor -> Textを変更してそれっぽくしましょう。
Buttonも同様です。

位置が気持ち悪いので最初に配置したPanelを選択して以下のように変更
Property Editor > Flow > justify : center
Property Editor > Flow > alignChildren : center
Property Editor > Layout > Width : auto
Property Editor > Layout > Height : auto

PREVIEWで確認してみましょう。

#担当者検索
ここでは担当者を検索できるようにします。担当者はG Suiteのユーザーから検索できるようにします。
DATA > ADD MODEL > Directory
Model nameにEmployeeと設定します。

TOPを複製してSearchとし、ラベル（ようこそ）とボタンを削除します。
Property Editor > Panel > datasource
パネルを選択して先ほど作成したEmployeeを選択します。

続けてパネルのプロパティを下記に変更します。
Property Editor > Flow > justify : start
Property Editor > Spacing > Padding top : 24
Property Editor > Spacing > Padding bottom : 24
Property Editor > Spacing > Padding left : 24
Property Editor > Spacing > Padding right : 24

ウィジェットをこんな感じで配置します。

そしてListRowにGoogleユーザーが表示されるように設定していきます。
@FullName @PrimaryEmailと表示されているのはdatasource(= Employee = ドメイン内ユーザー)のFullName,PrimaryEmailを取得するようになっています。
Property Editor > text > binding : FullName
Property Editor > text > binding : PrimaryEmail
Imageにも設定します。
Property Editor > image > url : ThumbnailPhotoUrl

PREVIEWで確認してみましょう。
ドメイン内のユーザーが表示されていればOK

次に配置したテキストボックスで検索できるようにします。
Property Editor > Texta Box > value > Binding > More Options : datasources > Employee > query > keywords

Property Editor > Events > OnValueEdit

searchText(widget);

SCRIPTS [+] > Client CREATE でスクリプトファイルを作成し、Renameします。

function pushHistoryForSearch(opt_keyword) {
  var state = {
    'timestamp': new Date().getTime()
  };
  var params = {};
  if (opt_keyword) {
    params.search = opt_keyword;
  }
  google.script.history.push(state, params, app.pages.Search.name);
}

function searchText(searchWidget) {
  if (!searchWidget.value) {
    pushHistoryForSearch();
    searchWidget.datasource.unload();
  } else {
    pushHistoryForSearch(searchWidget.value);
    searchWidget.datasource.query.pageIndex = 1;
    searchWidget.datasource.load();
  }
}

続いて検索中と時にLoading...、ヒットしなかった時にNo Result.と表示されるように設定します。
Loading...ラベルが乗っているパネルを選択してプロパティを変更します。
Property Editor > Display > visible : Binding > More Options > datasources > Employee > loading

No Result.ラベルが乗っているパネルを選択してプロパティを変更します。
Property Editor > Display > visible : Binding > More Options > !@datasource.loading && (!@datasource.loaded || @datasource.items.length === 0)

PREVIEWで確認してみましょう。

• テキストボックスから検索ができること
• 結果が返ってくるまでLoading...が表示されていること
• 検索結果が0件の場合はNo Result.が表示されること
  
  

画面遷移は簡単です。
Property Editor > Events > OnClick : Navigation to Page... > TOP
Topの→ボタンにもSearch画面に遷移するようにプロパティを変更します。
Property Editor > Events > OnClick : Navigation to Page... > Search

#来訪者情報入力
TOPを複製してVisitorとし、ラベル（ようこそ）とボタンを削除し、ウィジェットを配置します。

@FullNameには担当者検索画面で選択したRowの値が入ってきます。呼び出しボタンでメールアドレスが必要になるので@PrimaryEmailは隠し項目として配置しています。

SCRIPTS [+] > Client CREATE SendEmailMessageにRenameします。

function sendEmailMessage() {
  var mailaddress = app.pages.Visitor.descendants.mailaddress.text;
  var company = app.pages.Visitor.descendants.company.value;
  var name = app.pages.Visitor.descendants.name.value;
  var persons = app.pages.Visitor.descendants.persons.value;
  console.log(mailaddress);
  
  var to = mailaddress;
  var subject = '受付にお客様が来ています。';
  var body = '受付に' + company + 'の' + name + 'さんが' + persons + '名で来られました。';
  console.log(body);
  google.script.run.sendEmail(to, subject, body);
  
  app.pages.Visitor.descendants.company.value = null;
  app.pages.Visitor.descendants.name.value = null;
  app.pages.Visitor.descendants.persons.value = null;
  app.showPage(app.pages.Top);
}

SCRIPTS [+] > Server CREATE SendEmailにRenameします。

function sendEmail(to, subject, body) {
  try {
    MailApp.sendEmail({
      to: to,
      subject: subject,
      htmlBody: body
    });
    return;
  } catch(e) {
    console.error(JSON.stringify(e));
  }
}

担当者を選択したらVisitor画面に遷移するようにします。
Property Editor > Events > OnClick : Navigation to Page... > Visitor

最後にPREVIEWで確認してみましょう。

• 担当者検索画面の検索結果、行を選択して来訪者情報画面に遷移すること
• FullName,PrimaryyEmail(隠し)の値が取得できていること
• 呼び出しボタンでメールが届くこと
• Top画面に遷移すること

#最後に
ありがとう。さようなら。南無南無。

#参考記事
https://developers.google.com/appmaker/templates/people-viewer?hl=ja
https://developers.google.com/appmaker/samples/email?hl=ja
https://tonari-it.com/app-maker-query-filters/