Material Design Components (TopView)

1. TopView

TopViewは、MDCモジュールにおけるTop画面に表示する内容を管理する機能です。お知らせ一覧や最終ログイン日時表示といったパーツを標準で提供するほか、独自のテンプレートやGroovyTemplateを配置して自由にカスタマイズすることも可能です。

Navigationと併せてロールと連動しており、ロール毎にTopViewとNavigationを管理できます。（ロールとの連動）

2. 操作説明

2.1. Top画面

MDCモジュールにおけるTop画面です。

topview screen

2.2. パーツ

Top画面のコンテンツ部分に表示するパーツです。

お知らせ一覧

アプリケーション管理者やシステム管理者が登録したお知らせ情報を一覧で表示するパーツです。一覧のアイテムをクリックするとお知らせ情報の詳細が表示されます。
お知らせ情報は、 mtp.Information エンティティで管理されています。

parts informationlist

最終ログイン日時

現在ログイン中のユーザーが最後にログインした日時を表示するパーツです。

parts lastlogin

検索結果一覧

エンティティの検索結果を一覧で表示するパーツです。
指定したSearchViewの定義にしたがって検索結果を表示します。検索結果の表示タイプに TABLE が、テーブル形式の場合のテーブルの高さに固定値が指定されることを想定しています。

parts searchresultlist

スペース

スペースを表示するパーツです。
パーツの間にスペースを空けたい場合や、複数列表示で空白のエリアを作りたい場合に利用します。

parts space

3. TopViewの管理

3.1. TopViewの作成

AdminConsoleのメニューから MDC_TopView を右クリックし、 TopViewを作成する を選択します。表示されたダイアログの Name には対応するロールコードを設定してください。

3.2. 設定

左側のドロップ可能領域に対して、右側の Items からパーツをドラッグ&ドロップしてパーツの配置/編集を行います。また、配置したパーツをドロップ可能領域内でドラッグ&ドロップすることで、パーツの順序を変更できます。

標準提供するパーツには以下のものがあります。
パーツには複数配置可能なものと不可能なものがあり、AdminConsole上でパーツの右側に (U) と表示されているパーツは、複数配置することができないUniqueなパーツです。

パーツ名	説明	複数配置可能か
Information List	お知らせ情報で登録したデータを表示します。	×
Last Login	最終ログイン日時を表示します。	×
SearchResult List	選択したエンティティの検索結果一覧を表示します。	○
Custom Parts	Script	GroovyTemplateで記述されたテンプレートを表示します。	○
Template	登録済みのテンプレートを表示します。	○
Space	スペースを表示します。	○

パーツ名

説明

複数配置可能か

Information List

お知らせ情報で登録したデータを表示します。

Last Login

最終ログイン日時を表示します。

SearchResult List

選択したエンティティの検索結果一覧を表示します。

○

Custom Parts

Script

GroovyTemplateで記述されたテンプレートを表示します。

○

Template

登録済みのテンプレートを表示します。

○

Space

スペースを表示します。

○

各パーツのアイコンをクリックすることで、パーツの詳細設定ができます。ここからは各パーツの詳細設定について説明します。

共通設定項目

各パーツに共通して設定できる項目です。

設定項目	設定内容
列情報	パーツの表示領域を設定します。列情報の詳細については列情報を参照してください。

列情報

MDCはコンテンツのレイアウト設定として全体を12ポイントとするグリッドシステムを利用します。画面サイズに対するブレークポイントに対して、コンテンツを表示するサイズを設定します。
各ブレークポイントは、MdcConfigServiceで設定可能です。

設定項目	設定内容
Extra Smallサイズの列数	画面サイズが600px以下の場合の列数の設定します。（設定範囲は1~12）
Smallサイズの列数	画面サイズが600px以上 960px以下の場合の列数の設定します。（設定範囲は1~12）
Mediumサイズの列数	画面サイズが960px以上 1264px以下の場合の列数の設定します。（設定範囲は1~12）
Largeサイズの列数	画面サイズが1264px以上 1904px以下の場合の列数の設定します。（設定範囲は1~12）
Extra Largeサイズの列数	画面サイズが1904px以上の場合の列数の設定します。（設定範囲は1~12）

