ダッシュボード開発

開発したAPIのユーザインターフェースを簡易に作成・共有することができます。
開発には、Dashboard as a Service の Dashboard Builderを利用します。

0. 特徴

1 画面構成

1.1 Dashboard Builder

1.2 Custom Dashboard

2. Dashboard を作成する

2.1 Layout を選択する

2.2 Widget を配置する

【参考】 Builtin Widget 仕様

【参考】 Local Widget 作成方法

2.3 Context Areas を設定する

【参考】 Action Command 一覧

2.5 Dashboard を保存する

2.5 動作確認およびデバッグ

3. Dashboardをダウンロードする

4. Dashboardをインポートする

5. 公開設定をカスタマイズする

6. 【New】Builtin Widget 仕様

0. 特徴

予めデータ型(Object / Array / スカラ )に応じた入出力ウィジェットがバンドルされているので、表示したいAPIのデータに合わせたウィジェットを自由に選択・配置し、データをバインドします。vue.jsのcomponentフォーマットで自作ウィジェットの追加も可能です。

データ量に応じたスクロール処理や、イベント輻輳ロック（画面ブロック）など、面倒な処理はそれぞれのウィジェットに実装されているので、開発者はウィジェットとAPI入出力データのバインディングに注力することができます。

プレビューエリアで動かしながら、ウィジェットとデータや画面ロジックのバインドの妥当性を確認しつつ開発することが可能なので、簡易にスクラッチ＆ビルドを行うことができます。

簡易に開発できる反面、デザインや操作方法にはある程度制約があるため、デザイン要件が厳しいフロントエンドの開発においては、SDK-ApiFrontを用いたスクラッチ開発を推奨しています。

アーキテクチャー

Dashboard は、以下表のように MVC (Model-View-Controller) モデルの思想で構成されています。その中でも、必要最低限の機能・デザインで簡易的に Dashboard を作成したい場合は3つの要素 Variables / Builtin Widgets / Actions を選択・パラメータ設定するだけで実現することが可能です。

MVCモデル	Dashboard 構成要素	各種役割
Model	Context Area - Variable Context Area - Getter	Dashboard内の空間でやりとりされるデータ構造は、Context Areaの変数の初期値や、算出プロパティで導出されるデータにより定義することができます
View	Widget(Builtin/Local)	Dashboard を構成する View(画面パーツ)は、Widgetと呼ばる単位でコンポーネント化されています。Dashboardで利用するWidgetを選択・配置し、ModelやActionのとバインドを行うことでDashboard全体のViewを定義することができます。プレビューエリアにてModel/Actionとのバインドの妥当性を確認しつつ開発することが可能です。開発者が自ら Vue コンポーネントをコーディングしてWidgetを作成することも可能です。
Controller	Context Area - Action	Dashboard における関数により定義することができます。Widgetのアクションイベントとの紐付けを定義することで、動的に画面ロジックが駆動します。

Tip

💡 プレビューエリアでは、Widget部品とModel/Actionとのバインドの妥当性を確認しつつ開発することが可能です。動作確認完了した段階で保存することができるので、簡易にスクラッチ＆ビルドを行うことができます。

Widget のタブをドラッグすることで画面の中のWidget のレイアウトを変更することも可能です。

1 画面構成

Dashboard機能は、Dashboardを開発する Dashboard Builder と、作成した Dashboard を公開する Custom Dashboard で構成されます。

1.1 Dashboard Builder

Dashboard の新規作成や編集、共通設定（Custom Dashboard のデザイン編集）を行います。

	エリア	説明
①	ダッシュボード情報 & 編集ボタン	選択中のダッシュボード名が表示されます。編集権限がある場合は編集ボタンが表示されます。
②	ダッシュボード一覧	作成したダッシュボードが表示されます。ログインユーザの権限で表示可能なダッシュボードのみ表示されます。
③	ダウンロードボタン	ダッシュボードをエクスポートします
④	新規作成ボタン	新たにダッシュボードを作成します。
⑤	インポートボタン	ファイルからアップロードします。同一IDのダッシュボードが存在する場合は上書きされます
⑥	カテゴリ編集ボタン	ダッシュボード一覧で表示するカテゴリを編集することができます
⑦	共有設定ボタン	ダッシュボードの公開時の設定をおこないます
⑧	チュートリアルボタン	ダッシュボードの基本的な使い方を紹介するチュートリアルを参照することができます

Tip

💡 作成した Dashboard は画面左側の Dashboard に追加され、一覧表示されます。

