モーダルフォーム

モーダルウィンドウでのフォームの作成と管理。

はじめに

モーダルは UI の機能で、ユーザーが現在のページを離れることなくフォームを開けるようにします。

モーダルの使用はユーザーエクスペリエンス（UX）を大幅に向上させ、ページを再読み込みしたり現在の画面のコンテキストを失ったりすることなく、CRUD（作成、読み取り、更新、削除） 操作を実行できるようにします。

Netuno はバックエンドとの通信と必要な HTML の注入を自動的に管理します。

前提条件

例を実装するには、次のものが必要です：

Netuno アプリケーションの開発環境へのアクセス。
Netuno の管理パネル（バックオフィス）で適切に設定されたフォーム。
JavaScript と DOM でのイベント操作に関する基本的な知識。

以下の例では、「テスト」 という汎用フォームを使用します。

これらの手順について不明な点がある場合は、フォームを参照してください。

基本構造

Netuno でのモーダルの作成と操作は、netuno.modal オブジェクトに集約されています。

netuno.modal.create() メソッドは、インターフェースにモーダルの基本構造を作成します。次のプロパティを持つ設定オブジェクトを受け取ります：

name（文字列）： モーダルの基になる（バックオフィスで作成された）フォームの名前。
callback（関数）： モーダルの構造が DOM に注入されるとすぐに（ただし表示される前に）実行される関数。作成されたモーダル要素をパラメータとして受け取ります。

コールバック関数

コールバック関数内で、ネイティブの読み込み関数を使用してフォームの状態（モード）を定義する必要があります：

一覧モード - netuno.loadForm()：そのフォームのレコードを検索・一覧表示するテーブルをレンダリングします。
編集/新規作成モード - netuno.loadFormEdit()：フォームの入力フィールドをレンダリングします。新しいレコードの挿入や既存レコードの編集に使用できます。

実装

以下では、より一般的な 3 つの使用シナリオを詳しく説明します。

1. 一覧モード

netuno.loadForm() は、ユーザーにフォームのすべてのデータを検索テーブル（グリッド）形式で表示させたい場合に使用します。

netuno.modal.create({
  name: 'テスト',
  callback: function (モーダル) {
    // 1. フォームを受け取る内部コンテナを特定します
    let フォームコンテナ = モーダル.find('[netuno-form]');
    // 2. フォームのデータ一覧をコンテナに注入します
    netuno.loadForm(フォームコンテナ); 
    // 3. モーダルをユーザーに表示します
    netuno.modal.show(モーダル);
  }
});

2. 新規作成モード

netuno.loadFormEdit() は「新規追加」タイプのボタンに使用します。データ入力の準備が整った空のフォームを開きます。

netuno.modal.create({
  name: 'テスト',
  callback: function (モーダル) {
    let フォームコンテナ = モーダル.find('[netuno-form]');
    // フォームを挿入モード（新規レコード）で読み込みます
    netuno.loadFormEdit(フォームコンテナ); 
    netuno.modal.show(モーダル);
  }
});

情報

netuno.loadFormEdit() を ID を渡さずに使用すると、Netuno は「編集画面」をゼロから使用したいと解釈します。空の入力フィールドを持つインターフェースを読み込み、新しいレコードの作成準備を整えます。このシナリオでは、Netuno は内部的に netuno:new イベントを発生させます。

3. 編集モード

モーダルで変更対象の特定のレコードを読み込む必要がある場合は、読み込み関数の 2 番目のパラメータとしてレコードの UID または ID を渡す必要があります。

// 例: ID 1234 のレコードを編集します
const レコードID = 1234; 

netuno.modal.create({
  name: 'テスト',
  callback: function (モーダル) {
    let フォームコンテナ = モーダル.find('[netuno-form]');
    // レコード 1234 のデータをフォームのフィールドに注入します
    netuno.loadFormEdit(フォームコンテナ, レコードID); 
    netuno.modal.show(モーダル);
  }
});

イベント

フォームのコンテナ（[netuno-form]）は、ユーザー操作のライフサイクルに合わせてカスタムイベントを発行します。

これらのイベントを使用して、フロントエンド固有のビジネスロジック（バックグラウンドでのテーブル更新、アラートの表示など）をトリガーすることをお勧めします。

イベントの種類	説明
`netuno:new`	新しい項目の作成画面が表示されたときに発生します。
`netuno:edit`	既存の項目の編集画面が表示されたときに発生します。
`netuno:save`	新しい項目が追加されたときに発生します。
`netuno:back`	戻るボタンがクリックされた後に発生します。
`netuno:delete`	項目が削除された後に発生します。

例: 複数のイベントをインターセプトする

この本番環境対応の例では、モーダルを作成し、ユーザー操作の成功を監視するための リスナー を追加します：

netuno.modal.create({
  name: 'テスト',
  callback: function (モーダル) {
    let フォームコンテナ = モーダル.find('[netuno-form]');
    
    // 挿入画面を監視しています
    フォームコンテナ.on('netuno:new', function(イベント) {
       console.info("作成インターフェースが読み込まれました。");
    });

    // 正常な保存を監視しています
    フォームコンテナ.on('netuno:save', function(イベント) {
       console.success("レコードが正常に保存されました！");
       // 例: 保存後にモーダルを自動的に閉じます
       netuno.modal.hide(モーダル); 
    });

    // モーダルを一覧モードでレンダリングして表示します
    netuno.loadForm(フォームコンテナ);
    netuno.modal.show(モーダル);
  }
});

問題が発生した場合や改善提案がある場合は、お問い合わせください。私たちのチームとコミュニティが喜んでサポートします。

良い開発を！

はじめに​

前提条件​

基本構造​

コールバック関数​

実装​

1. 一覧モード​

2. 新規作成モード​

3. 編集モード​

イベント​

例: 複数のイベントをインターセプトする​