ウィジェットの作成
ウィジェット機能を使用すると、CRMにUIコンポーネントを直接組み込み、外部サービスのアプリケーションからのデータを使用して、要件に従って処理を実行できます。
ウィジェットの作成
Zoho CLIをインストールしたら、独自のウィジェットを作成できます。
ステップ1:
CLIをインストールしたら、このコマンドを実行して新しいプロジェクトを作成してください。
$ zet init
ステップ2:
Zohoサービスを選択し、作成するウィジェットの名前を入力してください。この場合は、サービスとしてZoho CRMを選択してください。
サンプルプロジェクトがそれぞれのフォルダー/ディレクトリーに作成されます。
ステップ3:
サンプルプロジェクトを開くには、次のコマンドを実行してください。
cd {Project_name}
これで、ウィジェットのUIコンポーネントの設計と組み込みを開始できます。
注:
- ウィジェットのHTMLファイルは、デフォルトで「widget.html」という名前のアプリフォルダーにあります。
ステップ4:
widget.htmlファイルには、ウィジェットの構造、設計、コンポーネントが含まれています。ウィジェットでZoho CRM APIを使用するには、JS SDKで提供されているAPIヘルパーを使用できます。
注:
- 必要なjsファイルとスタイルシートを作成することで、ウィジェットに設計と機能を追加できます(オプション)。
ステップ5:
ウィジェットを作成したら、ウィジェットをローカルでホストしてテストできます。
ウィジェットをローカルでホストするには:
$ zet run
ウィジェットをテストして問題が見つからなかった場合は、ウィジェットをパッケージ化して、ウィジェットを内部または外部でホストできます。
リスナーの登録
コンテキストデータをウィジェットに渡す必要がある場合は、適切なイベントに登録する必要があります。イベントの登録とは、アプリケーションによって特定のイベントがトリガーされたときに実行される関数を定義することです。イベントは、ブラウザーまたはユーザーが実行する処理です。次に、一部の予定の例を示します。
- DialerActive - ソフトフォンのウィンドウが切り替わるたびにトリガーされます。
- Dial - ZohoCRM内のCallアイコンがクリックされたときにトリガーされます。
- PageLoad - エンティティーページ(詳細ページ)がロードされるたびにトリガーされます。
以下のサンプルコードを使用して、ウィジェットのPageLoadイベントに登録できます。
ZOHO.embeddedApp.on("PageLoad",function(data){
console.log("Page Loaded with data");
console.log(data);
})
以下のコードスニペットを使用して、ウィジェットを初期化し、CRMアプリケーションのイベントのリスニングを開始します。
ZOHO.embeddedApp.init()
ZOHO.CRM.CONFIG.getCurrentUser()は、名前、ID、役職、権限などのユーザー情報を返すAPIです。APIを呼び出すコードは次のとおりです。
ZOHO.CRM.CONFIG.getCurrentUser().then(function(data){
console.log(data);
});
Githubページには、APIヘルパー、JS SDK、いくつかのウィジェットのサンプルがあります。