カスタムインタラクティブフィルターの例

  • リリースバージョン: Yokohama
  • 更新日 2025年01月30日
  • 所要時間：12分

    • 管理者は、カスタムのインタラクティブ フィルター ウィジェットを作成して、ダッシュボードに高度なフィルター オプションを提供することができます。

    ユースケース

    この例では、タスクテーブルまたはその子テーブルのレポートをフィルタリングするカスタムフィルターを作成する方法について詳しく説明します。フィルターでは、現在のユーザーが発信者であるレコードのみが表示されます。フィルターにより、2 つのボタンがユーザーに公開されます。1 つはフィルターを追加するボタンで、1 つはフィルターを削除するボタンです。

    カスタムインタラクティブフィルターウィジェットの作成

    ダッシュボードに高度なフィルタリングオプションを提供するカスタムインタラクティブフィルターウィジェットを作成します。

    始める前に

    必要なロール：admin

    手順

    1. カスタムインタラクティブフィルターを追加するダッシュボードを開きます。
    2. コンテンツの追加アイコン (コンテンツの追加アイコン) をクリックします。
    3. [ウィジェットカテゴリ] リストから [コンテンツブロック] を選択します。
      コンテンツブロックが選択されたウィジェットカテゴリメニュー
    4. コンテンツブロックのリストから、[ 新しいダイナミックコンテンツ] を選択します。
    5. [新規ダイナミックコンテンツ] パネルで、[ 追加] をクリックします。
      新しいダイナミックコンテンツウィジェットオプション
      新しいダイナミックコンテンツブロックがダッシュボードに追加されます。
    6. ダッシュボードで、[ この再利用可能なダイナミックコンテンツブロックを構成するには、ここをクリックしてください] というリンクをクリックします。
      新しいダイナミックコンテンツウィジェットオプション
    7. [ダイナミックコンテンツ] フィールドでフィルタリングロジックを定義します。
      ダイナミック コンテンツ - 新規レコード

    次のタスク

    フィルタリングロジックを定義します。

    カスタム日付/時刻フィルターオプションの作成

    標準的な日付/時刻フィルターオプションの選択がニーズを満たさない場合は、カスタムオプションを作成できます。

    始める前に

    次の手順に従って、ダッシュボードで使用する日付/時刻ベースのインタラクティブフィルターに含めることができるカスタム日付/時刻フィルターオプションを作成します。この例では、2 週間 2 週間の期間のフィルターオプションを作成します。

    必要なロール：admin。

    手順

    1. 次のように移動する。 All (すべて) > システム定義 > ビジネスルール.
    2. ビジネスルール「日付フィルターの日付フィルターオプションを取得」を開きます。
      このルールは、新規または既存の日付タイプのインタラクティブフィルターのフォームで選択可能なオプションのリストを入力します。
    3. [ 詳細 ] タブで、[ スクリプト ] フィールドを変更し、新しいオプションを追加するために必要な JavaScript を含めます。
      次の行を追加します。 
      answer.add('<Time_Period_Name>@javascript:<Beginning_Time_Period>@javascript:<Ending_Time_Period>', gs.getMessage('<Textual_Representation_Of_Time_Period>'));
    4. 追加した行で、次のように置き換えます。
      オプション説明
      <Time_Period_Name> 選択した期間の一意の名前。この文字列は、オプションを識別するためにシステムによって内部的に使用され、記述された期間を記述できるものに設定されます。

      [Fortnight] 112_Last値を入力します。
      <Beginning_Time_Period> このフィルターが開始される特定の日時。この値には、絶対値または相対値を使用できます。JavaScript URL 構文を使用する相対値を使用する方がはるかに一般的です。

      値 gs.daysAgoStart(14) を入力して、この選択の時間間隔がちょうど 2 週間前であることを示します。
      <Ending_Time_Period> このフィルターオプションの期間を終了する特定の日時。この値には、絶対値または相対値を使用することもできます。Beginning_Time_Periodと同様に、この値は通常、JavaScript URL 構文を使用するための相対的な期間です。

      期間が現在の日時で終了することを示す値 gs.daysAgoStart(0) を入力します。
      <Textual_Representation_Of_Time_Period> アルファベットの昇順で表示される日付/時刻フィルターオプションのリストに表示される短いテキスト文字列。

      「Last fortweeknight」と入力して、この選択が現在の日時の 1 週間前からの期間を指定することを示します。
      声明の全文は次のとおりです。
      answer.add('112_Last Fortnight@javascript:gs.daysAgoStart(14)@javascript:gs.daysAgoEnd(0)', gs.getMessage('Last fortnight'));
    5. [更新] を選択して、ビジネス ルールへの変更を保存します。
    6. 日付/時刻フィルターを編集または作成するときに、新しいオプションが使用可能であることを確認します。
      1. 次のように移動する。 All (すべて) > レポート > アドミニストレーション > インタラクティブフィルター.
      2. 日付フィルターを選択します。
        利用可能なフィルターには 、[過去 2 週間] が含まれます。
        過去 2 週間を含む利用可能な日付フィルターオプション
    7. 日付フィルターを編集して新しい値を含め、ダッシュボードにフィルターを追加します。
      過去 2 週間のオプションが利用可能な日付フィルター

    フィルタリングロジックの定義 - 例

    インタラクティブフィルターを作成したら、フィルタリングロジックを追加します。

    始める前に

    必要なロール：admin

    フィルターは、 DashboardMessageHandler クラスを使用してアクティブなフィルターを管理します。一意の値で DashboardMessageHandler をインスタンス化します。
    注:
    カスタムインタラクティブフィルターの ID は一意である必要があります。別のインタラクティブフィルターまたはカスタムインタラクティブフィルターと同じ ID を持つ場合、フィルタリングロジックは正しく機能します。

    手順

    1. 動的コンテンツレコードで、動的コンテンツ XML ブロックにフィルタリングロジックを追加します。
    2. [採掘のみ] ボタンは、エンコードされたクエリcaller_idDYNAMIC90d1921e5f510100a9ad2572f2b477feを使用してタスクテーブルレポートにフィルターを公開します。
      [すべてのタスク] ボタンは、フィルターを削除します。
    3. その後、ボタンやその他のインターフェイス要素を動的コンテンツに追加できます。この例では、 clearFilter() 関数のコードとフィルター内のボタンが publishFilter() 関数の下に追加されます。 
      <?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
 <script>
     var my_dashboardMessageHandler = new DashboardMessageHandler("my_unique_id");
    
    function publishFilter () {
        var filter_message = {};
        filter_message.id = "my_unique_id";
        filter_message.table = "task";
    
    <!--     Add your own filter query logic here -->
        filter_message.filter = "assigned_toDYNAMIC90d1921e5f510100a9ad2572f2b477fe";
        SNC.canvas.interactiveFilters.setDefaultValue({
                id: filter_message.id,
                filters: [filter_message]
            }, false);
        my_dashboardMessageHandler.publishFilter(filter_message.table, filter_message.filter);
    }
    
    function clearFilter() {
        var filter_message = {};
        filter_message.id = "my_unique_id";
        filter_message.table = "task";
        filter_message.filter = "";
        SNC.canvas.interactiveFilters.setDefaultValue({
                id: filter_message.id,
                filters: [filter_message]
            }, false);
        my_dashboardMessageHandler.removeFilter();
    }
 </script>   
 
