ビューを親子表示にする

VisualforceページにRaySheetのビューを埋め込む場合、複数のRaySheetに親子関係のあるオブジェクトを表示することができます。「親子View」はv5.0より使用可能です。

例えば、RaySheetのビューを2つ用意して、1つ目のビューに取引先を表示、選択した取引先に属する取引先担当者だけを2つ目のビューに表示することができます。

親子関係の関連オブジェクトを表示する

Visualforceページに親子関係を持つRaySheetのビューを埋め込むには、gcss:Spreadsheetコンポーネントの属性のParentSheetを使用します。ParentSheetは現在のRaySheetの親になるRaySheetのIDを指定できるので、親子の関係を持つ関連オブジェクトを1ページに同時に表示することができます。

ここでは、次の親子関係を持つRaySheetを1つのページに同時に表示する方法を紹介します。

  • 親シート:「取引先」
  • 子シート:親シートで選択された「取引先」に属する「取引先責任者」

1. Visualforceページを作成する

  1. Salesforce Classicの場合、「設定 > 開発 > Visualforceページ」をクリックする。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > カスタムコード > Visualforceページ」をクリックする。
  2. 「新規」ボタンをクリックする。
  3. 「表示ラベル」と「名前」に「ParentSheetDemo」と記入する。
  4. 「Visualforce Markup」に次の内容を入力し、「保存」ボタンをクリックする。
<apex:page >
      <div style="height:300px;width:100%;">
        <gcss:Spreadsheet id="sheet1" object="Account"/>
        <gcss:Spreadsheet id="sheet2" object="Contact" parentSheet="sheet1" parentField="AccountId"/>
      </div>
</apex:page>

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

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

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

3. 動作を確認する

作成したVisualforceページのタブを作成して動作を確認します。

  1. Salesforce Classicの場合、「設定 > ビルド > 作成 > タブ」をクリックする。Lightning Experienceの場合、歯車アイコンをクリックした後「プラットフォームツール > ユーザインタフェース > タブ」をクリックする。
  2. 「Visualforceタブ」の「新規」ボタンをクリックする。
  3. 「Visualforceページ」に「ParentSheetDemo」を選択する。
  4. 「タブの表示ラベル」と「タブ名」に「ParentSheetDemo」を入力する。
  5. 「タブスタイル」に任意のスタイルを選択する。
  6. 「次へ」をクリックし、タブをプロファイルに割り当て、保存する。
  7. 追加したタブ「ParentSheetDemo」からVisualforceページを開く。
  8. 親子関係を持つ関連オブジェクトがRaySheetに表示されることを確認する。

親子ビューの表示を切り替える

親子関係を持つRaySheetも選択リストで表示するリストビューを切り替えることができます。RaySheetのビューを切り替える方法についてはビューの表示を切り替えるを参照してください。

ここでは、親子関係の関連オブジェクトを表示するで作成したVisualforceページの親シートになる「取引先」のビューの表示を切り替える方法を紹介します。

1. Apexクラスを作成する

「取引先」のビューを切り替える選択リストに表示するリスト項目を取得するクラスを作成します。

  1. Salesforce Classicの場合、「設定 > 開発 > Apex クラス」をクリックする。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > カスタムコード > Apex クラス」をクリックする。
  2. 「新規」ボタンをクリックし、「Apex Class」に次のコードを貼り付け、「保存」をクリックする。
public class ParentSheet_ListViewDemo {
    public List<SelectOption> getItems() {
        gcss__ViewSettings__c[] views = [SELECT id, name FROM gcss__ViewSettings__c WHERE gcss__TableName__c = 'account'];
        List<SelectOption> options = new List<SelectOption>();
        for (gcss__ViewSettings__c view : views) {
            options.add(new SelectOption(view.id, view.name));
        }
        return options;
    }
}

2. Visualforceページを作成する

Visualforceページ「ParentSheetDemo」にビューを切り替える選択リストを追加します。ビューを切り替える選択リストにはJavaScript APIのgcbgメンバを使用し、RaySheetのビューはgcss:Spreadsheetコンポーネントを使用します。

  1. Salesforce Classicの場合、「設定 > 開発 > Visualforceページ」をクリックする。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > カスタムコード > Visualforceページ」をクリックする。
  2. Visualforceページの一覧から「ParentSheetDemo」を検索し、アクション列の「編集」をクリックする。
  3. 「Visualforce Markup」に次の内容を入力し、「保存」ボタンをクリックする。

    <apex:page controller="ParentSheet_ListViewDemo">
        <div style="height:300px;width:100%;">
    
        <!-- 選択リストを作成する -->
        <apex:form styleClass="slds-m-vertical_medium">
            <apex:outputLabel value="リストビュー: " for="gcssViewSelector"/>
            <apex:selectList id="gcssViewSelector" onchange="showView(this.value);" size="1">
            <apex:selectOptions value="{!items}"/>
            </apex:selectList>
        </apex:form>
               
        <gcss:Spreadsheet id="sheet1" object="Account"/>
        <gcss:Spreadsheet id="sheet2" object="Contact" parentSheet="sheet1" parentField="AccountId"/>
                
        <!-- RaySheetのJavaScript APIのgcbgインターフェースをコールする -->
        <script type="text/javascript">
            var showView = function (viewId) {
                gcbg.getRaySheet().showView("Account", viewId);
            }
        </script>            
    </div>
    </apex:page>
    
  4. 親子関係の関連オブジェクトを表示するで作成した「ParentSheetDemo」タブでビューを開く。

  5. 左上の「リストビュー」の選択リストでRaySheetの「取引先」のビューが切り替わり、それにあわせて子階層のビューが切り替わることを確認する。

Copyright © 2018 GrapeCity inc. All rights reserved.