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

「どこでもView」を作成する場合、gcss:Spreadsheetコンポーネントの属性のViewIdに特定のビューのIDを設定するため、RaySheetは特定のビューだけを表示します。

ここでは、Visualforceページに埋め込んだRaySheetのビューを選択リストで切り替える方法を説明します。

ビューの選択リストを追加する

ビューの選択リストで表示するリストビューを切り替えるとき、ページ全体ではなく、リストビューにレンダリングされたデータだけを再読み込みする必要があります。

この動作を実現するには、RaySheetが提供するJavaScript APIのgcbgメンバを使用します。gcbgメンバについてはリファレンスを参照してください。gcbgメンバはv5.0より使用可能です。

ここでは、取引先担当者のビューを切り替える選択リストを追加する手順例を紹介します。

1. Apexクラスを作成する

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

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

ここで取得するビューのリスト項目は、RaySheetアプリのビューの一覧[ユーザガイド]で管理されているビューをすべて取得します。RaySheetのビューはViewオブジェクト(API参照名:gcss__ViewSettings__c)に格納されていて、ここではViewオブジェクトからリスト項目を取得しています。

2. Visualforceページを作成する

ビューを切り替える選択リストとRaySheetのビューを表示するためのVisualforceページを作成します。ビューを切り替える選択リストにはJavaScript APIのgcbgメンバを使用し、RaySheetのビューはgcss:Spreadsheetコンポーネントを使用します。

  1. Salesforce Classicの場合、「設定 > 開発 > Visualforceページ」をクリックする。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > カスタムコード > Visualforceページ」をクリックする。
  2. 「新規」ボタンをクリックする。
  3. 「表示ラベル」と「名前」に「ListViewDemo」と記入する。
  4. 「Visualforce Markup」に次の内容を入力し、「保存」ボタンをクリックする。
<apex:page controller="ListViewDemo">
  <div style="height:500px;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>
    
    <!-- RaySheetコンポーネントを読み込む -->
    <gcss:Spreadsheet object="Contact" />

    <!-- RaySheetのJavaScript APIのgcbgインターフェースをコールする -->
    <script type="text/javascript">
      var showView = function (viewId) {
        gcbg.getRaySheet().showView("Contact", viewId);
      }
    </script>      
  </div>
</apex:page>

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

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

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

4. 動作を確認する

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

  1. Salesforce Classicの場合、「設定 > ビルド > 作成 > タブ」をクリックする。Lightning Experienceの場合、歯車アイコンをクリックした後「プラットフォームツール > ユーザインタフェース > タブ」をクリックする。
  2. 「Visualforceタブ」の「新規」ボタンをクリックする。
  3. 「Visualforceページ」に「ListViewDemo」を選択する。
  4. 「タブの表示ラベル」と「タブ名」に「ListViewDemo」を入力する。
  5. 「タブスタイル」に任意のスタイルを選択する。
  6. 「次へ」をクリックし、タブをプロファイルに割り当て、保存する。
  7. 追加したタブ「ListViewDemo」からVisualforceページを開く。
  8. 左上の「リストビュー」の選択リストでRaySheetのビューが切り替わることを確認する。
Copyright © 2019 GrapeCity inc. All rights reserved.