編集モード

新規作成ボタン、ダッシュボード編集ボタンを押下することでモードが切り替わります。左上のアイコン部が赤色になります

	エリア	説明
①	保存ボタン	編集内容を保存します。保存後はファイルが作成・更新されます。
②	編集キャンセルボタン	編集内容を破棄し、編集前の状態に戻します
③	削除キャンセルボタン	編集中のダッシュボードを削除します。ファイルも削除されます。
④	組込ウィジェットパレット	標準組み込みのウィジェットパレットです。ウィジェットをダッシュボードに配置することができます
⑤	ローカルウィジェットパレット	Vue形式でコンポーネントをスクラッチ開発しダッシュボードに配置できます
⑥	コンテキストエリア	ダッシュボード内で実行するロジックの記載や変数定義を行います
⑥-1	Imports	CDNで公開されている外部ライブラリを参照することができます。参照したライブラリは、Getters/Actionsで記載するスクリプトや、ローカルウィジェットから参照可能です
⑥-2	Valiables	ダッシュボード内で参照される変数を定義します。スクリプトやローカルウィジェットから参照や設定が可能です。
⑥-3	Getters	ダッシュボード内で参照するゲッター関数です。Vue.jsの算出プロパティに相当します。スクリプトやローカルウィジェットから変数と同様に参照可能です。変数のように値の設定はできません。
⑥-4	Actions	ダッシュボード内のイベントロジックを定義します。ウィジェットの設定でウィジェットそれぞれのイベントをアクションにバインドすることでロジックを発火させます。アクションの編集は「Action Editor」を用いて行います。
⑦	ダッシュボード編集エリア	実際に表示されるダッシュボードの動作を確認します。ドラッグ操作で並び替えやレイアウトの編集ができます

アクションエディタ

コンテキストエリアでアクションを定義する際に用いるエディタです。
アクションはシーケンシャルに実行されるコマンドの集合です。組込コマンドをパレットから選択してアクションロジックを作成します。

	エリア	説明
①	コマンドパレット	ビルトインで提供される組み込みコマンドのパレットです。パレットをクリックもしくはドラッグしてアクションフローを作成します。
②	アクション定義エリア	アクションの実行オプションを指定します。
②-1	autoStartオプション	オンの場合、ダッシュボード表示時にこのアクションが自動で実行されます。
②-2	blockAction	オンの場合、このアクションが実行中はユーザの画面操作がブロックされます。
②-3	periodicInterval	実行間隔（秒）を指定することで、アクションを定周期実行します。空文字、もしくは0を指定することで、無効になります
③	アクションフロー	アクションで実行するコマンドを定義します。コマンドは上から下にシーケンシャルに実行されます。ドラッグ操作により並び替えも可能です。
④	コマンド詳細定義エリア	選択中のコマンドの詳細設定を行います。

1.2 Custom Dashboard

作成した Dashboard をユーザに公開する画面です。ユーザはこの画面から Dashboard を操作することが可能です。
この画面での編集はできません。

2. Dashboard を作成する

ここでは、Dashboard Builder での Dashboardの作成方法について学びます。

Tip

ダッシュボードエディタの右上のチュートリアルメニューから、簡単な使い方を学習できるオンラインチュートリアルを実行することもできます。

2.1 Layout を選択する

Dashboardの新規作成時には、利用するLayoutを選択します。Dashboardは画面のレイアウトテーマやスタイルを選択することが可能です。

Shared Dashboard エリアの Create new dashboardボタンを押下します。

[layout style] にレイアウトを選択し、[Select] ボタンを押下します。

Layout Styleは以下から選択することができます。


dashboard default style	Qmonus SDK ポータルの標準レイアウト。Tab をグリッドすることで手動で配置することができる。
grid layout	CSS Grid Layout を適用したレイアウト

Tip

💡 それぞれのレイアウトの特徴は以下になります

SDK ポータルの標準レイアウト

自由なレイアウトで変更が可能
CSS Grid Layout

CSS Grid Layout の比率に沿ってレイアウトの変更が可能

Layout Style の設定は以上です。

選択したレイアウトに従い、実際のUIのコンポーネント=Widgetを配置します。Dashboard Builder には2種類の Widget が用意されています。


Builtin Widget	予めバンドルされたWidgetです
Local Widget	Vue 形式でスクラッチ開発するWidgetです

