こんにちは、G-genで営業をしている石川です。当記事では、Google Cloud(旧称 GCP)のノーコードツールである AppSheet でアプリを作ってみた！シリーズとして見積承認アプリを作ってみたのでご紹介いたします。
はじめに
普段、皆さまの社内では承認フローはどのような仕組みとなっておりますでしょうか？！ チャットで依頼をしたり、別のサービスでワークフローを作成したり、さまざまなケースが分かれるのではないでしょうか。
今回は AppSheet で見積承認をテーマとして、依頼内容の作成から承認者が行う承認機能を追加するところまでを表現してみましたのでご紹介したいと思います。
データの作成
まずはGoogle Sheetsをデータソースとして、2つのデータテーブルを作成していきます。 今回は、「申請内容」と「ユーザー」のそれぞれのシートにカラムとして必要な値を入力していきます。
テーブルの作成
- 申請内容シート
承認プロセスにおいて申請内容に必要なカラム名を入力します。
- ユーザーシート
こちらは、アプリ使用者であるユーザー情報として入力します。
アプリの作成
Sheetsのデータが準備できたら、 AppSheet 上でアプリの作成をしていきます。 Sheetsの[拡張機能] → [AppSheet] → [アプリを作成]で進めると、作成したSheetsのデータをもとに AppSheet が立ち上がります。
以下のとおりアプリが立ち上がりました。
しかし、「申請内容」と「ユーザー」２つのシートを作成したはずですが、「ユーザー」シートが反映されておりません。
まずは、「ユーザー」シートを追加したいと思います。
「＋」の Add new dataから下図のとおりデータソースを選択します。
今回のデータソースであるGoogle Sheetsから対象のソースを選択します。
対象のシートである「ユーザー」を選択の上、 Add This Tableで追加します。
データの修正
データの作成が完了したら、次に取り込んだデータの修正をしていきます。
「TYPE」「KEY?」「LABEL?」の修正
「TYPE」,「KEY?」,「LABEL?」を修正します。
「TYPE」の説明として一部ですが、以下のようなケースで使います。
Dateは日付を選択できるようにする場合。
Enumは複数選択用のリスト化したい場合。
LongTextは複数行の長いテキスト入力の場合(Textは1行のみの入力)。
「KEY?」と「LABEL?」は選択された値が代表のレコードとして、利用するための項目です。
「SHOW」「EDITABLE?」「REQUIRE?」の修正
次に、「SHOW」,「EDITABLE?」,「REQUIRE?」を修正します。
これらの設定はアプリの操作感に影響する項目となります。
SHOWはアプリ上に表示するかどうかを設定する。EDITABLE?は編集可否を設定する。REQUIRE?は入力必須項目であるかを設定する。
実際のアプリが完成したイメージをしながら修正していきましょう！
Initial valueの設定
各カラム名の編集画面あるいは、「INITIAL VALUE」から直接修正する事ができます。
今回は、以下のように各カラムを修正しました。
依頼日 = Today()
名前 = useremail()
所属 = [名前].[所属]
上司 = [名前].[上長名]
ちなみにカッコ[]をドット(.)で繋ぐ事で先頭のカッコに対して後ろのカッコがRefという参照関係をもち Initial value (初期値)として自動設定された状態となります。
名前に”いしかわ”を選択するとSheetsで予め設定した上司の名前(すずき)が自動入力されます。
「 EDITABLE?」の修正
上司コメントとステータスには管理者権限がないと編集できない設定を行います。
編集ボタンからUpdate Behaviorの Editable?に表示されたフラスコマークから設定する事ができます。
「Editable?」に以下を入力します。
any(select(ユーザー[管理者],[email]=useremail()))
ここまで設定すると、申請を行う画面が作成できました。
Actionsの作成
次に、アプリ上で操作する挙動の設定を行っていきたいと思います。
ステータスを承認に変える
New Actionを選択すると以下のようにアクション候補をサジェストしてくれます。
今回は Create a new action for 申請内容から新規アクションを作成していきます。
下図のようにAction内容を作成しました。
Action Name= ステータス承認For a record of this table= 申請内容(シート名)Do this= デフォルトのままSet these colums= ステータス(カラム名)、承認(アクション後の表示したいステータス)
ステータスを否認に変える
承認があれば当然、否認もあるので承認同様にアクションを作成します。
１つのアクションで承認と否認のアクションは設定できないため、必要な分だけアクションを作成する必要があります。
アクションを設定することで、申請した見積承認に対して承認、否認のアクションを行う事ができるようになりました。
Appearanceの設定
次に、Appearanceの設定ですが、先ほど作成したアクションのアイコンが同じのため、すこし見づらいかと思います。
これだと、否認したつもりが承認を選択してしまうケースも発生するかもしれませんので、視覚的にアイコンのデザインを変更し見やすいインターフェースにしたいと思います。
作成したアクションのAppearanceにあるAction iconで各アクションに対するアイコンの設定ができます。
それぞれのアイコンが変わりました。
Viewsの設定
申請内容のViewの設定をしていきます。 Viewsでは、アプリの操作画面のインターフェースを整えることができます。
ここまでの手順だと下図のように何の申請なのかが不明です。
今の状態だと、申請者である”いしかわ”から申請したのに上司の名前が表示されていますので、わかりやすいリストの表示に変えていきます。
以下のように各項目を修正します。
Group by= 申請者の名前
Primary header= 顧客
Secondary header= 案件種類
Summary column= 依頼日
これらの設定で申請内容がわかりやすくなりました。
さいごに
今回は、見積承認アプリを作成しました。 プログラミング言語は扱えないので、ノーコードで開発できるとノンエンジニアでもワークフローが作成できますね。 今後は AppSheet に関して機能やアプリ作成方法など発信していきます。
