Lightning Experienceアクションから開く

ここでは、Lightning Experience（LEX）の画面で取引先のレコードを開いているとき、RaySheetによる関連する商談の一覧を「商談の一覧」ボタンからポップアップ表示する例を紹介します。具体的には、次のような画面で操作できます。

ボタンの拡大:

ボタンをクリック後に表示されるポップアップ:

ポップアップの幅はLightning Experienceで定義されているため、変更できません。 データの保存操作はRaySheet画面上の機能を使うため、ポップアップに表示される「保存」ボタンは使用しません。 Salesforce Classicでは「商談の一覧」ボタンはChatterに表示されます。

Salesforce Classicでの表示結果:

Lightning ExperienceアクションからRaySheetのビューを呼び出す手順は次のようになります。

  1. RaySheetのビューを作成する
  2. Visualforceページを作成する
  3. Visualforceページのセキュリティを設定する
  4. Lightning Experienceアクションを作成する
  5. ページレイアウトに配置する
  6. 結果を確認する

取引先ページでLightning Experienceアクションから商談の一覧を表示する方法を例として以下に説明します。

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

Lightning Experienceアクションをクリックしたときに表示するRaySheetのビューを作成します。

  1. 商談のビューを作成する。この手順で作成したビューをカスタムボタンをクリックしたときに表示します。ビューの作成方法はこちらを参照してください。
  2. 作成したビューに共有を設定する。Lightning Experienceアクションを利用する全ユーザに共有する必要があります。ビューの共有方法はこちらを参照してください。
  3. 18桁の「ビューID」をメモする。IDの取得についてはビュー情報を参照してください。

2. Visualforceページを作成する

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

  1. Salesforce Classicの場合、「設定 > 開発 > Visualforceページ」をクリックする。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > カスタムコード > Visualforceページ」をクリックする。
  2. 「新規」ボタンをクリックする。
  3. 「表示ラベル」と「名前」に「AccountOpportunityPopup」と記入する。
  4. 「説明」に「RaySheetのLightning Experienceアクションの使用例。」または任意の説明を記入する。
  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"
       AllowEdit="true"
       AllowAdd="true"
       AllowDelete="true"
       AllowPaste="true"
       AllowRefresh="true"
       Object="Opportunity"
       ViewId="ここにビューIDを記入する"
       ParentId="{!account.id}"
       ParentField="AccountId"/>
  </div>
</apex:page>
  7. 「保存」ボタンをクリックする。

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

このVisualforceページはオブジェクトモードが前提です。フォルダモードの場合は、gcss:Spreadsheetコンポーネントの属性”object”の部分を”FolderId”に変更してください。”FolderId”属性に指定する１８桁のIDの値の取得方法についてフォルダのプロパティを参照してください。

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

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

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

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

4. アクションを作成する

「取引先」のLightning Experienceアクションを作成します。「商談」ではなく「取引先」なので取り違えないように注意します。

  1. Salesforce Classicの場合、「設定 > カスタマイズ > 取引先 > ボタン、リンク、およびアクション」をクリックする。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > オブジェクトマネージャ > 取引先 > ボタン、リンク、およびアクション」をクリックする。
  2. 「新規アクション」をクリックする。
  3. 「アクション種別」で「カスタムVisualforce」を選択する。
  4. 「Visualforceページ」で「AccountOpportunityPopup」を選択する。
  5. 「高さ」に「450 ピクセル」と記入する。
  6. 「表示ラベル」に「商談の一覧」と記入する。
  7. 「名前」に「OpenOpportunity」と記入する。
  8. 「説明」に「関連商談をRaySheetで開きます。」と記入する。
  9. 「保存」ボタンをクリックする。

5. ページレイアウトに配置する

作成したアクションを「取引先」ページに表示します。「商談」ではなく「取引先」なので取り違えないように注意します。

  1. Salesforce Classicの場合、「設定 > カスタマイズ > 取引先 > ページレイアウト」をクリックする。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > オブジェクトマネージャ > 取引先 > ページレイアウト」をクリックする。
  2. 任意のページレイアウトの「編集」をクリックする。例：Account Layout
  3. ページレイアウトエディタの上部パレットから「モバイルおよびLightningのアクション」をクリックする。
  4. 前項で作成した「商談の一覧」を確認する。
  5. 「商談の一覧」を「モバイルおよびLightning Experienceアクション」にドラッグする。ここでは、例として「投稿」「ファイル」の次に配置する。
  6. 次の結果になることを確認する。
  7. ページレイアウトの「保存」をクリックする。

Salesforce ClassicのChatterに表示する場合は5の手順で「Salesforce Classic パブリッシャーのクイックアクション」にドラッグします。

6. 結果を確認する

Lightning Experienceで任意の取引先レコードを開き、「商談の一覧」ボタンをクリックしてRaySheetがポップアップ表示されるかどうか確認します。

Visualforceページを流用する

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

  • レコードページのオブジェクト：オブジェクトＡ（API名はObjA__c）
  • ポップアップのオブジェクト：オブジェクトＢ（API名はObjB__c）
  • ポップアップのオブジェクトのオブジェクトＡへの参照関係項目：オブジェクトＡ（API名はObjAField__c）

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

  • standardController
  • Object
  • 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"
       AllowEdit="true"
       AllowAdd="true"
       AllowDelete="true"
       AllowPaste="true"
       AllowRefresh="true"
       Object="ObjB__c"
       ViewId="ここにビューIDを記入する"
       ParentId="{!ObjA__c.id}"
       ParentField="ObjAField__c"/>
  </div>
</apex:page>
Copyright © 2024 MESCIUS inc. All rights reserved.