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

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間：12分

    • アドミニストレーターは、カスタムのインタラクティブフィルターウィジェットを作成して、ダッシュボードに高度なフィルタリングオプションを提供できます。

    ユースケース

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

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

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

    始める前に

    必要なロール：admin

    手順

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

    次のタスク

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

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

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

    始める前に

    必要なロール：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. [送信] を選択します。

    タスクの結果

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

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

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

    始める前に

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

    必要なロール：admin

    手順

    1. 移動先 すべて > システム定義 > ビジネスルール.
    2. 日付フィルターのビジネスルール [日付フィルターオプションを取得 (Get Date Filter Options)] を開きます。
      このルールは、新規または既存の日付タイプインタラクティブフィルターのフォームで選択可能なオプションのリストを入力します。
    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> 選択した期間の一意の名前。この文字列は、オプションを識別するためにシステムによって内部的に使用され、記述された期間を表すことができるものに設定されます。

      「2週間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> 日付/時刻フィルターオプションのリストに表示される短いテキスト文字列。アルファベットの昇順で表示されます。

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

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

    カスタムインタラクティブフィルターを使用して、異なるテーブルを使用して複数のレポートをフィルタリングできます。単一のテーブルまたは複数のテーブルのインタラクティブフィルターを公開するには、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>