Lightning Experienceに組み込む

ここではLightning Experience(LEX)に組み込む方法を紹介します。関連リストを置き換えるで紹介した方法でもLightning Experience(LEX)に組み込むことはできますが、Lightningアプリケーションビルダーを使用することで、より柔軟にLightning Experienceに組み込むことができます。

Lightning ExperienceにRaySheetを組み込む手順は以下になります。

  1. RaySheetのビューを作成する
  2. Visualforceページを作成する
  3. Visualforceページのセキュリティを設定する
  4. Lightningアプリケーションビルダーでページを編集する
  5. 結果を確認する

取引先ページに商談一覧のRaySheetを表示する方法を例として以下に説明します。

「取引先責任者」などの他の標準オブジェクトやユーザ固有のカスタムオブジェクトなどもすべて同じ手順でLightningアプリケーションビルダーを使用してRaySheetを組み込むことができます。

1. RaySheetのビューを作成する

ユーザが取引先ページを開いたときに、関連する商談の一覧をRaySheetで表示するためのビューを作成します。

  1. 商談のビューを作成する。この手順で作成したビューを取引先ページに組み込みます。ビューの作成方法はこちらを参照してください。
  2. 作成したビューに共有を設定する。組み込んだRaySheetを取引先ページで参照する全ユーザに共有する必要があります。ビューの共有方法はこちらを参照してください。
  3. 18桁の「フォルダID」と「ビューID」をメモする。IDの取得についてはフォルダのプロパティビュー情報を参照してください。

2. Visualforceページを作成する

RaySheetのビューを表示するためのVisualforceページを作成します。

  1. 歯車アイコンをクリックした後「設定 > カスタムコード > Visualforceページ」をクリックする。
  2. 「新規」ボタンをクリックする。
  3. 「表示ラベル」と「名前」に「RaySheetOpportunityList」と記入する。
  4. 「説明」に「RaySheetのLightningアプリケーションビルダーの使用例。」など、任意の説明を記入する。
  5. 「Lightning Experience、Lightning コミュニティ、およびモバイルアプリケーションで利用可能」にチェックを入れる。
  6. 「Visualforce Markup」に次の内容を入力する。
    <apex:page standardController="Account" showHeader="true" sidebar="false">
      <div style="position: absolute; left:0; top:0; right: 0; bottom: 0">
        <gcss:Spreadsheet
           ShowTitleBar="false"
           ShowToolbar="true"
           FolderId="ここにフォルダIDを記入する"
           ViewId="ここにビューIDを記入する"
           ParentId="{!account.id}"
           ParentField="AccountId"
           AllowEdit="true"/>
      </div>
    </apex:page>
    
  7. 「ここにフォルダIDを記入する」と「ここにビューIDを記入する」の部分に、前項でメモしたIDを記入する。
  8. 「保存」ボタンをクリックする。

「RaySheetOpportunityList」Visualforceページを作成できたら、「プレビュー」をクリックしてRaySheetのビューがブラウザの新しいタブに表示されることを確認します。この時点ではレコードは何も表示されません。

このVisualforceページはフォルダモードが前提です。オブジェクトモードの場合は、gcss:Spreadsheetコンポーネントの属性”FolderId”の部分を”Object”に変更してください。

Visualforceページに表示するgcss:Spreadsheetタグの属性を変更することで、RaySheetのどの機能をユーザに許可するか指定できます。詳細は「どこでもViewの基本」を参照してください。

3. Visualforceページのセキュリティを設定する

前項で作成したVisualforceページは、既定ではシステム管理者のプロファイルを割り当てられたユーザだけが表示できます。システム管理者以外のプロファイルにも許可するには、Visualforceページのセキュリティを設定します。

  1. 歯車アイコンをクリックした後「設定 > カスタムコード > Visualforceページ」をクリックする。
  2. 前項で作成した「RaySheetOpportunityList」を見つける。
  3. 「RaySheetOpportunityList」の左側に表示される「セキュリティ」をクリックする。
  4. 左のリストから割り当てるプロファイル、たとえば「標準ユーザ」をクリックして選択し、「>」ボタンをクリックして右のリストに追加する。
  5. 「保存」ボタンをクリックする。

4. Lightningアプリケーションビルダーでページを編集する

  1. 任意の取引先の詳細ページを開く
  2. 歯車アイコンをクリックし、さらに「編集ページ」をクリックする。Lightningアプリケーションビルダーが開く。
  3. タブのエリアをクリックし、「タブを追加」ボタンをクリックする。
  4. タブが追加されるので、「カスタム」を選択し「商談の編集」と入力する。
  5. 作成した「商談の編集」タブをクリックし、「Visualforce」をドラッグ&ドロップする。Visualforceページ名は「RaySheetOpportunityList」を選択する。
  6. 「保存」ボタンをクリックする。

RaySheetを表示するには、少なくとも300ピクセルの高さが必要です。推奨される高さは500ピクセル以上です。

5. 結果を確認する

任意の取引先ページを開き「商談の編集」タブにRaySheetが組み込まれていることを確認します。

クリックジャック保護のセキュリティ設定

Salesforceでは既定でVisualforceページのクリックジャック保護はオフになっていますが、オンに設定されていると「どこでもView」が動作しません。この場合、次の手順で無効化します。

  1. 歯車アイコンをクリックした後「設定 > セキュリティ > セッションの設定」をクリックする。
  2. 「セッションの設定」ページで「クリックジャック保護」の「標準ヘッダーがある Visualforce ページのクリックジャック保護を有効化」と「ヘッダーが無効化された Visualforce ページのクリックジャック保護を有効化」を両方ともオフにする。
  3. 「保存」ボタンをクリックする。
Copyright © 2019 GrapeCity inc. All rights reserved.