ビューを動的に変更する

gcss:Spreadsheetコンポーネントの属性のViewIdに固定のビューIDを設定すると、「どこでもView」は特定のビューを固定表示します。

「どこでもView」では動的にビューを変更できるJavaScript APIを公開しています。 ここでは、Visualforceページに埋め込んだ「どこでもView」のビューを選択リストで切り替える方法を例に、ビューを動的に変更する方法を説明します。

ここで説明する内容はオブジェクトモードが前提です。フォルダモードの場合は、フォルダモードへ移行するを参考にソースコードを書き換えてください。

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

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

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

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

1. Apexクラスを作成する

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

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

フォルダモードの場合は、getObjectViewListの代わりにgetFolderViewListを使用します。

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 © 2024 MESCIUS inc. All rights reserved.