コードを使用したコンポーネントの拡張

学習の目的

この単元を完了すると、次のことができるようになります。
  • コードを使用してコンポーネントを作成する状況を判断する。
  • コンポーネントをコーディングするプロセスを説明する。
  • 「コーディングされた」コンポーネントをページまたはフッターに追加する。

独自のコンポーネントのコーディング

すぐに使える標準コンポーネントを簡単に設定できることを見てきました。他方、既成や標準以外の機能をコンソールに追加する必要がある場合はどうすればよいでしょうか? その場合は、コーディングを行います。チームの誰かからオプション機能あるいは虹色ユニコーン (標準にはない独自のコンポーネントですよね?) をコンソールに追加して欲しいと頼まれた場合は、コーディングに取り掛かります。

コードを使うと、コンソールをほぼどの方向にも導くことができます。最初の単元で述べたように、ほぼ何でも作成して、コンソールのヘッダー、フッター、サイドバーなどにプラグインできます。コードは、コンソールの「無限の力」を引き出す要となるものです (まるで自己啓発のようですが……)。

コードのことを知らなくても心配いりません。世の中には喜んで力を貸してくれる開発者がたくさんいますし、Salesforce が一定のコードをすばやく書き上げるためのツールを用意しています。開発者に多少なりとも API や JavaScript の知識があれば、助けてくれるでしょう。

独自のコンポーネントをコーディングする場合は、次のツールを使用します (または開発者に渡します)。
  • Visualforce。コンソールやコンポーネントのデザインを変更する場合のパレットです。Visualforce を使用すると、開発者が Lightning Platform 上で高度なカスタムユーザインターフェースを構築できます。
  • コンソール API。Salesforce コンソールインテグレーションツールキットとも言います (早口で 5 回言ってみてください)。この API を使用すると、開発者がコンソールにプログラムでアクセスして、タブの開閉などの操作を実行できるため、ビジネスプロセスが合理化されます。
  • キャンバス何だか画家の持ち物のようですが、開発者がコンソールに、認証方法を要する外部アプリケーションを統合できます。

開発者がコンソールに何をコーディングするかに関係なく、コードを機能させる簡単なプロセスがあります。開発者でなくても、コードを機能させることができます。どのように行うのでしょうか? 開発者から受け取ったコードファイルを組織またはコンソールにアップロードします。アップロードできれば、役に立ちます。

コンポーネントのコーディングプロセス

コンソールのコンポーネントのコーディングにステップが 5 つしかないことに驚くかもしれません。本当に 5 つだけなんです。コンソールのヘッダー、フッター、サイドバーに表示するコンポーネントをコーディングする機会が無尽蔵にある場合でも、力作のコードをコンソールに配置するときは通常、次の 5 つのステップからなるプロセスに従います。

  1. 開発者が Visualforce ページまたはキャンバスアプリケーションを作成します。
  2. システム管理者が Visualforce ページまたはキャンバスアプリケーションを次のいずれかに追加します。
    • 特定のページにコンテンツを表示するページレイアウト
    • すべてのページにコンテンツを表示するコンソールのフッダー
  3. コンポーネントをページレイアウトに追加するシステム管理者は、次の操作を行います。
    • コンポーネントを表示するヘッダー、フッター、サイドバーを選択する。
    • 複数のコンポーネントをサイドバーに追加するかどうかを選択し、スタック、タブ、アコーディオンのいずれかの形式で配置する。
  4. コンポーネントをフッターに追加するシステム管理者は、次の操作を行います。
    • コンソールのフッターからコンポーネントへのアクセスに使用するボタンのデザインを指定する。
    • ユーザがアクセスに使用する各コンソールにコンポーネントを割り当てる。
  5. システム管理者またはユーザがページレイアウトにアクセスするか、コンソールのフッターにあるボタンをクリックすると、コンポーネントが表示されます。
5 つのステップからなるコンポーネントの作成プロセスを示す画像

コーディングされたコンポーネントをコンソールに追加するプロセスがいかに簡単かがわかったところで、実際にやってみましょう。このプロセスは一杯のコーヒーを淹れるよりも短時間で、カフェインも入っていません。

コンポーネントのページへの追加

マネージャから、ケースのすぐ横に表示する新しいコンポーネントのコーディング業務を指示されたとします。実際にはコードブロックのタグについて何も知らなくても、ここではコーディングの天才を装います。次の数ステップでは、ケースページのコンポーネントのコーディングプロセスに従います。

「Service Cloud の基礎」モジュールの説明に従って Developer Edition 組織にサンプルコンソールをすでに追加し、自身に Service Cloud ユーザライセンスを割り当てている場合は、すぐに実行できます。

まず、コンポーネントのコードを作成してみましょう。

  1. [設定] から、[クイック検索] ボックスに「Visualforce ページ」と入力し、[Visualforce ページ] を選択します。
  2. [新規] をクリックします。コードは次の画面で記述します。ここでは実際にコードを記述しませんが、ここに記載のコードを確認しておきます。 [設定] で Visualforce ページを新規作成する場所のスクリーンショット
  3. [表示ラベル] に、「Test Page (ページのテスト)」と入力します。
  4. [名前] に、「test_page」と入力します。
  5. この例では、何らかのすばらしいコード (ユニコーン?) を記述したことにして、[保存] をクリックします。 [設定] で保存された Visualforce ページ

これでコンポーネントのコードが組織に Visualforce ページとして保存されたため、そのコードをコンソールのケースページにアップロードできます。

  1. [設定] から、[クイック検索] ボックスに「ケース」と入力し、[ページレイアウト] を選択します。
  2. [ケースレイアウト] の横にある [編集] をクリックします。
  3. ページレイアウトエディタの上部で、[カスタムコンソールコンポーネント] をクリックします。 ケースページレイアウトの [カスタムコンソールコンポーネント] リンクのスクリーンショット
  4. 以前に関連リストコンポーネントを追加した [右サイドバー] エリアで、[種別] に移動して [Visualforce ページ] を選択します。 ケースページレイアウトのカスタムコンソールコンポーネントに Visualforce ページを選択する場合のスクリーンショット
  5. [コンポーネント] の下にあるルックアップアイコン (ルックアップアイコン) をクリックます。
  6. [ルックアップ] ダイアログボックスから、[Test Page (ページのテスト)] を選択します。 Visualforce ページの [ルックアップ] ダイアログボックス
  7. [表示ラベル] に「New Component (新規コンポーネント)」と入力し、[高さ] に「50」と入力します。 ケースページレイアウトに Visualforce コンポーネントの表示ラベルと高さを追加する場合のスクリーンショット
  8. ページレイアウトで [保存][保存] の順にクリックします。

では、コンソールで新たにコーディングされたコンポーネントを見てみましょう。

  1. [設定] の [サンプルコンソールに戻る] をクリックするか、アプリケーションメニューから [サンプルコンソール] を選択します。
  2. ケースを選択します。ナビゲーションタブから [ケース] を選択する必要がある場合もあります。
ケースのすぐ横に Visualforce コンポーネントが表示されているコンソールのスクリーンショット
ヒント

ヒント

ケースのすぐ横にコンポーネントが表示されない場合は、ブラウザの右余白にマウスポインタを置き、展開矢印をクリックする必要のあることがあります。

コンポーネントを一からコーディングするプロセスを理解すれば、コンソールのケースページなど、どのページにもコンポーネントを自在に追加できます。

無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる