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

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

ユースケース

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

関連概念

• ダッシュボードメッセージハンドラー

関連情報

• コンテンツブロックを構成する
• UI スクリプト
• Jelly のタグ

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

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

始める前に

必要なロール：admin

手順

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

次のタスク

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

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

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

始める前に

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

必要なロール：admin。

手順

1. 移動先 すべて > システム定義 > ビジネスルール.
2. ビジネスルール [日付フィルターの日付フィルターオプションを取得 (Get Date Filter Options for Date Filters)] を開きます。
   このルールは、新規または既存の日付タイプインタラクティブフィルターのフォームで選択可能なオプションのリストを設定します。
3. [ Advanced ] タブで、[ Script ] フィールドを変更して、新しいオプションを追加するために必要な 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>	選択した期間の一意の名前。この文字列は、オプションを識別するためにシステムによって内部的に使用され、記述された期間を説明できるものに設定されます。 値 112_Last Fortnight を入力します。
   <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 fortnight」と入力すると、現在の日付と時刻の 1 週間前からの期間が指定されます。

   これで、完全なステートメントは次のようになります。

   answer.add('112_Last Fortnight@javascript:gs.daysAgoStart(14)@javascript:gs.daysAgoEnd(0)', gs.getMessage('Last fortnight'));

5. [ 更新 ] を選択して、ビジネスルールへの変更を保存します。
6. 日付/時刻フィルターを編集または作成するときに、新しいオプションが使用可能であることを確認します。
   1. 移動先 すべて > レポート > 管理 > インタラクティブフィルター.
   2. 日付フィルターを選択します。
      使用可能なフィルターには 、[Last fortnight] が含まれます。
      
      
7. 日付フィルターを編集して新しい値を含め、フィルターをダッシュボードに追加します。
   
   

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

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

始める前に

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

タスクの結果

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

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

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