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が組み込まれていることを確認します。

Visualforceページを流用する

2.visualforceページを作成する」のVisualforceページを流用する場合の修正箇所を説明します。例として以下のようなカスタムオブジェクトへの流用を想定します。

  • レコードページのオブジェクト:オブジェクトA(API名はObjA__c)
  • Lightning Experienceに組み込むオブジェクト:オブジェクトB(API名はObjB__c)
  • Lightning Experienceに組み込むオブジェクトのオブジェクトAへの参照関係項目:オブジェクトA(API名はObjAField__c)

修正を加える箇所は以下の5つの箇所です。

  • standardController
  • FolderId
  • ViewId
  • ParentId
  • ParentField

修正例

<apex:page standardController="ObjA__c" 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="{!ObjA__c.id}"
       ParentField="ObjAField__c"
       AllowEdit="true"/>
  </div>
</apex:page>
Copyright © 2024 MESCIUS inc. All rights reserved.