前回の続き

社内向けの管理画面を、柔軟かつ速く作成することができるローコードツールである Querier(クエリア) を使用して社内名簿管理画面を作成することにしました。

前回はデータ連携や実際に画面にデータを表示する以下の手順をまとめ、投稿しました。

• データ連携　
• 画面作成
• データ表示

前回作成した画面

現段階では、クエリア上でGoogleSpreadsheetのデータを確認することしかできないので、今回はユーザーの追加や更新作業を行えるよう、以下の操作の実装方法について記載します。

• 追加
• 更新
• 削除
• 検索

ユーザーの追加

テーブルのデータにユーザーを追加する機能を実装します。
氏名やフリガナの入力欄を用意し、追加ボタンをクリックすることでデータを追加するイメージです。
①まずは画面のレイアウトを整えます。
コンポーネントの「カラム」を選択し、画面中央にドラッグ&ドロップします。

②データをカラムの左側にドラッグ&ドロップします。

③カラムの左側にデータが移動しました。

④ここで、カラムの右側にユーザー追加のコンポーネントを追加していきます。
ユーザー情報用のインプット×3、ラジオボタン×1、ユーザー追加用のボタン×1 をドラッグ&ドロップします。

⑤追加したコンポーネントをクリックし、インプット×3、ラジオボタン×1 に対して、エディター画面で以下のように詳細を入力します。(ボタンは次の工程で設定)

• ラベル・・・画面に表示する名前
• タイプ・・・インプットのタイプ(Text、Email、Numberなど)
• 必須・・・必須項目か否か
• パターン・・・Email、URLなどを選択でき、入力値がこのパターンから外れているとエラーメッセージがでる
• Values・・・ラベルの選択肢
• Default value・・・初期値

また、今回は設定しませんでしたが、Min length、Max length(最小値、最大値)を設定することで、入力のミスを減らす工夫もできます。

⑥⑤で設定したユーザーの情報を追加するデータフローを作成します。
このデータフローをボタンに割り当てることで、追加ボタンが機能します。
まず、データフローリストの新規作成をクリックし、GoogleSpreadsheetのアイコンをクリックします。この時、データフローの名前もappendに変更しておきます。

⑦データフローのアクションでAppend valuesを選択し、シート名を入力します。
次にパラメーターを追加するをクリックして、データのどの列にどのインプットの値を追加するか設定します。

パラメーターの上段(key)にはデータの列名、下段(value)には⑤で設定したインプットの値を設定します。

さらに、成功時に実行するアクションを設定します。

イベントを追加するをクリックし、実行するアクションにデータフローの実行、データフローにdataflow1を設定します。
これを設定することで、ユーザー追加ボタンを押下後、リアルタイムで追加した情報がテーブルに反映されるようになります。

⑧ボタンの詳細を設定します。
ボタンのコンポーネントをクリックし、エディター画面で以下のように入力します。

無効にする条件には氏名、フリガナ、メールアドレス、属性のインプットのどれか1つでも空欄の時ボタンを押せないようにするという条件を入力しました。

最後に⑦で作成したデータフローをボタンに設定します。
イベントを追加するをクリックします。

実行するアクションにデータフローの実行、データフローに⑥⑦で作成したappendを設定します。

⑨ユーザー追加ボタンが完成しました。右上のプレビューボタンからプレビュー画面に遷移して、動作確認を行います。

まずはエラーの確認から行います。
氏名、メースアドレス、属性に値を入力し、フリガナだけ空欄にしてみたところ、追加ボタンがグレーになり、クリックできなくなっています。
必須項目を空欄にしたことで、エラーの文言が表示されたのと、
ボタンの無効にする条件が機能し、ボタンが押せなくなりました。

正常操作の確認を行います。
上記の画面のままフリガナ欄に値を入力したところ、エラーの文言が消え、ボタンがクリックできるようになりました。

追加ボタン押下後、左側のテーブルに追加した情報が反映されました。

GoogleSpreadsheetも確認すると、問題なくデータが反映されていました。

メールアドレスの重複を禁止する

社内名簿の場合、ユーザーIDやメールアドレスなど一意のデータとして管理したい項目がいくつか存在すると思います。それを考慮して、ユーザーを新しく追加する際、すでにデータに存在しているメールアドレスは登録できない仕様を追加しました。

