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

  • リリースバージョン: Washingtondc
  • 更新日 2024年02月01日
  • 読む12読むのに数分

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

    ユースケース

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

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

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

    始める前に

    必要なロール：admin

    手順

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

    次のタスク

    フィルターロジックを定義します。

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

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

    始める前に

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

    必要なロール：admin

    手順

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

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

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

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

      「Last fortnight」と入力すると、現在の日付と時刻の 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 週間のオプションが利用可能な日付フィルター

    フィルターロジックの定義 - 例

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

    始める前に

    必要なロール：admin

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

    手順

    1. ダイナミックコンテンツレコードで、ダイナミックコンテンツ XML ブロックにフィルタリングロジックを追加します。
    2. [ Only mine ] ボタンは、エンコードされたクエリ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. [送信] を選択します。

    タスクの結果

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

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

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

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

    カスタムのインタラクティブ フィルターを作成するときは、次の点に注意してください。
    • 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 つ作成します。このメソッドは、ウィジェットを 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>