(1) 顧客管理アプリ 繰り返しコンテナの設定最終更新日: 2020年2月3日

繰り返しコンテナとは

多くの業務アプリケーションでは「明細」情報を扱います。
ここで言う明細とは、モデル内のまとまった「データ群」を指します。
明細は(これを格納する)データと結びついており、当該データを削除すると明細データも同時に削除されます。

今回のチュートリアルでは、新しいモデル「営業日報」を作成し、その中に「訪問履歴」という形で明細情報を登録できるようにします。
この訪問履歴情報は一つの営業日報データの中に複数登録できます。

Wagby EEでは、こうした明細情報を「繰り返しコンテナ」型の項目として定義します。

「営業日報」モデルのイメージ

繰り返しコンテナの設定

  1. 新しいモデルを追加します。
    新規モデルの登録画面(>新規モデル をクリック)で、以下の通り設定します。

    モデル名:営業日報
    モデルID:dailyreport
    入力行の追加は、>「新規」をクリックすると行えます。
    項目名(日本語)項目ID(英語)主キー検索一覧
    営業日報IDdailyreportid数値--
    日付date日付・時刻
    担当者staff文字列
    訪問履歴visit繰り返しコンテナ--
    番号visit/vid繰り返しコンテナID--
    顧客visit/vcustomer 他モデルの項目参照
    【型詳細設定】
    参照先モデル:顧客(customer)
    入力タイプ:検索画面
    参照先項目:顧客名称 (customername)
    --
    内容visit/vmemo文字列--

    繰り返しコンテナの定義ルール

    • 繰り返しコンテナの項目群(番号・顧客・内容)は、項目IDを「繰り返しコンテナの項目ID/項目ID」のように定義します。
      今回は繰り返しコンテナの項目IDが「visit」のため、visit/XXXXXという項目IDになります。
    • 繰り返しコンテナの先頭には、「繰り返し項目コンテナID」を必ず定義します。
      これは、コンテナの登録データにそれぞれ番号を振り、内部的に管理しておく必要があるためです。

    「顧客」項目に関する補足

    型を「他モデル参照」に設定する理由

    訪問履歴には、「どの顧客を訪問したか」という訪問先情報を格納する必要があります。
    定義済みの「顧客」モデルを参照することで、顧客モデルと訪問履歴が紐づけられ、管理しやすくなります。

    入力タイプを「検索画面」に設定する理由

    「顧客」モデルは運用によってはデータ量が数百件~数万件に及ぶことも想定されます。
    他の入力タイプ(選択肢)は画面表示の度にデータを全件取得するため処理に時間がかかる上、利用時に該当データを見つけるのが困難です。
    そこで、入力タイプを「検索画面」に設定します。
    それにより、大量のデータが登録されていても、検索機能で簡単に該当データを絞り込めるようにしています。

    「営業日報」モデルの定義

ビルドとデータの復元

  1. アプリケーションをビルドし、ログオンします。
    ビルドとログオンの方法についてはビルド~アプリケーションの起動を参照してください。
  2. ログオン出来たら、前回のチュートリアルでバックアップしたデータを復元します。
    復元方法についてはビルドとデータの復元を参照してください。

動作の確認

  1. メニューの「サービス」タブに新しく「営業日報検索」が追加されています。
    これをクリックし、検索画面にアクセスします。
    サービスメニュー
  2. 登録画面へボタンをクリックし、営業日報登録画面にアクセスします。
    営業日報検索画面
  3. 日報データを1件登録します。
    まずは日付と担当者を以下の通り入力します。
    日付担当者
    本日の日付佐藤 太郎
    営業日報登録画面
  4. 訪問履歴のデータを2件登録します。
    登録するデータは以下の通りです。
    訪問履歴
    顧客内容
    鈴木 一郎製品Aを提案
    田中 二郎製品Bを提案
    入力行の追加は、訪問履歴入力欄の追加ボタンをクリックすると行えます。
    訪問履歴の入力行を追加
  5. 訪問先の顧客を入力します。
    「検索...」ボタンをクリックしてください。
    顧客の入力
  6. サブウインドウが開き、顧客の検索画面を表示します。
    一覧の中から「鈴木 一郎」をクリックし、選択します。
    顧客検索ウインドウ
  7. 顧客の入力欄に「鈴木 一郎」がセットされました。
    内容の項目を入力し、2件目のデータも同様に入力します。
    訪問履歴内容の入力
  8. 2件の入力が完了したら、「保存」ボタンを押して日報データを登録します。
    日報データの保存
  9. これで、日報データが1件登録できました。1件の日報データの中に、訪問履歴データが2件登録されています。
    日報データの保存
  10. 最後に、データのバックアップを行います。 手順はデータのバックアップを参照してください。