設定項目

設定内容

Extra Smallサイズの列数

画面サイズが600px以下の場合の列数の設定します。（設定範囲は1~12）

Smallサイズの列数

画面サイズが600px以上 960px以下の場合の列数の設定します。（設定範囲は1~12）

Mediumサイズの列数

画面サイズが960px以上 1264px以下の場合の列数の設定します。（設定範囲は1~12）

Largeサイズの列数

画面サイズが1264px以上 1904px以下の場合の列数の設定します。（設定範囲は1~12）

Extra Largeサイズの列数

画面サイズが1904px以上の場合の列数の設定します。（設定範囲は1~12）

Information List

Top画面でお知らせ一覧を表示するパーツです。パスワード有効期限が近づいてきた際に警告メッセージを表示することも可能です。

設定項目設定内容

設定項目	設定内容
Title	タイトルをカスタマイズしたい場合に指定します。未設定の場合は `お知らせ情報` と表示されます。
Icon Tag	タイトルの前に表示するアイコンを設定できます。 Material Design Iconsのアイコンタグを設定できます。（例:mdi-note）
Class	スタイルシートのクラス名を指定します。複数指定する場合は半角スペースで区切ってください。
Time Display Range	一覧上の時間部分の表示範囲を指定します。 default 日付のみ表示します。 SEC 秒まで表示します MIN 分まで表示します。 HOUR 時まで表示します。 NONE 日付のみ表示します。
Scroll display number	お知らせ一覧がスクロール表示となるお知らせ件数の閾値を指定します。未指定の場合は、スクロール表示になりません。
Enable Html Tag	本項目がチェックされている場合、お知らせ情報の詳細表示時にHTMLタグが有効になります。
Information Detail Custom Style	お知らせ詳細のメッセージ表示部分に対して、直接style属性をGroovyScriptで指定することが可能です。お知らせ内容によって表示を強調させたい場合などに利用します。以下のオブジェクトがバインドされています。 today 現在の日付。 `java.sql.Timestamp` のインスタンス entity 詳細表示中のお知らせ情報エンティティ
Show warning message of the password expiration date	本項目がチェックされている場合、パスワード有効期間に対する警告メッセージを表示します。
Remain days threshold	有効期限の何日前から警告を表示するかの閾値を設定します。
Custom warning message	警告メッセージの文言をカスタマイズしたい場合に指定します。
Custom alert message style	警告メッセージ表示領域のスタイルをカスタマイズしたい場合に指定します。Vuetify.jsのアラートコンポーネントを使用します。 `info` 、 `warning` 、 `error` 、 `info(outline)` 、 `warning(outline)` 、 `error(outline)` からスタイルを選択可能です。未指定の場合のデフォルトは、 `warning` です。
Custom alert icon	警告メッセージ表示領域のアイコンをカスタマイズしたい場合に指定します。 Material Design Iconsのアイコンタグを設定できます。（例:mdi-alert）

Title

タイトルをカスタマイズしたい場合に指定します。未設定の場合は お知らせ情報 と表示されます。

Icon Tag

タイトルの前に表示するアイコンを設定できます。
Material Design Iconsのアイコンタグを設定できます。（例:mdi-note）

Class

スタイルシートのクラス名を指定します。複数指定する場合は半角スペースで区切ってください。

Time Display Range

一覧上の時間部分の表示範囲を指定します。

default: 日付のみ表示します。
SEC: 秒まで表示します
MIN: 分まで表示します。
HOUR: 時まで表示します。
NONE: 日付のみ表示します。

Scroll display number

お知らせ一覧がスクロール表示となるお知らせ件数の閾値を指定します。
未指定の場合は、スクロール表示になりません。

Enable Html Tag

本項目がチェックされている場合、お知らせ情報の詳細表示時にHTMLタグが有効になります。

Information Detail Custom Style

お知らせ詳細のメッセージ表示部分に対して、直接style属性をGroovyScriptで指定することが可能です。お知らせ内容によって表示を強調させたい場合などに利用します。

