IT Hands-on Lab

【Google AppSheet】フロー履歴&ファイル添付対応ワークフロー申請アプリ3

前の記事の続きになります。
ノーコード開発ツール「Google AppSheet」(データはGoogleスプレッドシートで管理)による、フロー履歴・ファイル添付に対応したワークフロー申請アプリの作成例を紹介します。

操作環境：

OS：Windows 11
Webブラウザー：Google Chrome

使用プラン：Google Workspace Business Starter(AppSheet Core)(*)
*AppSheetのライセンスの種類毎の機能は、公式記事に掲載されています
アプリ使用環境：

OS：Android
アプリ：Google AppSheet

アプリ作成:Views等
アプリ作成:Automation
アプリ全体確認・デプロイ・共有
おわりに

アプリ作成:Views等

AppSheetのアプリの画面設定を進めます。

申請前

[申請TBL]という既存のViewを流用して設定します。
左端アイコンの[Views]を選択し、[申請TBL]を選択します。
以下の通り設定します。

View name：申請前
For this data：申請TBL_申請前
View type：deck
Position：first
View Options＞Sort by：申請No(Ascending)
View Options＞Primary header：一覧表示_1
View Options＞Secondary header：一覧表示_2
View Options＞Summary Column：ステータス
View Options＞Actions：申請、Edit、Delete
Display＞Icon：(user-edit黒)

申請取消し

左メニューの[申請前]の右にある三点マークから[Duplicate]を選択します。
以下の通り設定します。

View name：申請取消し
For this data：申請TBL_申請取消し
Position：next
View Options＞Summary Column：None
View Options＞Actions：申請取消し
Display＞Icon：(user-times黒)

処理待

左メニューの[申請取消し]の右にある三点マークから[Duplicate]を選択します。
以下の通り設定します。

View name：処理待
For this data：申請TBL_処理待
Position：middle
View Options＞Primary header：一覧表示_3
View Options＞Actions：承認、差戻し、否認
Display＞Icon：(user-check黒)
Display＞Show if：IN(USEREMAIL(), ユーザーMST[Manager])
*アプリユーザーが[ユーザーMST]のManagerに該当する場合はこのメニューを表示します

処理済

左メニューの[処理待]の右にある三点マークから[Duplicate]を選択します。
以下の通り設定します。

View name：処理済
For this data：申請TBL_処理済
Position：later
View Options＞Order by：申請No(Descending)
View Options＞Group by：申請部署(Ascending)
View Options＞Group aggregate：Count

図表8-4の続きです。以下の通り設定します。

View Options＞Summary Column：ステータス
View Options＞Actions：(何も設定しない)
Display＞Icon：(lock-alt黒)
Display＞Show if：(何も設定しない)

閲覧

左メニューの[処理済]の右にある三点マークから[Duplicate]を選択します。
以下の通り設定します。

View name：閲覧
For this data：申請TBL_閲覧
Position：last
Display＞Icon：(search黒)

Format rules

承認期限に関する警告表示を設定します。
左端アイコンの[Views]から[Format rules]を選択し、[Add Format Rule]を選択します。
[Create a new format rule]を選択します。
以下の通り設定します。

Rule name：承認期限満了
For this data：申請TBL
If this condition is true：AND(OR([ステータス]="下書き",[ステータス]="差戻し",[ステータス]="処理待"),AND(ISNOTBLANK([承認期限]),[承認期限]<=TODAY()))
Format these columns and actions：承認期限
Visual Format＞Icon：exclamation-circle黒
Visual Format＞Highlight color：red
Visual Format＞Text color：red

*[ステータス]が"下書き"か"差戻し"か"処理待"で、[承認期限]がブランクではなく本日以前の場合、[承認期限]を赤色で表示します

インラインテーブル調整

工程6から工程8のアプリ設定を行っている間に、[Data]の[申請TBL]のリレーションシップ関連の(申請IDが一致するフロー履歴TBLや添付ファイルTBLのレコードをリストする)項目が自動生成されます。これらはインラインテーブルとしてアプリ上に表示されます。
[Views]メニューの左下にある[SYSTEM GENERATED]よりインラインテーブルの表示項目の調整を実施できます。