配置したいWidgetをパレットエリアから選択し、ガイダンスに沿ってパラメータバインドすることで、Widgetを配置します。
ガイダンスは3ステップ ①ウィジェットのタイトル設定、②パラメータ設定、③(Widget によっては省略)パラメータとActionのEvent Binding設定で構成されています。

配置したいウィジェットの [＋] ボタンを押下します。
新規作成する Append New Widget 画面がポップアップ表示されます。

2.2.2. ウィザードでパラメータを設定する

[Display] にて Widget のタイトルを [Tab Title] に入力します。

Tip
タイトル設定は必須ではありませんが、Widgetの切替を実施する場合のIDにもなりますので、Dashboard内で一意な値を設定することを推奨しています。
[Parameter] を選択し、Widget のパラメータを選択・入力します。オプションのパラメータは、鉛筆ボタンから追加することが可能です。

Tip
💡 [Parameter] で設定する各パラメータの一覧および設定値は、それぞれのWidget配置時に表示されるウィザードのディスクリクションを確認してください。

オプションパラメータを追加する場合は鉛筆ボタンを選択

追加したいオプションパラメータを選択

オプションパラメータの追加が完了

2.2.3. ウィザードでイベントハンドラを設定する

[Event Binding] では、Widgetのトリガーイベントと、後述するActionで作成したイベントハンドラを紐付ける設定を行います。Widgetによっては、トリガーとなるイベントが存在しないものもあります。その場合はスキップしてください。

重要

[Event Binding] では、同一イベントに複数のイベントハンドラを設定することも可能です。その場合のActionは上から順番に実行されます。

[Event Binding] でイベントハンドラを追加する
イベントハンドラの追加ボタン [＋handler] を押下し、イベントハンドラのタイプに合わせて画面イベントとの紐付けを行います。

[＋handler] を選択

初期表示では [select] が選択状態になっている

該当のイベントハンドラのタイプを選択する

イベントハンドラの追加が完了し、左側にイベントハンドラーのパイプラインと各パラメータが表示されます

Tip

パイプラインに並ぶイベントハンドラの順番変更や削除を行うする場合、該当のイベントハンドラをクリックして選択した状態で以下のオペレーションを行います。

イベントハンドラを上に移動させる

該当のイベントハンドラを選択した状態で、↑ (Move up)ボタンを押下します。

①イベントハンドラを選択した状態で [Move up] ボタンを押下

②選択しているイベントハンドラがひとつ上に移動

イベントハンドラを下に移動させる

該当のイベントハンドラを選択した状態で、↓ (Move down)ボタンを押下します。

①イベントハンドラを選択した状態で [Move down] ボタンを押下

②選択しているイベントハンドラがひとつ下に移動

不要なイベントハンドラを削除する

パイプラインに並ぶイベントハンドラを削除する手段は3つあります。すべてのイベントハンドラを削除する場合は [× All]、一番下に並ぶイベントハンドラを削除する場合は [× Last handler]、選択しているイベントハンドラを削除する場合は、画面下部の[× handler]を押下します。

各 Builtin Widget の仕様は5.6 Builtin Widget 仕様を参照してください。

Vue.js のコンポーネントフォーマット準拠のコーディングスタイルで、新たなWidgetを作成することができます。

Local Widgets の作成ボタン [Create Local Widget] を押下します。

Add Local Widget 画面がポップアップ表示されたら各値を入力し、[Submit] ボタンを押下します。

#	Parameter	設定値	データ型/入力フォーム	デフォルト値
1	- (style)	Vue コンポーネント設定方式	pulldown (Vue Style/Script Style)	Vue Style
2	iconClass	Local Widget のアイコン	-	fa fa-cogs
3	widget name	Local Widget 名	text	空
4	description	Local Widget の説明	text	空
5	template	Vue コンポーネントのHTMLコード	html
6	style	Vue コンポーネントのCSS	css	-
7	script	Vue コンポーネントのスクリプト	javascript	export default { props : { }, data(){ return { } }, computed :{ }, methods : { }, watch : { }, beforeCreate(){}, created(){}, mounted(){}, beforeDestroy(){}, destroyed(){} }

保存が完了すると、Local Widgets 欄に作成した Local Widget が表示されて、Builtin Widgetと同じように利用できるようになります。

Local Widget の作成手順は以上です。

2.3 Context Areas を設定する

Dashboard空間でやりとりされる値やロジックの定義を行います。
Dashboard Context Areaは、Imports/Variables/Getters/Actions で構成されます

2.3.1 3rdパーティライブラリをインポートする