参照元トレースリンクとパンくずによる画面遷移

Wagby EEでは、ブラウザの「戻る」ボタンを使っての画面遷移を推奨していません。
代わりに、画面遷移のためのリンクやボタンを画面上に用意しています。

ここでは「参照元トレースリンク」や「パンくず」機能を使った画面遷移の方法について説明します。

参照元トレースリンクとは

営業日報の詳細表示画面では、顧客データのエリアにこのようなアイコンが表示されています。
このアイコンはリンクになっており、クリックすると顧客データの詳細画面に遷移します。
このリンクを参照元トレースリンクといいます。

参照元トレースリンク

パンくずとは

図の赤枠部分には、トップメニューから今までの画面遷移の履歴が表示されています。
これをパンくずといいます。
パンくずを使って、前の画面に戻ることができます。

パンくず

「営業日報詳細表示」というテキストリンクをクリックすることで、この画面に戻ることができます。

パンくずを使って元の画面に戻る

モデルの変更 - 項目の移動

繰り返しコンテナ外のモデル項目を、後から繰り返しコンテナに組み込むことも可能です。
ここでは「日付」項目を訪問履歴のデータ群として扱うように変更します。

  1. WagbyDesignerに戻り、営業日報モデルの「日付」項目を選択します。
    日付項目の選択
  2. ドラッグ&ドロップで「番号」と「顧客」の間に移動させます。
    日付項目の移動
  3. 訪問履歴の繰り返しコンテナの中に入れるため、命名規則に従って項目IDを変更します。
    変更前:date
    変更後:visit/vdate
    項目IDの変更

    補足:項目IDの命名について

    項目ID名は、同一モデル内では重複不可です。
    これは、繰り返しコンテナの項目IDも同様です。
    たとえば、図のように「staff」という項目IDが定義された状態で、繰り返し項目IDに「visit/staff」を追加することはできません。

    項目IDの重複エラー

UIの調整

WagbyDesignerではモデルの定義だけでなく、アプリケーションのUIに関する設定も行えます。
営業日報登録画面のUIを調整してみましょう。

(1) 入力フィールドの長さ変更

入力欄の長さ(横幅の広さ)を設定で変更することができます。

  1. 営業日報モデルの「顧客」項目のフィールド長を設定します。
    「詳細」ボタンをクリックし、「入力制御」タブの「入力フィールド長」に「10」と入力します。

    ワンポイント

    入力フィールド長の単位は「em」が適用されます。1em=およそ1文字程度分の幅、と考えてください。

    「顧客」項目の入力フィールド長を変更する

(2) 繰り返しコンテナの列幅設定

繰り返し項目の中の各項目の列幅を変えることができます。
各繰り返し項目の幅を、すべての合計が100%になるように設定します。
今回は以下のように設定していきます。

番号日付顧客内容
10%10%20%60%

  1. 列幅の設定を変更します。
    モデル項目の「詳細」の「出力制御」タブの「ラベル幅」から行えます。
    ラベル幅の設定
  2. 他の項目も同じように設定していきます。
    ウインドウのボタンをクリックすると、上下の項目の詳細設定に遷移します。
    詳細設定の移動

    Tips:複数項目の一括設定

    複数の項目の設定をまとめて行いたいときには、「一括設定」機能が便利です。
    「一括設定」ボタンをクリックすると、図のようなウインドウが表示されます。

    一括設定ウインドウ

ビルドと動作の確認

モデルに関する設定を変更したので、再度ビルドして確認します。

  1. アプリケーションをビルドし、ログオンします。
    ビルドとログオンの方法についてはビルド~アプリケーションの起動を参照してください。
  2. 営業日報の登録画面にアクセスします。
    各項目の幅が変更され、「顧客」の入力フィールドの幅が設定前より狭くなりました。
    営業日報登録画面

データのバックアップ

次のステップに進む前に、現時点のデータを保存(エクスポート)します。
手順はデータのバックアップを参照してください。

トラブルシューティング

「よくある質問と回答 > チュートリアル」をお読み下さい。