ダッシュボードを月別で表示する方法

[a_129]

現在下記画像のようなダッシュボードを作成しています。

こちらはサービスカタログの変数を用いたレポートを表示させています。

今回、実現したいことがサービスカタログの変数にある「日付」の項目を使って月別に要求アイテムの件数を表示できたらと思います。

今の所「当月」や「過去6か月」等のやり方はわかったのですが、「〇月」という指定ができません。

また、可能であればダッシュボード内にプルダウンを表示させて「2022年〇月」を選ぶと、その月のデータが表示されるようにしたいです。

実現方法がわかる方がいらっしゃいましたらご教授いただけると幸いです。お願いします。

[iwai · Accepted solution]

ダッシュボードで選択肢を選んでレポートの検索条件を変えるには、インタラクティブフィルターを使います。標準のインタラクティブフィルターでは固定の何月指定は無いようなので、スクリプトでカスタムインタラクティブフィルターを作ることができます。カスタムインタラクティブフィルターは難しい機能なのでわからない場合は無理に実装しない方が良いです。

説明はDocsを見て下さい。内容を見てもわからない場合は、基礎を学んでから実装することをお勧めします。

カスタムの対話型フィルターの例 (servicenow.com)

この例を参考にして少し改良したのを作ってみました。

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<g:evaluate var="jvar_querylist" object="true">
		var dt = GlideDateTime();
		var dv = '' + dt.getDisplayValue();
		var yyyymm = dv.substr(0,7);
		var queryList = [];
		queryList.push({query:'none',label:'None'});
		dt.setDisplayValue(yyyymm+'-01 00:00:00')
		dt.addMonthsLocalTime(1);
		var endDate = '' + dt.getValue();
		for(var i = 0;i &lt; 12;i++){
			dt.addMonthsLocalTime(-1);
			yyyymm = ('' + dt.getDisplayValue()).substr(0,7);
			queryList.push({
				query:'opened_at&gt;=' + dt.getValue() + '^opened_at&lt;' + endDate,
				label:yyyymm
			});
			endDate = '' + dt.getValue();
		}
		queryList;
	</g:evaluate>
	<script>
		var my_dashboardMessageHandler = new DashboardMessageHandler("my_unique_id");
		
		function clearFilter() {
			var filter_message = {};
			filter_message.id = "my_unique_id";
			filter_message.table = "incident";
			filter_message.filter = "";
			SNC.canvas.interactiveFilters.setDefaultValue({
				id: filter_message.id,
				filters: [filter_message]
			}, false);
			my_dashboardMessageHandler.removeFilter();
		}

		function publishFilter (query) {
			if(query == 'none'){
				clearFilter();
				return;
			}
			var filter_message = {};
			filter_message.id = "my_unique_id";
			filter_message.table = "incident";
    
			<!--     Add your own filter query logic here -->
			filter_message.filter = query;
			SNC.canvas.interactiveFilters.setDefaultValue({
				id: filter_message.id,
				filters: [filter_message]
			}, false);
			my_dashboardMessageHandler.publishFilter(filter_message.table, filter_message.filter);
		}
    
	</script>   

	<select id="myselect">
		<j:forEach var="jvar_option" items="${jvar_querylist}">
			<option value="${jvar_option.query}">${jvar_option.label}</option>
		</j:forEach>
	</select>
	<script>
		var $selectBox = $j("#myselect");
		$selectBox.select2({width:'90%'});
		$selectBox.change(function(event){
			publishFilter(event.val);		
		});
	</script>
</j:jelly>