Context Areaの Import エリアでは、CDNで提供されている3rdパーティライブラリをインポートすることができます。
指定したライブラリは、DashboardのActionや Local Widgetで利用することができます。

Context Area の [Imports] > ＋ボタンを押下します。
追加欄が表示されるので歯車ボタンを押下します。
インポート画面にて以下の値を入力し、[Submit] を押下します。

# パラメータ設定値

1 key CDN ライブラリのエントリーポイント

2 url CDN のサイト URL

3 script tag attributes スクリプトタグの属性

追加が完了すると、[key] で設定した値が変数名として追加されています。

Tip
💡 Imports を削除する場合は、変数名の右側のゴミ箱ボタンを押下し、キャプチャのように赤い削除確認ボタンに表示が変わるので更に押下すると削除することができます。

Imports 設定は以上です。

#	パラメータ	設定値
1	key	CDN ライブラリのエントリーポイント
2	url	CDN のサイト URL
3	script tag attributes	スクリプトタグの属性

2.3.2 変数を定義する

Context Areaの Variables エリアでは、Dashboard 内で利用する変数を設定します。
後述する Action の戻り値や、各種Widget に設定するパラメータ値等で利用します。

Context Area の [Variables] > ＋ボタンを押下します。
追加欄が表示されるので変数名 variable name を入力し、Nボタンを押下します。
デフォルト値の設定画面にて変数の型と初期値を入力し、[Submit] を押下します。
- default値をnullで設定する場合は初期表示のまま
- (default値がnull以外の場合) データ型と初期値を入力
  
  データ型初期表示値
  
  string 空文字
  
  number 0
  
  boolean false/ true
  
  array []
  
  object {}
default valueが設定されている場合、緑色のマークとデータ型のマークに表示が変更されます。例として array 型で登録すると以下のようなマークになります。

Tip
💡 default valueを設定しない場合（デフォルト値）は null で登録されます。

Tip
💡 Variables を削除する場合は、変数名の右側のゴミ箱ボタンを押下し、赤い削除確認ボタンに表示が変わるので更に押下すると削除することができます。

Variables 設定は以上です。

データ型	初期表示値
string	空文字
number	0
boolean	false/ true
array	[]
object	{}

2.3.3 算出プロパティを定義する

Context Areaの Getters エリアでは、Dashboard 内で利用する算出プロパティを定義できます。
Vue.js の computed 同様に、Getter内で参照された値の変化に動的に連動して値が自動で更新されます。
各種Widget に設定するパラメータ値等で変数と同様に利用することができます。

Context Area の [Getters] > ＋ボタンを押下します。
追加欄が表示されるので getter name を入力し、編集ボタンを押下します。
Getter Script 画面にてプロパティを定義し、[Submit] を押下します。

Getter の設定手順は以上です。

2.3.4 画面ロジックを定義する

Context Areaの Actions エリアでは、様々な処理を行う画面ロジックを関数として定義します。
主に、マウスクリックなどの画面イベントに対して呼び出される、イベントハンドラとして利用します。
完全なコーディングではなく、予め用意されている処理コマンドを組み合わせて実行順に配列し、各コマンドにパラメータを設定することで完成します。処理コマンドとしてポップアップ画面の表示や API call 、スクリプトなど様々なコマンドが用意されています。（【参考】Action Command一覧）

Action を作成する

1. Action を定義する

Action名、返却値、実行オプションを設定します。

Context Area の [Actions] > ＋ボタンを押下します。

空の Action が作成されます。表に沿って各値を設定します。

#	パラメータ	役割
①	Action 自動再生ボタン (start automatically when dashboard starts)	自動再生の設定ボタン。デフォルトは非活性状態（グレー色）。活性状態（緑色）にすると、Dashboard 画面表示時に実行される。
②	action name	アクション名
③	Action 連続実行ブロックボタン (block redundant user actions)	Action の連続実行を阻止する設定ボタン。デフォルトは活性状態（緑色）。
④	Action Pipeline 設定 (xx step transactions)	Action の処理内容を編集するボタン。数字は後述の Action Pipeline のブロック数を指す。
⑤	target variable	アクションの返却値を格納するVariable

Action の定義は以上です。

2. Action の内部処理を実装する

前項で定義した Action に、処理内容を作成していきます。Action Details 画面で用意されているCommand Pallete から処理 Command を選択し、 Command Pipeline にCommand を実行順に並べ、パラメータ設定していきます。