以下のオブジェクトがバインドされています。

today: 現在の日付。 java.sql.Timestamp のインスタンス
entity: 詳細表示中のお知らせ情報エンティティ

Show warning message of the password expiration date

本項目がチェックされている場合、パスワード有効期間に対する警告メッセージを表示します。

Remain days threshold

有効期限の何日前から警告を表示するかの閾値を設定します。

Custom warning message

警告メッセージの文言をカスタマイズしたい場合に指定します。

Custom alert message style

警告メッセージ表示領域のスタイルをカスタマイズしたい場合に指定します。Vuetify.jsのアラートコンポーネントを使用します。 info 、 warning 、 error 、 info(outline) 、 warning(outline) 、 error(outline) からスタイルを選択可能です。未指定の場合のデフォルトは、 warning です。

Custom alert icon

警告メッセージ表示領域のアイコンをカスタマイズしたい場合に指定します。 Material Design Iconsのアイコンタグを設定できます。（例:mdi-alert）

Last Login

Top画面にログイン中のユーザーの最終ログイン日時を表示します。

設定項目	設定内容
Class	スタイルシートのクラス名を指定します。複数指定する場合は半角スペースで区切ってください。

設定項目

設定内容

Class

スタイルシートのクラス名を指定します。複数指定する場合は半角スペースで区切ってください。

SearchResult List

Top画面に選択したエンティティの検索結果一覧を表示するパーツです。

設定項目	設定内容
Entity	対象のエンティティを選択します。
SearchResult List View	検索結果一覧に適用するSearchViewのView名を指定します。
Link Action View	リンクから検索画面に遷移する際に適用するSearchViewのView名を指定します。
Filter	検索結果一覧に適用するフィルタ定義を指定します。
Title	タイトルをカスタマイズしたい場合に指定します。未指定の場合は、エンティティ名が表示されます。
Icon Tag	タイトルの前に表示するアイコンを設定できます。 Material Design Iconsのアイコンタグを設定できます。（例:mdi-note）
Class	スタイルシートのクラス名を指定します。複数指定する場合は半角スペースで区切ってください。

設定項目

設定内容

Entity

対象のエンティティを選択します。

SearchResult List View

検索結果一覧に適用するSearchViewのView名を指定します。

Link Action View

リンクから検索画面に遷移する際に適用するSearchViewのView名を指定します。

Filter

検索結果一覧に適用するフィルタ定義を指定します。

Title

タイトルをカスタマイズしたい場合に指定します。未指定の場合は、エンティティ名が表示されます。

Icon Tag

タイトルの前に表示するアイコンを設定できます。
Material Design Iconsのアイコンタグを設定できます。（例:mdi-note）

Class

スタイルシートのクラス名を指定します。複数指定する場合は半角スペースで区切ってください。

Space

Top画面にスペースを表示するパーツです。

設定項目	設定内容
Class	スタイルシートのクラス名を指定します。複数指定する場合は半角スペースで区切ってください。

設定項目

設定内容

Class

スタイルシートのクラス名を指定します。複数指定する場合は半角スペースで区切ってください。

Script

Top画面にGroovyTemplateで記述されたテンプレートを表示します。
HTMLやスクリプト、Vue.jsのSFC形式（単一ファイルコンポーネント形式）などでテンプレートを記述できます。
テンプレートの実装方法の詳細については、コンポーネントカタログを参照してください。

設定項目設定内容

Template Interpret Type

記述されたテンプレート文字列の解釈タイプです。以下の３つから選択できます。

HTML: HTMLとして解釈します。HTMLやスクリプトの記述が可能です。
VUE_SFC: Vue.jsのSFC形式（単一ファイルコンポーネント形式）で記述されたコンポーネントとして解釈します。
VUE_SFC_LIKE: Vue.jsのランタイムを用いてコンポーネントとして解釈します。MDCでは、Vue.jsのランタイムに加えてコンパイラもバンドルしており、Vue.jsのテンプレート構文を利用することが可能です。

ComponentName