フロー履歴TBLのインラインテーブルについては、左下メニューの[フロー履歴TBL＞フロー履歴TBL_Inline]を選択します。
以下の通り設定します。

View Options＞Order by：作成日時(Ascending)
View Options＞Column order：作成日時、アクション、コメント、アクション者

添付ファイルTBLのインラインテーブルについては、左下メニューの[添付ファイルTBL＞添付ファイルTBL_Inline]を選択します。
以下の通り設定します。

View Options＞Order by：ファイル(Ascending)
View Options＞Column order：ファイル、メモ、作成日時、作成者、更新日時、更新者

アプリ作成:Automation

[Automation]の設定の前に、通知メールに付加する[アプリで確認する]ボタンのURLで使用する、アプリのIDを確認します。
左端アイコンの[Settings]を選択し、左メニューの[Integrations]を選択し、[App Id]の値を控えておきます。

申請No自動採番

申請データの新規作成保存時、申請Noを自動採番する処理を追加します。

左端アイコンの[Automation]を選択し、[Create my first automation]を選択します。
[Create a new bot]を選択します。
[Configure event]を選択します。
[Create a new event]を選択します。
右側に設定画面が表示されたら、以下の通り設定します。

Event name：申請TBLデータ追加時
Table：申請TBL
Data change type：Adds

また、追加したAutomationの名前が[New Bot]になっているので、三点マークから[Rename]を選択し、[申請No自動採番]に変更します。

[Add a step]を選択します。
[Step name]に[申請No自動採番]と入力し、[Create a new step]を選択します。
[Run a data action]を選択します。
右側に設定画面が表示されたら、以下の通り設定します。

Task：Set row values
Set these column(s)＞申請No：IF(ISBLANK(申請TBL[申請No]),1,MAX(申請TBL[申請No])+1)

処理依頼メール送信

申請者が[申請]アクションを選択した時、承認者(CC:申請者)に処理依頼メールを送信する処理を追加します。

左メニューの[+]アイコンを選択します。
[Create a new bot]を選択します。
[Configure event]を選択します。
[Event name]に[ステータスが処理待に更新されたとき]と入力し、[Create a new step]を選択します。
右側に設定画面が表示されたら、以下の通り設定します。

Table：申請TBL
Data change type：Updates
Condition：AND([ステータス]="処理待",[_THISROW_BEFORE].[ステータス]<>[_THISROW_AFTER].[ステータス])

また、追加したAutomationの名前が[New Bot]になっているので、三点マークから[Rename]を選択し、[処理依頼メール送信]に変更します。

[Add a step]を選択します。
[Step name]に[処理依頼メール送信]と入力し、[Create a new step]を選択します。
右側に設定画面が表示されたら、以下の通り設定します。

Task：Send an email
Email Type：Custom template
To：[承認者]
Email Subject：【WF申請】処理依頼（申請No：<<[申請No]>>、申請日：<<[申請日]>>、申請者：<<LOOKUP([申請者], "ユーザーMST", "ID", "DisplayName")>>）
Other email parameters＞CC：[申請者]
Other email parameters＞Reply To：noreply@appsheet.com
Other email parameters＞Customize "From" name："AppSheet WF申請自動通知"

[Email Body]は以下を設定します。

<div style="line-height: 1.2;">
<p style="margin: 4px 0;">以下のワークフロー申請の確認および処理をお願いいたします。</p>
<p style="margin: 4px 0;">■申請部署：<<[申請部署]>></p>
<p style="margin: 4px 0;">■承認期限：<<[承認期限]>></p>
<p style="margin: 4px 0;">■件名：<<[件名]>></p>
<p style="margin: 4px 0;">■申請内容：<br><<[申請内容]>></p>
<p style="margin: 4px 0;">■申請者コメント：<br><<[コメントtmp]>></p>
<p><a href="https://www.appsheet.com/start/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx#control=申請TBL_処理待_Detail&row=<<[申請ID]>>" style="background-color: #4285f4; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-weight: bold;">アプリで確認する</a></p>
</div>