0ボタン (0 step transaction) を押下します。
Action 処理を設定する Action Details 画面がポップアップ表示されます。これから画面中央のAction Pipeline に並べる Command が、Action 呼び出し時に実行される仕組みになっています。

Action Pipeline に Command を追加する

Command Pallete からCommand を選択・Action Pipeline に追加し、Command Detail にてパラメータを設定します。各 Command で設定するパラメータ一覧は [Action - Command Pallete] ページを参照してください。
Command を更に追加する場合、前項の要領でCommand Pallete から該当の Command をクリック選択し、処理 Command を追加していきます。Actionが実際に実行される際は、Action Pipeline に並ぶコマンドが昇順に実行されていきます。

Action Pipeline に Command を並び替える（実行の順番を変更する）

Command の順番を並び替える際は該当の Command をドラッグして移動させます。

Action Pipeline に Command を Action Pipeline から削除する

Action Pipeline から Command を削除する際は、ゴミ箱ボタンをクリックします。確認ボタンに切り替わるので、再度クリックするとコマンドが削除されます。

ゴミ箱ボタンをクリック

確認ボタンを再度クリック

削除完了

Action の設定を変更する

Actionの詳細設定を行います。一部は、Context Area の Actions エリアでも可能です。

#	パラメータ	役割
①	autoStart	Dashboard 画面表示時に実行されるアクションの場合にチェックします。
②	blockActon	Action の連続実行を阻止する設定ボタン。デフォルトは活性状態（緑色）。
③	periodicInterval	定期実行されるアクションの場合に、実行間隔をしていします（単位は秒）。0では動作しません。

Actions の設定は以上です。

【参考】 Action Command 一覧

Command	Command内容	#	パラメータ	パラメータ説明	入力形式 / 型/ 言語	初期値	設定例
dump (Context Area Runtime Dump)	開発用コマンド。グローバル値とローカル値をポップアップ表示する。	1	enable		checkbox	(checked)	-
script (Script Injection)	スクリプトコードを実行するコマンド。 _はパイプラインのコンテキストを指し、$はグローバルデータ/ゲッターを指します。	1	script		javascript	{{ _ }}
非推奨コマンド（EOL予定）ajax (Callout API)	-	1	-		-	-
ajax_strict (Callout API)	API を呼び出しするコマンド。ルーティングテーブルからのコールアウトは、「url」の代わりに「path」を指定することが可能。	1	http		JSON	{ “method”: “GET”, “path”: “/pathToApi”, “headers”: null, “body”: null, “query”: null }	{\n “method”: “POST”,\n “path”: “/tutorials/employments”,\n “headers”: {“Content-Type”: “application/json”},\n “body”: {“aa” : “bb”},\n “query”: {“query_1”: “dd”}\n}
		2	error logic		javascript	( err , res , $ , _ , __ )=>{ throw err; }
terminate
(Terminate pipeline)	パイプラインの実行を終了するコマンド。	1	terminate condition		javascript	( $ , _ , __ )=>{ return true; }
retry
(Retry previous steps)	直前のコマンドの処理を繰り返し実行するコマンド。	1	break condition		javascript	( $ , _ )=>{ return true; }
		2	retry step	反復する直前のコマンドの数	number	1
		3	max retry count		number	5
		4	retry interval(sec)		number	1000
axisshell
(Execute qmonus Shell)	Qmonusインタラクティブシェルを実行するコマンド。実行結果をスクリプトで使用するには、jsonダンプなどのPythonコードを使用して結果を文字列として出力し、シェルで出力する必要がある。	1	shell		python	print( json.dumps( { “str”:“string” , “num”:1 , “bool”:True } ) )
		2	target		pulldown (transaction [MASTER]/apigw [MASTER]/scenario [MASTER])	transaction [MASTER]
