カスタムフィルターを追加する

Visualforceページに埋め込んだRaySheetのビューで動作する独自のフィルター(カスタムフィルター)を追加することができます。

カスタムフィルターはRaySheetが提供する組み込みのフィルター機能よりも優先的にレコードの絞り込みを行います。そのため、カスタムフィルターと組み込みのフィルター機能を組み合わせて利用することで効率的なレコードの絞り込みを実現できます。

たとえば、ビューに表示するレコードについて、所有者が「自分」、「自分が所属する部署のユーザ」をフィルター条件にしたカスタムフィルターを使用すれば、ビューの切り替えやフィルター条件を変更せずに参照したいレコードの一覧内容を素早く変更できます。

カスタムフィルターの実装方法

カスタムフィルターを作成するには、RaySheetが提供するApexインターフェースを使用します。IUserFilterProviderインターフェースを使用することで、Apexで独自のフィルターを実装することができます。また、UserFilterクラスはSOQL構文のWHERE句に組み込むフィルター条件を実装できます。

たとえば、取引先レコードの所有者がログインユーザであることをフィルター条件にしたカスタムフィルターは、次のように実装します。

global class CustomFilter_MyAccounts implements gcss.IUserFilterProvider{
    global gcss.UserFilter getUserFilter(String objectName) {        
        // 現在のオブジェクト名は"objectName"パラメータで識別できます。
        if (objectName != 'Account'){
            return null;
        }
        
        // ログインユーザの情報を取得します。
        String userid = UserInfo.getUserId();       
        User myuser = [select Id from User where id = :userid];
       
        gcss.UserFilter result = new gcss.UserFilter();

        //  このWHERE句は、RaySheetのクエリ文字列に追加されます。
        //  WHERE句にフィルター条件を組み込むことでカスタムフィルターを実装できます。
        result.whereClause = 'Owner.Id= :userArg1';
        
        //  フィルター条件にログインユーザのIdを設定します。
        result.userArg1 = myuser.Id;
        return result;
    }
}

なお、UserFilterクラスでは、WHERE句の変数としてuserArg1からuserArg10まで10個の変数を提供するので、複数のフィルター条件を設定できます。また、この変数には配列を設定することも可能です。

次のコードは、取引先レコードの所有者の所属部署をフィルター条件にしていますが、検索対象には複数の部署を設定しています。

global class CustomFilter_Departments implements gcss.IUserFilterProvider{
    global gcss.UserFilter getUserFilter(String objectName) {        
        // 現在のオブジェクト名は"objectName"パラメータで識別できます。
        if (objectName != 'Account'){
            return null;
        }

        // フィルター条件の部署名を配列に追加します。
        List<string> depts = new List<string>();
        depts.add('企画部');
        depts.add('製造部');
        depts.add('物流部');

        gcss.UserFilter result = new gcss.UserFilter();

        //  このWHERE句は、RaySheetのクエリ文字列に追加されます。
        //  WHERE句にフィルター条件を組み込んむことでカスタムフィルターを実装できます。
        result.whereClause = 'Owner.Department = :userArg1 OR  Owner.Department = :userArg2 OR Owner.Department in :userArg3';
        
        //  フィルター条件を設定します。
        result.userArg1 = '営業部';
        result.userArg2 = '販売部';
        result.userArg3 = depts;
        // result.userArg4 = '';
        // result.userArg5 = '';
        // result.userArg6 = '';
        // result.userArg7 = '';
        // result.userArg8 = '';
        // result.userArg9 = '';
        // result.userArg10 = '';
        return result;
    }
}

カスタムフィルターを追加する

RaySheetでは、カスタムフィルターを実装するためのApexインターフェースを提供していますが、カスタムフィルターを利用するにはVisualforceページにフィルター用のUIを用意する必要があります。このUIの操作とカスタムフィルターの動作を連動させることで「どこでもView」でカスタムフィルターを利用できるようになります。

ここでは、「取引先」レコードを表示するRaySheetのビューにカスタムフィルターを追加する方法を紹介します。カスタムフィルターはラジオボタンで切り替え、所有者が自分または自分の所属する部署と同じユーザのレコードの絞り込みを行います。

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

ここでは、カスタムフィルターの絞り込み結果を分かりやすく確認できるRaySheetのビューを作成します。もちろん、既存のRaySheetのビューでカスタムフィルターを利用することも可能です。

  1. RaySheetを開く。
  2. 左の「お気に入り」から「取引先」をクリックする。「お気に入り」が表示されていない場合、左上の三本線のアイコンをクリックする。
  3. 右の「ビューの管理」をクリックする。
  4. 「ビューを追加」をクリックする。
  5. 「名前」に「カスタムフィルター用のビュー」と入力し、「OK」をクリックする。
  6. 「ビューの管理」に「カスタムフィルター用のビュー」が追加されることを確認する。
  7. このビューに「取引先名」「所有者/氏名」「所有者/部署」の列を追加する。参考:表示する項目を選択する[ユーザガイド]

2. Apexクラスを作成する

ビューに「取引先」を表示するために取引先のIDを取得するクラスを作成します。

  1. Salesforce Classicの場合、「設定 > 開発 > Apex クラス」をクリックする。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > カスタムコード > Apex クラス」をクリックする。
  2. 「新規」ボタンをクリックし、「Apex Class」に次のコードを貼り付ける。

    public with sharing class CustomFilterDemoPageController {
      private string accountId;
    
      public string getAccountId(){
        return this.accountId;
      }
        
      public void setAccountId(string v){
        this.accountId = v;
      }
      public void setAccountId(){
    
      }
    
      public String getBaseUrl(){
        return URL.getSalesforceBaseUrl().toExternalForm();
      }
    }
    
  3. 「保存」をクリックする。