①データフローのappendにアクションを追加します。
action1の上の＋ボタンをクリックし、GoogleSpreadsheetのアイコンをクリックします。

②データフローのアクションでGet valuesを選択し、シート名を入力します。
次にフィルターを追加するをクリックして、フィルターの条件に==、keyにメールアドレス、valueに{{ input3.value }}を入力します。

上記でやっていることは、GoogleSpreadsheetでイメージをすると以下のようなイメージです。全体の名簿を、メールアドレス列が{{ input3.value }}と同じものでフィルターしています。

③次に②のフィルターの結果を判定するコードを入力します。
action2とaction1の間の＋ボタンをクリックし、JavaScriptのアクションを挿入します。

④スクリプト枠内に以下のコードを入力します。

if ({{ action2.data.length }} !== 0) {
throw Error("すでに存在しています。")
}

追加したいメールアドレスでフィルターした結果が、0行の時は同じメールアドレスが存在していないということなので、何もしない。
1行以上の時は同じメールアドレスが存在している=重複しているのでエラーメッセージを表示するコードになっています。

⑤メールアドレスの重複をNGにするデータフローが完成しました。
試しに同じメールアドレスを追加しようとすると登録できず、編集画面でエラーが表示されています。

ユーザーの更新

テーブルのユーザー情報を更新する機能を実装します。
更新の流れは、テーブルの中から更新したい行をクリック→インプットに新しい情報を入力→更新ボタンを押下する というイメージです。
①追加の作業と同様に、インプット×3、ラジオボタン×1、ユーザー更新用のボタン×1 を追加インプットの上にドラッグ&ドロップします。
また、追加と更新のレイアウトを区切るためにボーダー×1を更新ボタンの下に挿入しました。

②追加したコンポーネントをクリックし、インプット×3、ラジオボタン×1 に対して、エディター画面で以下のように詳細を入力します。(ボタンは次の工程で設定)

ユーザー追加との変更点はDefault valueに{{ table1.selectedRow.data.〇〇(列名) }}を設定していることです。
これで、テーブル内の更新したい行をクリックすると、その行の項目が自動でインプット欄に表示される設定になります。

例）テーブルの田中太郎の行をクリックするとインプット欄に田中太郎のデータが自動表示される。

③更新ボタンに設定するデータフローを新しく作成します。
データフローリストの新規作成をクリックし、GoogleSpreadsheetのアイコンをクリックします。この時、データフローの名前をupdateに変更しておきます。

④データフローのアクションでUpdate valuesを選択し、シート名を入力します。
次にユーザー追加時と同様に、パラメーターを追加するをクリックして、データのどの列にどのインプットの値を追加するか設定します。

さらに、フィルターを追加するをクリックして、フィルターの条件に==、keyに氏名、valueに{{ table1.selectedRow.data.氏名 }}を入力します。
このフィルターを追加することで、現在選択しているテーブルの行に対してインプットの値を上書き(更新)する処理が動きます。

最後に、ユーザー追加時と同様、成功時に実行するアクションを設定します。
イベントを追加するをクリックし、実行するアクションにデータフローの実行、データフローにdataflow1を設定します。
これを設定することで、ユーザー更新ボタンを押下後、リアルタイムで更新した情報がデータに反映されるようになります。

⑤④で作成したデータフローをボタンに割り当てます。
ボタンのコンポーネントをクリックし、ラベルを更新に、イベントを追加するをクリックし、実行するアクションをデータフローの実行、データフローをupdateに設定します。
※更新ボタンの色は、わかりやすくするために追加ボタンと違う色を設定しました。

⑥ユーザー更新ボタンが完成しました。右上のプレビューボタンからプレビュー画面に遷移して、動作確認を行います。

試しに、3行目の佐藤健さんのフリガナをサトウケン→サトウタケルに変更して更新ボタンを押下します。

問題なく更新できました。

ユーザーの削除