非推奨コマンド（EOL予定） reset (Set Global
Variable)	-	1	-		-	-
download (Download File)	ファイルダウンロードするコマンド。	1	filename payload encoding		JSON	{ “filename”: “”, “payload”: “{{ _ }}”, “encoding”: “UTF-8” }
非推奨コマンド（EOL予定）keystone (Get Keystone Token)	Keystone認証するコマンド。後続のAPI呼び出しにおいて自動的にトークンを受け取ることが可能。	1			JSON	{ “path”: “/v3/auth/tokens”, “endpoint”: “”, “domain_id”: “”, “userid”: “”, “project_id”: “”, “password”: “” }
非推奨コマンド（EOL予定） toArrayByflatty (Object to Array)	-	1	-		-	-
非推奨コマンド（EOL予定） input (Shoe Input Form)	-	1	-		-	-
input_strict (Show Input Form with
Validation)	入力フォームを表示するコマンド。jsonSchemaで入力チェックロジックを指定することも可能。	1	dialog		JSON (input schema)/ javascript	{ “title”: “Input Form”, “description”: “”, “submit”: “submit”, “cancel”: “cancel” }/{{}}
		2	schema		JSON (input schema)/ javascript	{ “type”: “object”, “title”: “”, “format”: “”, “options”: {} }/{{}}
		3	validate logic		javascript	( data , $ , _ , __ )=>{ return true; }
		4	error message (Display an error message,Combine the ajax command error hook with a repeat command to prompt the user to re-enter)	エラーメッセージを表示する。ajaxコマンドのエラーフックをrepeatコマンドと組み合わせることで、ユーザーに再入力を推奨させることが可能。	javascript	{{}}
		5	cacheValueOnError (cache result value on pipeline error.)	パイプラインエラーの結果値をキャッシュする。	checkbox	check
非推奨コマンド（EOL予定） wizard (Show Wizard
Form)	-	1	-		-	-
wizard_strict (Show Wizard Form )	ウィザード形式のマニュアルフォームを表示するコマンド。	1	dialog		JSON/ javascript	{ “title”: “Input Form”, “description”: “”, “submit”: “submit”, “cancel”: “cancel” }/{{}}
		2	forms		JSON	[ { “title”: “Step1”, “schema”: { “type”: “object”, “properties”: {} } }, { “title”: “Step2”, “schema”: { “type”: “object”, “properties”: {} } } ]
		3	validate logic		javascript	( datas , $ , _ , __ )=>{ return true; }
		4	error message (Display an error message,Combine the ajax command error hook with a repeat command to prompt the user to re-enter)	エラーメッセージを表示する。ajaxコマンドのエラーフックをrepeatコマンドと組み合わせて、ユーザーに再入力を推奨させることが可能。	javascript
dialog
(Show Widget Dialog)	直前のコマンドの出力結果をダイアログ表示するコマンド。	1	TODO パラメータ名が表示されていないため、記載をお願いしたい		JSON	{ “title”: “Show Dialog”, “submit”: false, “cancel”: “Close” }
		2	local widget (If you want to get the value from the input component, define a ‘getValue’ Method)		pulldown	array-draggable-slot/array_counter_viewer/array_list_viewer/array_table_viewer/iframe-wrapper/interactive-shell/json-data-editor/json-data-viewer/menu-panel/number_counter_viewer/number_gauge_counter_viewer/object_tree_viewer/patch-panel/ssh-terminal/text-editor/text-status-viewer/video-chat/vnc-client
		3	props		JSON	{ “arg”: “{{ _ }}” }
confirm (Show Confirm Dialog)	確認ダイアログを表示するコマンド。キャンセルボタンを押すとパイプラインを中断することが可能。	1	TODO パラメータ名が表示されていないため、記載をお願いしたい		JSON	{“title”: “”, “description”: “”}
pagemove (Activate Widget)	ウィジェットを切り替え表示させるコマンド。	1	title		text	空文字
switch_dashboard (Switch Dashboard)		1	Switch Target Dashboard		pulldown	(Dashboard Config 情報の name 一覧)
csv (Import CSV File)	ファイル選択ボタンからCSVファイルをインポートするコマンド。	1	dialog settings		JSON	{ “title”: “CSV Import”, “description”: “”, “submit”: “import”, “cancel”: “cancel” }
		2	convert logic		javascript/ object	( row , index )=>{ return row; }
publish (Publish message to All user)	すべてのログインユーザーにメッセージを表示するコマンド。	1	publish message		JSON	{ “title”: “”, “message”: “”, “service”: “all”, “link”: “” }

2.5 Dashboard を保存する

実装が完了したDashboard を保存して公開します。保存画面ではいくつかの設定をする必要があります。

画面左上 [Save Current Dashboard] ボタンを押下します。

Update Dashboard 画面がポップアップ表示されたら表に従って各値を入力し、[Save Dashboard] ボタンで保存します。

パラメータ

設定値

name

Dashboard 定義ファイルのファイル名。拡張子 .json の前のファイル名。Shared Dashboard の一覧にはファイル名の昇順に Dashboard が並ぶ。

label

Dashboard のタイトル。

icon

Shared Dashboard の Dashboard の右側に並ぶ。

description

label で設定した Dashboard タイトルの補足。

privacy range

