はじめに

Zoho CRMは標準の画面でも十分使えますが、業務が複雑になると「親レコードを開いて、関連レコードを開いて、さらにその先を開いて」と画面を行き来する手間が増えてきます。今回、あるお客様向けに、顧客まわりの情報を1画面にまとめて検索・閲覧・編集できるカスタムウィジェットを開発しました。この記事では、どんなことができるようになったか、設計でどんな点に気を配ったかを紹介します。

カスタムウィジェットとは

Zoho CRMには、自分で作ったWeb画面をCRMの中に埋め込める「ウィジェット」という仕組みがあります。HTMLとJavaScriptで画面を作り、Zohoが用意しているSDKを通じてCRMのデータを読み書きします。Webタブとして独立した画面にすることも、レコードの詳細ページに関連リストとして埋め込むことも、ホームタブに置くこともできます。標準画面を置き換えるのではなく「業務に合った入口を1つ足す」イメージで、CRM本体の設定や自動化はそのまま活かせます。

よくある課題

1人の顧客に複数の取引があり、その取引ごとにさらに複数の契約や明細が紐づく、という階層の深いデータ構造は多くの業務で見られます。標準画面では関連リストを順にたどる必要があり、電話対応中などに状況を把握するのに時間がかかります。また、複数の担当者が同じレコードを同時に触ってしまい、入力が上書きされる事故も起こりがちです。さらに、外部システム連携のために「選択肢に対応するコード」を別項目に手入力している場合、転記ミスがそのまま連携エラーにつながります。

作ったもの：顧客検索・詳細ウィジェット

検索から詳細まで1画面で完結

ID、氏名、電話番号、ステータス、担当者などで絞り込み検索ができ、結果をクリックすると同じ画面内で詳細に切り替わります。詳細画面は左に顧客の基本情報、右に関連情報のタブという構成で、取引を選ぶとその下に紐づく契約類が種類ごとに一覧で並びます。関連データはまとめて1回で取得する作りにしているので、階層が深くても表示は一度で終わります。

その場で追加・編集

基本情報、関連する各レコード、対応履歴はすべてこの画面から編集できます。新規追加もできるので、電話を受けながら登録し、続けて関連レコードを紐づける、といった流れが画面を移動せずに行えます。追加時には親レコードとの紐づけや担当者、日付などの初期値を自動でセットするため、入力するのは実質的に業務上必要な項目だけです。

レイアウト設定をそのまま使う入力フォーム

入力フォームはZoho CRM側のレイアウト設定から自動で組み立てています。セクション構成、項目の並び、必須かどうか、選択肢の内容はすべてCRMの設定に従うため、CRMに項目を足したり選択肢を増やしたりすれば、ウィジェット側のフォームにもそのまま反映されます。ウィジェットを作り直す必要がないので、運用が始まってからの項目変更にも追従しやすい構造です。

選択リストに連動してコードを自動入力

外部システムとの連携用に、選択リストと対になる「コード」項目を持つケースがあります。これまでは手入力でしたが、選択リストを選ぶと対応するコードが自動で入るようにしました。選択を外せばコードも空になり、対応表にない選択肢を選んだ場合は既存の値を触らない、という挙動にしています。対応表は1か所にまとめてあるので、商材や選択肢が増えたときの追加も1行で済みます。

同時編集を防ぐ編集ロック

誰かが編集を始めると、そのレコードは他のユーザーから編集できなくなり、「◯◯さんが編集中（開始時刻）」と表示されます。ロックは顧客単位で、基本情報・関連レコード・対応履歴のどこを編集していても1つのロックで保護されます。保存またはキャンセルで解除され、万一ブラウザを閉じてしまった場合でも一定時間で自動的に失効するので、ロックが残り続ける心配はありません。ほぼ同時に2人が編集ボタンを押した場合に備えて、ロックを書き込んだ後にもう一度確認してから編集画面を開く作りにしており、保存の直前にも自分のロックが有効かを再確認します。

新規登録

検索画面から直接、新しいレコードを登録できます。登録後はそのまま詳細画面に移るので、初回の問い合わせ対応から登録、関連レコードの追加まで一連の流れで進められます。

設計で気を配った点

表示は「表示名」、保存は「内部値」

Zoho CRMの選択リストは、画面に出る表示名と内部的に保存される値が別々に持てます。運用の途中で表示名だけを変えると、標準画面では新しい名前で見えるのにAPI経由では古い値が返ってくる、ということが起こります。ウィジェットでは内部値を表示名に変換してから画面に出すようにし、標準画面と見え方がずれないようにしました。

失敗したときに固まらない

Web画面からCRMを操作する場合、通信やSDKの都合で応答が返ってこないことがあります。ボタンを押したまま何も起きない状態にならないよう、時間切れを設けてエラーを表示し、ボタンを元に戻すようにしています。地味ですが、現場で「押したのに動かない」と言われないために重要な部分です。

既存の自動化を邪魔しない

ロックの取得・解除のような内部的な更新では、CRM側のワークフローを起動しないようにしています。ウィジェットの都合で通知が飛んだり、承認フローが走ったりしないようにするためです。

導入後の効果

状況を把握するまでの操作が、複数画面の往復から1画面での確認に変わりました。担当者が増えても同時編集による上書きを気にせず作業できるようになり、コードの手入力もなくなったため、外部連携時のエラーも減る見込みです。項目の追加や選択肢の変更はCRMの設定だけで済むので、ウィジェット導入後も運用側で手を入れられる範囲が広いのも利点です。

こんな場合におすすめです

Zoho CRMで、複数のモジュールにまたがる情報を1つの画面で扱いたい、電話や窓口対応の画面を業務に合わせて作りたい、入力ミスを仕組みで防ぎたい、複数人での同時編集を安全にしたい、といったご要望がある場合に、カスタムウィジェットは有効な選択肢です。標準機能で足りない部分だけを作り込むので、Zoho CRM本体の運用はそのまま活かせます。

おわりに

AndSoでは、Zoho CRMの導入支援からウィジェット・関数などの開発まで対応しています。「標準画面では業務に合わない」と感じている部分があれば、お気軽にご相談ください。