テーブルのユーザーを削除する機能を実装します。
削除の流れは、ユーザー更新と同様に、テーブルの中から削除する行をクリックし、削除ボタンを押下するイメージです。
ただし、ワンボタンで削除できてしまうと誤操作の恐れがあるため、ポップアップを挟んで削除する方法を採用します。
①コンポーネントからモーダルをドラッグ&ドロップし、更新ボタンの下に挿入します。

②モーダルをクリックするとポップアップが表示されるので、テキストとボタンをドラッグ&ドロップで挿入します。

③挿入したテキストをクリックし、エディターのテキストに{{ table1.selectedRow.data.氏名 }}を削除してよろしいですか？と入力します。
{{ table1.selectedRow.data.氏名 }}で現在テーブルで選択しているユーザーの氏名が表示されます。
確認のメッセージなのでサイズはlargeに変更しました。

④削除ボタンに設定するデータフローを新しく作成します。
データフローリストの新規作成をクリックし、GoogleSpreadsheetのアイコンをクリックします。この時、データフローの名前をdeleteに変更しておきます。

⑤データフローのアクションでDelete valuesを選択し、シート名を入力します。
次にフィルターを追加するをクリックして、フィルターの条件に==、keyに氏名、valueに{{ table1.selectedRow.data.氏名 }}を入力します。
現在テーブルで選択している氏名でフィルターをかけることで、その行の削除を行うことができます。

さらに、成功時に実行するアクションを設定します。
イベントを追加するをクリックし、実行するアクションにデータフローの実行、データフローにdataflow1を設定します。
これを設定することで、削除ボタンを押下後、リアルタイムでデータが削除されたテーブルが反映されるようになります。

⑥⑤で作成したデータフローを削除ボタンに設定します。
モーダル内のボタンをクリックし、ラベルに削除、イベントを追加するをクリックし、実行するアクションにデータフローの実行、データフローにdeleteを設定します。

⑦最後にモーダルの設定を行います。
モーダルをクリックし、エディターのボタンラベルに{{ table1.selectedRow.data.氏名 }}を削除するを設定します。これで、テーブルで現在選択しているユーザーの氏名がボタンに表示されるようになります。
タイトルには削除確認画面と入力します。ポップアップ内のタイトルを変更することができます。
※モーダルの色は分かりやすいように赤色に変更しました。

⑧ユーザー削除ボタンが完成しました。右上のプレビューボタンからプレビュー画面に遷移して、動作確認を行います。

試しに、テスト太郎さんを選択し、「テスト太郎を削除する」を押下します。

確認のポップアップが表示されたので、削除ボタンを押下します。

削除が完了し、ポップアップを×ボタンで閉じます。
テーブルを参照するとテスト太郎さんのデータが問題なく削除されていました。

ユーザーの検索

テーブルのユーザーを検索する機能を実装します。
検索欄を作成し、氏名を入力すると、一致するデータのみがテーブルに表示される というイメージです。
①コンポーネントからインプットをドラッグ&ドロップでテーブルの上に挿入します。
エディターのラベルに氏名で検索と設定します。

②現在テーブルを表示しているデータフローにフィルターの機能を追加します。
dataflow1をクリックします。

③action1をクリックし、フィルターを追加をクリックします。
フィルターの条件にcontains、keyに氏名、valueに{{ input7.value }}を設定します。また、左側の変更発生時に自動で実行にチェックを入れます。
条件を==でなくcontainsにすることで、苗字だけ一致、名前だけ一致などの部分一致に対応することができます。
※{{ input7.value }}は①で追加した検索欄のインプット

④検索機能が完成しました。上のプレビューボタンからプレビュー画面に遷移して、動作確認を行います。

試しに、検索欄に田中と入力すると、下のテーブルには氏名が田中のユーザーのみ表示されました。

検索を終了したいときは、検索欄を空欄にすると元のテーブル全体が表示されます。

完成

社内名簿管理画面が完成しました。

※バランスを整えるために、テーブルの高さを10→20に変更しました。

おわりに

記事を作成するにあたって、参考になるQiitaの記事があまりなかったので、公式のガイドを参考に画面を作成しました。
また、ガイドを読んでもわからなかった箇所は、画面右下の問い合わせチャットから不明な点をすぐに質問でき、丁寧で早急な対応をしていただきました。ありがとうございました。

前回の記事