コンポーネント名を設定します。コンポーネント名は、英文字とハイフン(-)のみを利用したパスカルケースでの命名を推奨します。 Template Interpret Type が VUE_SFC_LIKE の場合、コンポーネント名の指定は必須です。 Template Interpret Type が VUE_SFC でコンポーネント名が未入力の場合、自動でランダムなコンポーネント名を割り当てます。

Script

スクリプト編集画面を表示してGroovyTemplateの文法に従って記述します。詳細はGroovyTemplateを参照してください。

Precompile VUE_SFC format template

Vue.jsのSFC形式のテンプレートをプリコンパイルするかを指定します。Template Interpret Type が VUE_SFC であり、Vue.jsのSFC形式のテンプレートを定義保存時にプリコンパイルしておきたい場合にチェックします。プリコンパイルしておくことで、コンポーネントの初期化処理を高速化できます。

プリコンパイルの注意点

プリコンパイルを実行したい場合には、 ComponentName の指定が必須となります。
Script に記述したGroovyTemplateは、TopView定義保存時に実行されてプリコンパイルされるため、リクエスト情報やセッション情報、ユーザー固有情報などを使用しないように注意してください。

VUE_SFC形式、VUE_SFC_LIKE形式の場合のコンポーネントとのデータ受け渡し（props/emit）

以下のデータがpropsとしてコンポーネントに引き渡されます。

contextMap: コンテキストマップ。リアクティブな空のMapオブジェクト。
コンテキストマップにデータを格納することで、複数のパーツ（コンポーネント）間でリアクティブにデータを共有することが可能です。

Template

Top画面に登録済みのテンプレートを表示します。
テンプレートの実装方法の詳細については、コンポーネントカタログを参照してください。

設定項目設定内容

Template Interpret Type

テンプレートの解釈タイプです。以下の３つから選択できます。

HTML: HTMLとして解釈します。HTMLやスクリプトの記述が可能です。
VUE_SFC: Vue.jsのSFC形式（単一ファイルコンポーネント形式）で記述されたコンポーネントとして解釈します。
VUE_SFC_LIKE: Vue.jsのランタイムを用いてコンポーネントとして解釈します。MDCでは、Vue.jsのランタイムに加えてコンパイラもバンドルしており、Vue.jsのテンプレート構文を利用することが可能です。

ComponentName

Template

登録済みのテンプレートを選択します。

Precompile VUE_SFC format template

プリコンパイルの注意点

プリコンパイルを実行したい場合には、 ComponentName の指定が必須となります。
Template で指定した登録済みのテンプレートは、TopView定義保存時に実行されてプリコンパイルされるため、テンプレートの内容が変更された場合は再度TopView定義を保存する必要があります。また、JSPやGroovyTemplateなどで記述されたテンプレートには、リクエスト情報やセッション情報、ユーザー固有情報などを使用しないように注意してください。

VUE_SFC形式、VUE_SFC_LIKE形式の場合のコンポーネントとのデータ受け渡し（props/emit）

以下のデータがpropsとしてコンポーネントに引き渡されます。

contextMap: コンテキストマップ。リアクティブな空のMapオブジェクト。
コンテキストマップにデータを格納することで、複数のパーツ（コンポーネント）間でリアクティブにデータを共有することが可能です。

4. ロールとの連動

mtp.auth.Role エンティティのロールコードとTopViewの定義名が連動しており、ユーザーにマッチするロールに対応するTopView定義を元にTop画面を表示します。

ユーザーにマッチするロールに対応するTopView定義が存在しない場合は、 DEFAULT 定義を元にTop画面を表示します。 DEFAULT 定義も存在しない場合には、Top画面には何も表示されません。 DEFAULT 定義は、管理者によるナビゲーション変更か、TopView定義が存在しないロールの場合にのみ使用されるデフォルトのTopView定義です。

Navigation も同様にロールと連動しています。ユーザーにマッチするロールが複数であり、それに対応するNavigation定義も複数の場合には、画面右上のユーザーメニューに ナヴィゲーション変更 が表示されます。対象のナヴィゲーションを選択することで、表示されるTop画面も併せて変更されます。