次にRaySheetが提供するApexインターフェースを使用してカスタムフィルターを実装します。ここでは、ログインユーザの氏名およびログインユーザが所属する部署をフィルター条件にしたカスタムフィルターを作成します。

まず、所有者が自分になるフィルター条件のカスタムフィルターを作成します。

  1. 「Apex クラス」ページで「新規」ボタンをクリックし、「Apex Class」に次のコードを貼り付ける。

    global class MyAccounts implements gcss.IUserFilterProvider{
      global gcss.UserFilter getUserFilter(string objectName){
        if (objectName != 'Account'){
          return null;
        }
            
        // ログインユーザの情報を取得します。
        String userid = UserInfo.getUserId();
        User myuser = [select Id from User where id = :userid];
     
        gcss.UserFilter result = new gcss.UserFilter();
    
        // SOQL文のWHERE句にフィルター条件を追加します。
        result.whereClause = 'Owner.Id= :userArg1';
    
        // ログインユーザのID情報を設定します。
        result.userArg1 = myuser.Id;
        return result;
      }
    }
    
  2. 「保存」をクリックする。

次に、所属部署をフィルター条件にしたカスタムフィルターを作成します。ここでは、所属部署名を配列に追加してフィルター条件を設定してみます。

  1. 「Apex クラス」ページで「新規」ボタンをクリックし、「Apex Class」に次のコードを貼り付ける。

    global class MyDepartmentAccounts implements gcss.IUserFilterProvider{
      global gcss.UserFilter getUserFilter(string objectName){
        if (objectName != 'Account'){
          return null;
        }
    
        // ログインユーザの所属する部署の情報を取得します。
        String userid = UserInfo.getUserId();
        User myuser = [select Department from User where id = :userid];
    
        // フィルター条件の部署名を配列に追加します。
        List<string> depts = new List<string>();
        depts.add(myuser.Department);
        // depts.add('');
        // depts.add('');
    
        gcss.UserFilter result = new gcss.UserFilter();
    
        // SOQL文のWHERE句にフィルター条件を追加します。
        result.whereClause = 'Owner.Department= :userArg1';
    
        // ログインユーザの所属部署の情報を設定します。
        result.userArg1 = depts;
        return result;
      }
    }
    
  2. 「保存」をクリックする。

3. Visualforceページを作成する

カスタムフィルターのフィルター条件を切り替えるラジオボタンとRaySheetのビューを表示するためのVisualforceページを作成します。

  1. Salesforce Classicの場合、「設定 > 開発 > Visualforceページ」をクリックする。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > カスタムコード > Visualforceページ」をクリックする。
  2. 「新規」ボタンをクリックする。
  3. 「表示ラベル」と「名前」に「CustomFilterDemo」と記入する。
  4. 「Visualforce Markup」に次の内容を入力し、「保存」ボタンをクリックする。
<apex:page controller="CustomFilterDemoPageController" standardStylesheets="false" sidebar="false" lightningStylesheets="true">
  <div >
    <article class="slds-card" style="padding: 16px;">
      <!-- カスタムフィルター用のラジオボタンを追加 -->
      <div id="apex-filter-switch" style="margin: 10px; display: inline-block;">
        <span class="slds-radio">
          <input id="buttonId-myAccounts" type="radio" name="accountFilter" value="myAccounts"  checked="checked" />
          <label for="buttonId-myAccounts" class="slds-radio__label">
            <span class="slds-radio_faux"></span>
            <span class="slds-form-element__label">私のレコード</span>
          </label>
        </span>                    
        <span class="slds-radio">
          <input id="buttonId-myDepartmentAccounts" type="radio" name="accountFilter" value="myDepartmentAccounts" />
          <label for="buttonId-myDepartmentAccounts" class="slds-radio__label">
            <span class="slds-radio_faux"></span>
            <span class="slds-form-element__label">私の部署のレコード</span>
          </label>
        </span>
      </div>

      <!-- RaySheetを追加 -->
      <div class="slds-card__body" style="height:500px">
        <gcss:Spreadsheet id="sheet1"
          object="Account"
          ShowTitleBar="true" />
      </div>
    </article>
  </div>
    
  <script>    
    document.addEventListener("DOMContentLoaded", function(){
      setTimeout(function(){
        init();
      });
    }, false);

    document.addEventListener("load", function(){
      setTimeout(function(){
        init();
      });
    }, false);

    function init(){
      if (window.isDemoInitialized){
        return;
      }

      window.isDemoInitialized = true

      // イベントハンドラの登録
      document.getElementById("buttonId-myAccounts").addEventListener("change", onViewSelectorChanged)
      document.getElementById("buttonId-myDepartmentAccounts").addEventListener("change", onViewSelectorChanged)
    
      // JavaScriptのsetUserFilterProviderの呼び出し
      var sheet1 = gcbg.getRaySheet("sheet1");
      sheet1.setUserFilterProvider("MyAccounts");
    }
    
    function onViewSelectorChanged(e){
      var input = e.target;
      var selectedFilter = input.value;
      var sheet1 = gcbg.getRaySheet("sheet1");
      var customFilterClassName = "";

      switch(selectedFilter){
        case "myAccounts":
          customFilterClassName = "MyAccounts";
          break;
        case "myDepartmentAccounts":
          customFilterClassName = "MyDepartmentAccounts";
          break;
        default:
          customFilterClassName = "";
          break;
      }
      // ラジオボタンの値にあわせてJavaScriptのsetUserFilterProviderの呼び出し
      sheet1.setUserFilterProvider(customFilterClassName);
    }

    function getRadioButtonTemplate(){
      return document.getElementById("radio-button-template").innerHTML;
    }
  </script>
</apex:page>

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

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

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

5. 動作を確認する

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

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