Example of a filter that generates a static filter on 'task' table reports, or removes it <br/>
    <input id="allTasks" type="button" value="All tasks" onclick="clearFilter();" />
    <input id="onlyMine" type="button" value="Only mine" onclick="publishFilter();" />
    
</j:jelly>
    4. [Submit (送信)] を選択します。

    タスクの結果

    カスタムインタラクティブフィルターは、動的コンテンツブロックを追加したダッシュボードに表示されます。また、[ ウィジェットを追加] パネルのコンテンツブロックのリストにも表示されます。

    カスタムインタラクティブフィルターの例 - 複数のレポート

    カスタムインタラクティブフィルターを使用すると、異なるテーブルを使用して複数のレポートをフィルタリングできます。単一のテーブルまたは複数のテーブルのインタラクティブフィルターを公開するための 2 つの異なる API があります。この例では、カスタムインタラクティブフィルターを使用して、インシデントテーブルと問題テーブルに関するレポートをアサイン先グループ別にフィルタリングします。

    複数のテーブルのカスタムインタラクティブフィルターについて

    カスタムインタラクティブフィルターを作成するときは、次の点に注意してください。
    • 1 つのテーブルにのみ適用されるカスタムインタラクティブフィルターは、関数 DashboardMessageHandler.publishFilter() を使用します。
    • 複数のテーブルに適用されるカスタムインタラクティブフィルターは、関数 DashboardMessageHandler.publishMessage() を使用します。
    • 公開する前に、 SNC.canvas.interactiveFilters.setDefaultValue() 関数へのインタラクティブフィルター呼び出しが必要です。
    • フィルターをリセットする前に、 SNC.canvas.interactiveFilters.removeDefaultValue() または DashboardMessageHandler.removeFilter() 関数を呼び出す必要があります。

    publishFilter() メソッドを複数回呼び出すカスタムインタラクティブフィルターは、関連するレポートを同じ回数更新します。このメソッドを繰り返し呼び出すと、パフォーマンスの問題が発生する可能性があります。

    複数のテーブルにカスタムインタラクティブフィルターを適用する方法

    次の例では、インシデント [incident] テーブルと問題 [problem] テーブルのアサイン先グループでレポートをフィルタリングします。

    DashboardMessageHandler.publishMessage() は、複数のフィルターをアレイとして受け入れます。フィルターアレイを構築してから、DashboardMessageHandler.publishMessage([filters]) を呼び出す DashboardMessageHandler の単一のインスタンスを作成します。この方法では、ウィジェットは 1 回だけ更新されます。

    <?xml version="1.0" encoding="UTF-8"?>
<j:jelly xmlns:j="jelly:core" xmlns:g="glide" xmlns:g2="null" xmlns:j2="null" trim="false">
   <script>
      var my_dashboardMessageHandler = new DashboardMessageHandler("my_unique_id");

function publishMultipleFilter() {
      <!-- Mutliple filters can be passed as an array -->
      var finalFilter = [{"table":"incident","filter":"assignment_group=6fcd3b573b331300ad3cc9bb34efc447"}, {"table":"problem","filter":"assignment_group=6fcd3b573b331300ad3cc9bb34efc447"}];
      <!-- call setDefaultValue first -->
      SNC.canvas.interactiveFilters.setDefaultValue({
id: my_dashboardMessageHandler._unique_id,
filters: finalFilter,
}, false);
      <!-- then call Publishmessage to publish filters-->
      my_dashboardMessageHandler.publishMessage(finalFilter);
}

function clearFilter() {
SNC.canvas.interactiveFilters.removeDefaultValue(my_dashboardMessageHandler._unique_id, false);
my_dashboardMessageHandler.removeFilter();
}
   </script>
   
Example of a filter that filters incident and problem table where the assignment group is Problem solving
   <input id="allTasks" type="button" value="All" onclick="clearFilter();" />
   <input id="onlyMine" type="button" value="Assignment group is [Problem solving]" onclick="publishMultipleFilter();" />
</j:jelly>