*[アプリで確認する]ボタンのURL内の「xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx」は図表9-1で控えたアプリIDの値です

差戻し通知メール送信

承認者が[差戻し]アクションを選択した時、申請者に差戻し通知メールを送信する処理を追加します。

左端メニューの[処理依頼メール送信]の右の三点マークを選択し、[Duplicate]を選択します。
複製した設定の三点マークから[Rename]を選択し、[差戻し通知メール送信]に変更します。
EVENTを以下の通り設定します。

Event name：ステータスが差戻しに更新されたとき
Condition：AND([ステータス]="差戻し",[_THISROW_BEFORE].[ステータス]<>[_THISROW_AFTER].[ステータス])

PROCESSを以下の通り設定します。

プロセス名：差戻し通知メール送信
To：[申請者]
Email Subject：【WF申請】差戻し通知（申請No：<<[申請No]>>、申請日：<<[申請日]>>、承認者：<<LOOKUP([承認者], "ユーザーMST", "ID", "DisplayName")>>）
Other email parameters＞CC：(何も設定しない)

[Email Body]は以下を設定します。

<div style="line-height: 1.2;">
<p style="margin: 4px 0;">以下のワークフロー申請が差戻されました。修正をお願いいたします。</p>
<p style="margin: 4px 0;">■申請部署：<<[申請部署]>></p>
<p style="margin: 4px 0;">■承認期限：<<[承認期限]>></p>
<p style="margin: 4px 0;">■件名：<<[件名]>></p>
<p style="margin: 4px 0;">■申請内容：<br><<[申請内容]>></p>
<p style="margin: 4px 0;">■承認者コメント：<br><<[コメントtmp]>></p>
<p><a href="https://www.appsheet.com/start/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx#control=申請TBL_申請前_Detail&row=<<[申請ID]>>" style="background-color: #4285f4; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-weight: bold;">アプリで確認する</a></p>
</div>

*[アプリで確認する]ボタンのURL内の「xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx」は図表9-1で控えたアプリIDの値です

処理済通知メール送信

承認者が[承認]または[否認]アクションを選択した時、申請者に処理済通知メールを送信する処理を追加します。

左端メニューの[差戻し通知メール送信]の右の三点マークを選択し、[Duplicate]を選択します。
複製した設定の三点マークから[Rename]を選択し、[処理済通知メール送信]に変更します。
EVENTを以下の通り設定します。

Event name：ステータスが承認済か否認済に更新されたとき
Condition：AND(OR([ステータス]="承認済",[ステータス]="否認済"),[_THISROW_BEFORE].[ステータス]<>[_THISROW_AFTER].[ステータス])

PROCESSを以下の通り設定します。

プロセス名：処理済通知メール送信
Email Subject：【WF申請】処理済通知：<<[ステータス]>>（申請No：<<[申請No]>>、申請日：<<[申請日]>>、承認者：<<LOOKUP([承認者], "ユーザーMST", "ID", "DisplayName")>>）

[Email Body]は以下を設定します。

<div style="line-height: 1.2;">
<p style="margin: 4px 0;">以下のワークフロー申請が<<[ステータス]>>となりました。</p>
<p style="margin: 4px 0;">■申請部署：<br><<[申請部署]>></p>
<p style="margin: 4px 0;">■承認期限：<br><<[承認期限]>></p>
<p style="margin: 4px 0;">■件名：<br><<[件名]>></p>
<p style="margin: 4px 0;">■申請内容：<br><<[申請内容]>></p>
<p style="margin: 4px 0;">■承認者コメント：<br><<[コメントtmp]>></p>
<p><a href="https://www.appsheet.com/start/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx#control=申請TBL_処理済_Detail&row=<<[申請ID]>>" style="background-color: #4285f4; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-weight: bold;">アプリで確認する</a></p>
</div>

*[アプリで確認する]ボタンのURL内の「xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx」は図表9-1で控えたアプリIDの値です

日次リマインダメール送信