Dashboard の公開範囲。公開範囲を選択する方法（range mode）と、権限を指定する方法（role name mode）が指定可能。

range mode

選択値	公開範囲
Only myself	開発したユーザのみ（アカウント名で判定）
Share to all users	すべてのユーザ
Share to users with the same role	開発したユーザとロールが同じユーザのみ

role name mode

設定値
Specify role name	アクセス可能なロール名を指定（複数可）

share permission

公開しているユーザの Dashboard 編集権限。Read Only / Read/Write から選択が可能。Read Only は利用のみで編集不可、Read/Write は利用と編集が可能になる。

（layout）

編集不可。2.2 (事前設定) Dashboard のLayout Style を設定する章で設定した Layout Style 設定。

options - hideTabMode

タブの非表示設定。チェックを入れると、タブが非表示になる。

hideTabModeにチェックがない場合

hideTabModeにチェックがある場合

保存が完了すると、Shared Dashboard に保存した Dashboard が一覧に追加され、前項で設定した値は以下のように反映されます。

Dashboard を保存する手順は以上です。

2.5 動作確認およびデバッグ

2.5.1 Action Detail 内に Dump Command を追加する

Tip

💡 Action の Command Pallete には、デバッグ用のコマンドdumpが用意されています。Action Pipeline に並べた Command の実行結果を確認したい場合、該当の Command の下に配置することで確認が可能です。

Action Detail 画面で [dump] Commandをクリックし、確認したい Command の下に配置し、[Submit] ボタンを押下します。
Action が実行される画面イベントを実施すると、ポップアップ表示で直前の Command の実行結果を確認することが可能です。

2.5.2 Action Detail 内に Script Command を追加しログ出力するスクリプト `console.log()` を実装する

ブラウザの開発者モードのコンソールで、出力結果が確認できます。

2.5.3 call した API のエラーレスポンスを確認する

Tip

💡 Dashboard から call したAPI からエラーレスポンスが返却された場合、Runtime Error エリアからエラーを確認することができます。

Runtime Error は編集モードでもDashboard 保存後でも確認することが可能です。各画面に従って Runtime Error 表示ボタンを押下します。
- Dashboard Builder 画面 - 編集モード
- Dashboard Builder 画面
  
  Dashboard Builder
エラーレスポンスが返却された場合、エラーの件数が数字で表示されます。また、エラーの一覧が表示されるので、該当のエラーをクリック選択します。
該当のエラーをクリックすると Action の実行情報とそのレスポンス情報、およびログを確認することができます。

エラーの確認方法は以上です。

3. Dashboardをダウンロードする

Dashboard 定義ファイルは、Shared Dashboard からダウンロードすることが可能です。

ダウンロードしたい Dashboard の右側にあるダウンロードボタン [download file] を押下します。
[Submit] ボタンを押下します。

Dashboard 定義ファイルをダウンロードする手順は以上です。

4. Dashboardをインポートする

Dashboard 定義ファイルは、ローカル環境からインポートすることも可能です。

Shared dashboard のインポートボタン [Import from file] を押下します。
[ファイルを選択] ボタンを押下してローカル環境の定義ファイルを選択し、[Select] ボタンを押下します。

Dashboard が追加されました。

Dashboard 定義ファイルをインポートする手順は以上です。

5. 公開設定をカスタマイズする

Dashboard を表示する画面の共通デザインをカスタマイズする手順について紹介します。

5.1. Dashboardをカテゴリ化する

Dashboard はCategory 分類することができます。ここでは、Category 定義を作成する手順を記載します。

Shared dashboard の Category 編集ボタン[edit category] を押下します。

Edit Dashboard Category 画面がポップアップ表示されるので、表に従って入力し、[Submit] ボタンを押下して Category を作成します。Category を作成する場合は、[action] にAdd New Categoryが表示されている状態で編集します。（画面初期表示状態）

#	パラメータ	設定値	入力形式 / 型/ 言語	初期値
1	action	Category の編集タイプ (新規作成 / 編集)	pulldown (Add New Category/[Category Name]/…)	Add New Category
2	name	Category 名	テキスト入力	空
3	label	Category 表示名	テキスト入力	空
4	Icon	Category のアイコン	選択式	空
5	description	Category の説明	テキスト入力	空

Tip

💡 サイドバーの表示順について、Category のname値とDashboard のname値の昇順になります。各定義ファイルのname値が以下の表であった場合はキャプチャの表示順になります。

