関連リストを置き換える

ここでは、「どこでもView」の用例の1つとしてSalesforceページの「関連リスト」の代わりにRaySheetのビューを表示する方法を説明します。関連リストとは、次の図のように取引先レコードにおける「取引先責任者」などを表示する一覧です。従来のリストと異なり、Excelライクな選択操作、コピー&ペースト、レコードの保存操作などが可能です。ユーザがどの機能を利用できるかは、システム管理者または開発者がVisualforceページで設定します。

RaySheetのビューを埋め込んだ結果は、Salesforce ClassicとLightning Experienceの両方で使用できます。

ページレイアウトでRaySheetのビューを埋め込む手順は次のようになります。

  1. RaySheetのビューを作成する
  2. Visualforceページを作成する
  3. Visualforceページのセキュリティを設定する
  4. ページレイアウトに割り当てる
  5. 結果を確認する

詳細は本ページの各項目を参照してください。

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

ユーザが取引先レコードを開いたときに、関連する取引先責任者の一覧をRaySheetで表示するためのビューを作成します。

  1. RaySheetを開く。
  2. 左の「お気に入り」から「取引先責任者」をクリックする。「お気に入り」が表示されていない場合、左上の三本線のアイコンをクリックする。
  3. 右の「ビューの管理」をクリックする。
  4. 「ビューを追加」をクリックする。
  5. 「名前」に「カスタムボタン用のビュー」と入力し、「OK」をクリックする。
  6. 「ビューの管理」に「カスタムボタン用のビュー」が追加されることを確認する。
  7. このビューに「姓」「名」「役職」「メール」「電話」の列を追加する。参考:表示する項目を選択する[ユーザガイド]
  8. 「カスタムボタン用のビュー」の右にある下向きの三角形をクリックする。
  9. 表示されたメニューから「共有状態の変更」をクリックする。
  10. 「共有状態の編集」画面で「全員に共有」をクリックし、あわせて「ドロップダウンリストから非表示」のチェックをオンにする。

    共有するビューを非表示にすると、どこでもViewだけで使いたいビューがすべてのユーザの一覧に表示されるのを防ぐことができます。

  11. 画面右上の「ビュー情報」をクリックする。
  12. 18桁の「ビューID」をメモする。

2. Visualforceページを作成する

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

  1. Salesforce Classicの場合、「設定 > 開発 > Visualforceページ」をクリックする。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > カスタムコード > Visualforceページ」をクリックする。
  2. 「新規」ボタンをクリックする。
  3. 「表示ラベル」と「名前」に「RaySheetContactList」と記入する。
  4. 「説明」に「RaySheetの関連リストの使用例。」または任意の説明を記入する。
  5. 「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"
           object="contact"
           viewid="ここにビューIDを記入する"
           parentId="{!account.id}"
           parentField="AccountId"/>
      </div>
    </apex:page>
    
  6. 「ここにビューIDを記入する」の部分に、前項でメモしたビューIDを記入する。
  7. 「保存」ボタンをクリックする。

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

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

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

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

4. ページレイアウトに割り当てる

  1. Salesforce Classicの場合、「設定 > カスタマイズ > 取引先 > ページレイアウト」をクリックする。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > オブジェクトマネージャ > 取引先 > ページレイアウト」をクリックする。
  2. どこでもViewを割り当てたいページレイアウトを選び、「編集」をクリックする。例:Account Layout
  3. 「項目」から「セクション」をドラッグする。
  4. 「セクションプロパティ」が表示されることを確認し、「セクション名」に「取引先責任者(RaySheet)」と記入する。
  5. 「レイアウト」で「1-列」をオンにする。
  6. 「OK」をクリックする。
  7. 「Visualforce ページ」から「RaySheetContactList」をそのセクションにドラッグして配置する。
  8. 配置したVisualforceページの右上の工具アイコンをクリックする。
  9. 「Visualforceページのプロパティ」が表示されることを確認する。
  10. 「高さ(ピクセル単位)」を「500」に変更する。
  11. 「スクロールバーを表示」をオンにする。
  12. 「OK」をクリックする。
  13. ページレイアウトの「保存」をクリックする。

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

5. 結果を確認する

任意の取引先レコードを開き、「取引先責任者(RaySheet)」セクションを確認します。Excelと同様のセル選択やツールバーやキーボードを使った編集操作が可能なことを確認します。

応用

Visualforceページに表示するgcss:Spreadsheetタグの属性を変更することで、システム管理者または開発者はRaySheetのどの機能をユーザに許可するか指定できます。属性の詳細は「ビューの機能をユーザに許可する」を参照してください。

新しいレコードの追加に関する仕様

RaySheet内で「新規」または「複製」によって新しいレコードを追加すると、parentFieldに指定した項目に対して、parentIdが自動的に割り当てられます。つまり、ある取引先のレコードの画面内でRaySheetを使って取引先責任者を追加すると、追加された取引先責任者はその取引先に関連付けられます。

ただし、「新しいウィンドウ」で取引先責任者を追加した場合は、新しい取引先責任者はその取引先に関連付けられません。この場合、Salesforceの画面で取引先責任者の取引先を明示的に入力します。

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

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

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