ステータスが処理待かつ承認期限が当日以前の場合、毎朝8時、承認者(CC:申請者)に処理依頼のリマインダメールを送信する処理を追加します。

左メニューの[+]アイコンを選択します。
[Create a new bot]を選択します。
[Configure event]を選択します。
[Event name]に[毎朝8時、処理待で承認期限が当日以前]と入力し、[Create a new step]を選択します。
右側に設定画面が表示されたら、以下の通り設定します。

Event source：Scheduled
Schedule：Daily
Time：8:00am
Time Zone：(GMT+09:00) Tokyo Standard Time
For Each Row in Table：(オンにする)
Table：申請TBL
Filter Condition：AND([ステータス]="処理待",[_THISROW_BEFORE].[ステータス]<>[_THISROW_AFTER].[ステータス])

また、追加したAutomationの名前が[New Bot]になっているので、三点マークから[Rename]を選択し、[日次リマインダメール送信]に変更します。

[Add a step]を選択します。
[Step name]に[リマインダメール送信]と入力し、[Create a new step]を選択します。
右側に設定画面が表示されたら、以下の通り設定します。

Task：Send an email
Email Type：Custom template
To：[承認者]
Email Subject：【リマインダ】【WF申請】処理依頼（申請No：<<[申請No]>>、申請日：<<[申請日]>>、申請者：<<LOOKUP([申請者], "ユーザーMST", "ID", "DisplayName")>>））
Other email parameters＞CC：[申請者]
Other email parameters＞Reply To：noreply@appsheet.com
Other email parameters＞Customize "From" name："AppSheet WF申請自動通知"

[Email Body]は以下を設定します。

<div style="line-height: 1.2;">
<p style="margin: 4px 0;">以下のワークフロー申請の承認期限が超過または間近となっています。至急確認および処理をお願いいたします。</p>
<p style="margin: 4px 0;">■申請部署：<<[申請部署]>></p>
<p style="margin: 4px 0;">■承認期限：<<[承認期限]>></p>
<p style="margin: 4px 0;">■件名：<<[件名]>></p>
<p style="margin: 4px 0;">■申請内容：<br><<[申請内容]>></p>
<p><a href="https://www.appsheet.com/start/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx#control=申請TBL_処理待_Detail&row=<<[申請ID]>>" style="background-color: #4285f4; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-weight: bold;">アプリで確認する</a></p>
</div>

*[アプリで確認する]ボタンのURL内の「xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx」は図表9-1で控えたアプリIDの値です

アプリ全体確認・デプロイ・共有

各メニューの詳細画面に表示されるインラインテーブルの表示名がユーザーに分かり辛い値になっているため、調整します。
左端アイコンの[Data]から[申請TBL]を選択し、 [Related フロー履歴TBLs]と[Related 添付ファイルTBLs]の[DISPLAY NAME]を以下の通り設定します。

Related フロー履歴TBLs：フロー履歴
Related 添付ファイルTBLs：添付ファイル

各メニューの詳細画面に表示されるインラインテーブルのデータが5行分までしか表示されないため、調整します。
左端アイコンの[Views]を選択し、左下メニューの[SYSTEM GENERATED]を選択し、申請TBL用スライスの詳細画面(以下)を選択し、[Nested row display]を5から10に変更します。

申請TBL_閲覧＞申請TBL_閲覧_Detail
申請TBL_処理済＞申請TBL_処理済_Detail
申請TBL_処理待＞申請TBL_処理待_Detail
申請TBL_申請取消し＞申請TBL_申請取消し_Detail
申請TBL_申請＞申請TBL_申請_Detail

アプリを他のユーザーに共有する前に、各データに対して[Regenerate schema]を
行い、エラーがないことを確認します。アプリを保存し、右側のアプリ画面で動作確認を行います。
ただし、E-mailの送信はデプロイしないと正常に動作しませんので、デプロイを実施します。
アプリのデプロイと共有の手順は、以前紹介したAppSheetの備品管理アプリと同じですので、その記事の工程10の図表10-4から10-7をご覧ください。