Dashboard / Category の Label 値	name値	category値
Tenant	00-tenant	未入力
Area	01-area	未入力
CloudService	02-cloud	02-category
NW-Equipment	03-nw	未入力
Employment	04-equipment	02-category
category	02-category	-

作成した Category は Dashboard 保存時に設定することが可能です。カテゴライズしたい Dashboard の編集画面から [Save Current Dashboard] ボタンを押下します。

[鉛筆ボタン] > [category] を選択します。

登録した Category がプルダウン表示されるので該当の Category を選択し、[Save Dashboard] を押下します。例えば、[name] に02と登録した Categoryが1つある場合は以下の様にプルダウンで表示されて選択することができます。
Dashboard を保存すると、以下の様にアコーディオン表示されることが確認できます。(label:Employment という Dashboard にlabel:category というCategory を設定した場合のイメージ)

Tip
💡 作成した Category を編集する場合は、Edit Dashboard Category 画面の [action] の横にあるプルダウンから編集したい CategoryUpdate: ...を選択することで編集が可能になります。

Category を定義する手順は以上です。

5.2. Dashboad公開設定

[Shared dashboard] > SharedDashboard 更新ボタン [update shared settings] を押下します。

Update Shared Setting 画面がポップアップ表示されるので、表に従って入力し、[Submit] ボタンを押下します。

#	パラメータ	設定値	入力形式 / 型/ 言語	初期値
1	title	画面タイトル	テキスト入力	Shared Dashboard
2	icon image	タイトル部に表示されるアイコン	url	-
3	header color (This setting is disabled in mobile view)	画面ヘッダの色。モバイル端末には反映されない。	選択式	#000000
4	design system (This setting does not take effect at this time)	画面のデザインシステム。※元提供バージョンでは選択しても変化はありません	pulldown (qmonus/sdpf/google/salesforce)	qmonus
5	application default theme (The theme applied at the first startup, can be changed later)	画面のデフォルトイメージ	pulldown (dark/light)	dark
6	minimize sidebar defaults	サイドバーをデフォルトで最小化するかの設定	checkbox	unchecked

公開設定の手順は以上です。

Qmonus Dashboard Builtin Widget の仕様はBuiltin Widget 仕様を参照してください。
参照可能な情報は以下になります。

Builtin Widget 一覧
設定パラメータ（Widget Name/Docs/PROPS）
出力パラメータ（Widget Name/Docs/EVENTS）
設定パラメータ変更に伴うレイアウトの挙動(Widget Name/Example/Controlsタブ)
Widget操作により出力されるAction情報(Widget Name/Example/Actionsタブ)

6.ダッシュボードチュートリアル

4.API開発チュートリアル

ダッシュボード開発

0. 特徴

アーキテクチャー

1 画面構成

1.1 Dashboard Builder

編集モード

アクション エディタ

1.2 Custom Dashboard

2. Dashboard を作成する

2.1 Layout を選択する

2.2 Widget を配置する

2.2.1 パレットエリアからから Widget を選択する

2.2.2. ウィザードでパラメータを設定する

2.2.3. ウィザードでイベントハンドラを設定する

イベントハンドラを上に移動させる

イベントハンドラを下に移動させる

不要なイベントハンドラを削除する

【参考】 Builtin Widget 仕様

【参考】 Local Widget 作成方法

2.3 Context Areas を設定する

2.3.1 3rdパーティライブラリをインポートする

2.3.2 変数を定義する

2.3.3 算出プロパティ を定義する

2.3.4 画面ロジックを定義する

1. Action を定義する

2. Action の内部処理を実装する

Action Pipeline に Command を追加する

Action Pipeline に Command を並び替える（実行の順番を変更する）

Action Pipeline に Command を Action Pipeline から削除する

Action の設定を変更する

【参考】 Action Command 一覧

2.5 Dashboard を保存する

range mode

role name mode

2.5 動作確認およびデバッグ

2.5.1 Action Detail 内に Dump Command を追加する

2.5.2 Action Detail 内に Script Command を追加しログ出力するスクリプト console.log() を実装する

2.5.3 call した API のエラーレスポンスを確認する

3. Dashboardをダウンロードする

4. Dashboardをインポートする

5. 公開設定をカスタマイズする

5.1. Dashboardをカテゴリ化する

5.2. Dashboad公開設定

6. 【New】Builtin Widget 仕様

アクションエディタ

2.3.3 算出プロパティを定義する

2.5.2 Action Detail 内に Script Command を追加しログ出力するスクリプト `console.log()` を実装する