From 0f8faa63c693cedf43a3e219b424de8df38124b6 Mon Sep 17 00:00:00 2001 From: tei-syou Date: Tue, 11 Aug 2026 13:43:59 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E3=82=AB=E3=82=B9=E3=82=BF=E3=83=A0?= =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88?= =?UTF-8?q?=E3=81=AB=E5=85=A5=E3=82=8C=E6=9B=BF=E3=81=88=E6=A9=9F=E8=83=BD?= =?UTF-8?q?(=E3=83=89=E3=82=AD=E3=83=A5=E3=83=A1=E3=83=B3=E3=83=88)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../entityview/customcomponent.adoc | 90 +++++++++++++++++++ .../entityview/detaillayout.adoc | 25 ++++++ .../entityview/index.adoc | 2 + .../entityview/searchlayout.adoc | 61 +++++++++++++ 4 files changed, 178 insertions(+) create mode 100644 developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/customcomponent.adoc diff --git a/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/customcomponent.adoc b/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/customcomponent.adoc new file mode 100644 index 0000000..da7d1f5 --- /dev/null +++ b/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/customcomponent.adoc @@ -0,0 +1,90 @@ +[[customcomponent]] +== カスタムコンポーネント + +カスタムコンポーネントをレイアウトに配置することで、独自の画面部品を画面に組み込むことができます。 + +カスタムコンポーネントは、 `コンポーネント種別` によって、テンプレート文字列を直接記述する方法と、登録済みのコンポーネントを呼び出す方法のいずれかを選択できます。 + +テンプレートの実装方法の詳細については、 link:../../../storybook/index.html?path=/docs/開発者ドキュメント-オリジナルテンプレート[コンポーネントカタログ^]を参照してください。 + + +[[customcomponent_settings]] +=== カスタムコンポーネントの設定 + +[cols="1,4a", options="header"] +|=== +|設定項目 |設定内容 + +|コンポーネント種別 +|カスタムコンポーネントの実装方式を選択します。 + +選択した種別によって、以降の項目の有効範囲や挙動が異なります。 + +TEMPLATE:: テンプレート文字列を直接記述してコンポーネントを定義します。 + +`テンプレートの解釈方法` に応じて `HTML` / `VUE_SFC` / `VUE_SFC_LIKE` のいずれかを選択できます。 + +COMPONENT:: 登録済みのコンポーネントを呼び出します。 + +`コンポーネント名` には呼び出すコンポーネントの名称を指定します。実行時にはコンポーネントが動的にロードされ、コンポーネントとしてレンダリングされます。 + +未登録のコンポーネント名を指定した場合、ロードに失敗し、コンポーネントが正しく表示されません。 + +[IMPORTANT] +==== +- `コンポーネント種別` が `COMPONENT` の場合、 `コンポーネント名` には登録済みのコンポーネント名を指定してください。 + + 未登録のコンポーネント名を指定した場合、ロードに失敗し、コンポーネントが正しく表示されません。 +==== + +|テンプレート定義名 +|登録済テンプレート名を設定します。 + +`コンポーネント種別` が `TEMPLATE` の場合に有効な設定です。 + +|テンプレートの解釈方法 +|記述されたテンプレート文字列の解釈タイプです。 `コンポーネント種別` が `TEMPLATE` の場合に選択できます。 + +以下の3つから選択できます。 + +HTML:: HTMLとして解釈します。HTMLやスクリプトの記述が可能です。 +VUE_SFC:: Vue.jsのSFC形式（単一ファイルコンポーネント形式）で記述されたコンポーネントとして解釈します。 +VUE_SFC_LIKE:: Vue.jsのランタイムを用いてコンポーネントとして解釈します。MDCでは、Vue.jsのランタイムに加えてコンパイラもバンドルしており、Vue.jsのテンプレート構文を利用することが可能です。 + +|コンポーネント名 +|`コンポーネント種別` が `COMPONENT` の場合は必須です。呼び出すコンポーネントの名称を指定します。 + +`コンポーネント種別` が `TEMPLATE` の場合で `テンプレートの解釈方法` が `VUE_SFC_LIKE` の場合も必須です。 + +`テンプレートの解釈方法` が `VUE_SFC` でコンポーネント名が未入力の場合、自動でランダムなコンポーネント名を割り当てます。 + +コンポーネント名は、英文字とハイフン(-)のみを利用したパスカルケースでの命名を推奨します。 + +|VUE_SFC形式のテンプレートをプリコンパイルするか +|Vue.jsのSFC形式のテンプレートをプリコンパイルするかを指定します。`テンプレートの解釈方法` が `VUE_SFC` であり、Vue.jsのSFC形式のテンプレートを定義保存時にプリコンパイルしておきたい場合にチェックします。プリコンパイルしておくことで、コンポーネントの初期化処理を高速化できます。 + +[NOTE] +==== +プリコンパイルの注意点:: +- プリコンパイルを実行したい場合には、 `コンポーネント名` の指定が必須となります。 +- `テンプレート定義名` で指定した登録済みのテンプレートは、定義保存時に実行されてプリコンパイルされるため、テンプレートの内容が変更された場合は再度定義を保存する必要があります。また、JSPやGroovyTemplateなどで記述されたテンプレートには、リクエスト情報やセッション情報、ユーザー固有情報などを使用しないように注意してください。 +==== + +|=== + + +[[customcomponent_data_binding]] +=== データ受け渡し + +カスタムコンポーネントが受け取る props および発火する emits は、 **カスタムコンポーネントで置き換える対象のMDC標準のコンポーネントが受け取る props および発火する emits と同じ** になります。 + +詳細は置き換え対象のMDC標準コンポーネントの実装を参照してください。 + +.例：ファイルアップロードダイアログをカスタムコンポーネントに置き換える場合 +==== +置き換え対象の `MIFileUploadDialog.vue` が受け取る props と発火する emits がそのままカスタムコンポーネントに引き渡されます。 + + +.置き換え対象の props +* `uploadButtonConfig` : アップロードボタン設定 +* `uploadResultState` : アップロード結果 +* `entityName` : エンティティ名 +* `entityDisplayName` : エンティティ表示名 +* `viewName` : ビュー名 +* `contextMap` : コンテキストマップ（下位のコンポーネントに引き渡す情報） + +.置き換え対象の emits +* `click:close` : ダイアログを閉じる +* `click:sample-download` : サンプルダウンロード要求 +* `click:execute-upload` : アップロード実行 +* `do-custom-click-event-handler` : カスタムクリックイベントハンドラ呼び出し + +カスタムコンポーネントはこれらの props / emits を、置き換え対象が `VUE_SFC` / `VUE_SFC_LIKE` のテンプレートで実装されたコンポーネントか、 `COMPONENT` で読み込まれたコンポーネントかにかかわらず、透過的に受け渡します。 +==== diff --git a/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/detaillayout.adoc b/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/detaillayout.adoc index 9b7e3c1..46bc654 100644 --- a/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/detaillayout.adoc +++ b/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/detaillayout.adoc @@ -67,6 +67,10 @@ link:https://materialdesignicons.com/[Material Design Icons^]のアイコンタ |編集ボタンや保存ボタンなど、標準で提供されるボタンの設定をカスタマイズします。 詳細は<>を参照してください。 +|画面コンポーネントカスタム設定 +|詳細画面の各構成要素を、独自のカスタムコンポーネントに置き換える場合に設定します。 +詳細は<>を参照してください。 + |画面上部のカスタムボタン |タイトル領域の下に表示する独自のボタンを設定します。 詳細は<>を参照してください。 @@ -178,6 +182,27 @@ link:https://materialdesignicons.com/[Material Design Icons^]のアイコンタ NOTE: 保存ボタン、ロック解除ボタンには `表示フラグ` `表示判定スクリプト` 設定はありません。 ロック解除ボタンはロックボタン設定で表示が制御されます。 +[[detailview_customcomponent]] +==== カスタムコンポーネント + +詳細画面を構成する各要素を、独自のカスタムコンポーネントに置き換える場合に設定します。 + +各カスタムコンポーネントの共通設定項目の詳細は、 <> を参照してください。 + +[cols="1,4a", options="header"] +|=== +|設定項目 |設定内容 + +|詳細ビュー +|詳細画面全体のレイアウトを置き換えるカスタムコンポーネントを設定します。 + +`MDetailView` コンポーネントを置き換えます。 + +|選択ダイアログ +|参照プロパティの選択ダイアログを置き換えるカスタムコンポーネントを設定します。 + +`MSelectDialog` コンポーネントを置き換えます。 + +|=== + + .カスタムクリックイベントの変数 カスタムクリックイベントとして実行するJavaScriptには、以下の変数がバインドされます。 ==== diff --git a/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/index.adoc b/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/index.adoc index d46309b..1159da1 100644 --- a/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/index.adoc +++ b/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/index.adoc @@ -21,4 +21,6 @@ include::bulklayout.adoc[] include::filter.adoc[] +include::customcomponent.adoc[] + include::customize.adoc[] diff --git a/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/searchlayout.adoc b/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/searchlayout.adoc index f4d190d..acff873 100644 --- a/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/searchlayout.adoc +++ b/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/searchlayout.adoc @@ -73,6 +73,10 @@ link:https://materialdesignicons.com/[Material Design Icons^]のアイコンタ |検索条件表示ボタンや新規登録ボタンなど、標準で提供されるボタンの設定をカスタマイズします。 詳細は<>を参照してください。 +|カスタムコンポーネント設定 +|検索画面の各構成要素を、独自のカスタムコンポーネントに置き換える場合に設定します。 +詳細は<>を参照してください。 + |ごみ箱操作をユーザー削除データに限定 |ごみ箱内のデータ操作（取得/復元/削除）を削除したユーザーのみに限定する場合はチェックを入れます。 限定する場合、管理者ユーザーも他者削除データは操作ができなくなります。 @@ -179,6 +183,63 @@ link:https://materialdesignicons.com/[Material Design Icons^]のアイコンタ NOTE: 検索実行ボタン、選択ボタンには `表示フラグ` `表示判定スクリプト` 設定はありません。 +[[searchview_customcomponent]] +==== 検索画面のカスタムコンポーネント + +検索画面を構成する各要素を、独自のカスタムコンポーネントに置き換える場合に設定します。 + +各カスタムコンポーネントの共通設定項目の詳細は、 <> を参照してください。 + +[cols="1,4a", options="header"] +|=== +|設定項目 |設定内容 + +|検索ビュー +|検索画面全体のレイアウトを置き換えるカスタムコンポーネントを設定します。 + +`MSearchView` コンポーネントを置き換えます。 + +|検索条件 +|検索条件エリアを置き換えるカスタムコンポーネントを設定します。 + +`MSearchCondition` コンポーネントを置き換えます。 + +|検索条件ダイアログ +|検索条件ダイアログを置き換えるカスタムコンポーネントを設定します。 + +`MSearchConditionDialog` コンポーネントを置き換えます。 + +|検索結果 +|検索結果エリアを置き換えるカスタムコンポーネントを設定します。 + +`MSearchResult` コンポーネントを置き換えます。 + +|検索結果ペイン +|2 ペイン表示時の検索結果ペインを置き換えるカスタムコンポーネントを設定します。 + +`MSearchResultPane` コンポーネントを置き換えます。 + +|カード検索結果カード +|カード表示形式の検索結果に表示する 1 件分のカードを置き換えるカスタムコンポーネントを設定します。 + +`MICardSearchResult` コンポーネントを置き換えます。 + +|選択ダイアログ +|参照プロパティの選択ダイアログを置き換えるカスタムコンポーネントを設定します。 + +`MSelectDialog` コンポーネントを置き換えます。 + +|アップロードダイアログ +|検索結果部からファイルアップロードを実行する際のダイアログを置き換えるカスタムコンポーネントを設定します。 + +`MIFileUploadDialog` コンポーネントを置き換えます。 + +|アップロードダイアログ結果 +|非同期アップロードの進捗を表示するダイアログを置き換えるカスタムコンポーネントを設定します。 + +`MIFileUploadDialogResult` コンポーネントを置き換えます。 + +|詳細ダイアログ +|検索結果から詳細・編集ダイアログを開いた際のダイアログを置き換えるカスタムコンポーネントを設定します。 + +`MDetailDialog` コンポーネントを置き換えます。 + +|詳細ペイン +|2 ペイン表示時の詳細ペインを置き換えるカスタムコンポーネントを設定します。 + +`MDetailPane` コンポーネントを置き換えます。 + +|=== + + .カスタムクリックイベントの変数 カスタムクリックイベントとして実行するJavaScriptには、以下の変数がバインドされます。 ==== From f2935daf9b692636e23e441847eb8bea75fd6a4a Mon Sep 17 00:00:00 2001 From: tei-syou Date: Tue, 11 Aug 2026 15:11:45 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E3=83=89=E3=82=AD=E3=83=A5=E3=83=A1?= =?UTF-8?q?=E3=83=B3=E3=83=88=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../entityview/customcomponent.adoc | 25 +++++++++++-------- .../entityview/searchlayout.adoc | 12 ++++----- 2 files changed, 20 insertions(+), 17 deletions(-) diff --git a/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/customcomponent.adoc b/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/customcomponent.adoc index da7d1f5..8891dac 100644 --- a/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/customcomponent.adoc +++ b/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/customcomponent.adoc @@ -68,23 +68,26 @@ VUE_SFC_LIKE:: Vue.jsのランタイムを用いてコンポーネントとし カスタムコンポーネントが受け取る props および発火する emits は、 **カスタムコンポーネントで置き換える対象のMDC標準のコンポーネントが受け取る props および発火する emits と同じ** になります。 + 詳細は置き換え対象のMDC標準コンポーネントの実装を参照してください。 -.例：ファイルアップロードダイアログをカスタムコンポーネントに置き換える場合 +.例：検索条件ダイアログをカスタムコンポーネントに置き換える場合 ==== -置き換え対象の `MIFileUploadDialog.vue` が受け取る props と発火する emits がそのままカスタムコンポーネントに引き渡されます。 + +置き換え対象の `MSearchConditionDialog.vue` が受け取る props と発火する emits がそのままカスタムコンポーネントに引き渡されます。 + .置き換え対象の props -* `uploadButtonConfig` : アップロードボタン設定 -* `uploadResultState` : アップロード結果 -* `entityName` : エンティティ名 -* `entityDisplayName` : エンティティ表示名 -* `viewName` : ビュー名 +* `viewKey` : EntityView の Key 情報 +* `title` : 検索画面タイトル +* `searchConditionSection` : 検索条件セクション +* `initialSearchCondition` : 初期検索条件 +* `searchErrorInfo` : 検索エラーメッセージ +* `aboveConditionSection` : 検索条件上のセクション +* `belowConditionSection` : 検索条件下のセクション +* `customSearchCondition` : 検索条件をさらに別のカスタムコンポーネントで置き換える設定 * `contextMap` : コンテキストマップ（下位のコンポーネントに引き渡す情報） .置き換え対象の emits -* `click:close` : ダイアログを閉じる -* `click:sample-download` : サンプルダウンロード要求 -* `click:execute-upload` : アップロード実行 -* `do-custom-click-event-handler` : カスタムクリックイベントハンドラ呼び出し +* `change:search-condition` : 検索条件変更 +* `loaded:definition` : 検索画面定義ロード完了 +* `error:load` : 検索画面定義ロード失敗 +* `update:linkProperty` : 連動プロパティ更新 カスタムコンポーネントはこれらの props / emits を、置き換え対象が `VUE_SFC` / `VUE_SFC_LIKE` のテンプレートで実装されたコンポーネントか、 `COMPONENT` で読み込まれたコンポーネントかにかかわらず、透過的に受け渡します。 ==== diff --git a/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/searchlayout.adoc b/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/searchlayout.adoc index acff873..86657ab 100644 --- a/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/searchlayout.adoc +++ b/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/searchlayout.adoc @@ -221,13 +221,13 @@ NOTE: 検索実行ボタン、選択ボタンには `表示フラグ` `表示判 |参照プロパティの選択ダイアログを置き換えるカスタムコンポーネントを設定します。 + `MSelectDialog` コンポーネントを置き換えます。 -|アップロードダイアログ -|検索結果部からファイルアップロードを実行する際のダイアログを置き換えるカスタムコンポーネントを設定します。 + -`MIFileUploadDialog` コンポーネントを置き換えます。 +|ファイルアップロードダイアログ +|ファイルアップロードの入力フォームと結果表示を 1 つのカスタムコンポーネントに置き換える場合に設定します。 + +`MFileUploadDialog` コンポーネントを置き換えます。 -|アップロードダイアログ結果 -|非同期アップロードの進捗を表示するダイアログを置き換えるカスタムコンポーネントを設定します。 + -`MIFileUploadDialogResult` コンポーネントを置き換えます。 +NOTE: 入力フォーム (旧 `MIFileUploadDialog`) と結果表示 (旧 `MIFileUploadDialogResult`) は、 +カスタムコンポーネント設定上は 1 つの差し替え単位にまとめられています。 +差し替え側コンポーネントは両方の見た目を制御する必要があります。 |詳細ダイアログ |検索結果から詳細・編集ダイアログを開いた際のダイアログを置き換えるカスタムコンポーネントを設定します。 + From ee1bce99170b27a812a36866930156fffcd0828e Mon Sep 17 00:00:00 2001 From: tei-syou Date: Tue, 11 Aug 2026 17:10:11 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC?= =?UTF-8?q?=E3=83=8D=E3=83=B3=E3=83=88=E5=90=8D=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../materialdesigncomponents/entityview/searchlayout.adoc | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/searchlayout.adoc b/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/searchlayout.adoc index 86657ab..3beb20c 100644 --- a/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/searchlayout.adoc +++ b/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/searchlayout.adoc @@ -215,7 +215,7 @@ NOTE: 検索実行ボタン、選択ボタンには `表示フラグ` `表示判 |カード検索結果カード |カード表示形式の検索結果に表示する 1 件分のカードを置き換えるカスタムコンポーネントを設定します。 + -`MICardSearchResult` コンポーネントを置き換えます。 +`MCardSearchResultCard` コンポーネントを置き換えます。 |選択ダイアログ |参照プロパティの選択ダイアログを置き換えるカスタムコンポーネントを設定します。 + @@ -225,10 +225,6 @@ NOTE: 検索実行ボタン、選択ボタンには `表示フラグ` `表示判 |ファイルアップロードの入力フォームと結果表示を 1 つのカスタムコンポーネントに置き換える場合に設定します。 + `MFileUploadDialog` コンポーネントを置き換えます。 -NOTE: 入力フォーム (旧 `MIFileUploadDialog`) と結果表示 (旧 `MIFileUploadDialogResult`) は、 -カスタムコンポーネント設定上は 1 つの差し替え単位にまとめられています。 -差し替え側コンポーネントは両方の見た目を制御する必要があります。 - |詳細ダイアログ |検索結果から詳細・編集ダイアログを開いた際のダイアログを置き換えるカスタムコンポーネントを設定します。 + `MDetailDialog` コンポーネントを置き換えます。 From c069fc74fd3fb87847d85ee3a8d5213745c56139 Mon Sep 17 00:00:00 2001 From: tei-syou Date: Tue, 11 Aug 2026 17:41:17 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E4=B8=8D=E8=A6=81=E3=81=AA=E8=AA=AC?= =?UTF-8?q?=E6=98=8E=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../entityview/customcomponent.adoc | 6 ------ 1 file changed, 6 deletions(-) diff --git a/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/customcomponent.adoc b/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/customcomponent.adoc index 8891dac..ff943a5 100644 --- a/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/customcomponent.adoc +++ b/developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/customcomponent.adoc @@ -25,12 +25,6 @@ COMPONENT:: 登録済みのコンポーネントを呼び出します。 + `コンポーネント名` には呼び出すコンポーネントの名称を指定します。実行時にはコンポーネントが動的にロードされ、コンポーネントとしてレンダリングされます。 + 未登録のコンポーネント名を指定した場合、ロードに失敗し、コンポーネントが正しく表示されません。 -[IMPORTANT] -==== -- `コンポーネント種別` が `COMPONENT` の場合、 `コンポーネント名` には登録済みのコンポーネント名を指定してください。 + - 未登録のコンポーネント名を指定した場合、ロードに失敗し、コンポーネントが正しく表示されません。 -==== - |テンプレート定義名 |登録済テンプレート名を設定します。 + `コンポーネント種別` が `TEMPLATE` の場合に有効な設定です。