メインコンテンツまでスキップ

詳細画面に項目を追加する

「登録更新ダイアログに入力項目を追加する」にて実装した「サンプル」項目を案件詳細画面に追加する手順を解説します。

「サンプル」項目の仕様​

下記の通り項目を追加します。

サンプル詳細画面

プロジェクト構成​

本チュートリアルでは、以下の通りプロジェクトを作成します。

前提

本チュートリアルで利用するファイルのみ記載しています。

プロジェクト構成

全体の流れ​

項目追加の手順は以下の通りです。

  1. 画面を修正する
    HTMLファイルに新規項目を追加します。

  2. REST APIを修正する
    既存のREST APIを修正します。

  3. サーバーサイド処理を修正する
    サーバーサイドにて、詳細データ取得処理を修正します。

一時保存機能の実装について

本チュートリアルでは、一時保存ボタンに対するカスタマイズは行いません。
一時保存データ取得処理をカスタマイズする場合は、以下手順を参考に別途実装してください。

  1. REST API作成
    既存のREST API（GetMatterTempSaveDtlResult.java）を修正します。

  2. サーバーサイド処理
    一時保存データ取得SQLにサンプル項目の取得を追加します。（get_matter_temp_save_info.sql）

手順​

画面を修正する​

案件詳細画面上に「サンプル」項目を追加します。

本手順で実施すること​

  • HTMLファイルの修正

  1. プロジェクトのsrc/main/jssp/src/の配下に、ssfa/pages/matter_dtl_dという階層でフォルダを作成し、製品側のHTMLファイルをコピーして配置します。

    • 製品ソース
      • WEB-INF/jssp/product/src/ssfa/pages/matter_dtl_d
        • matter_dtl_d.html

  2. 項目を追加したい位置に「サンプル」項目のソースを追加します。

    matter_dtl_d.html
    ...
    <!-- 売上予定日-->
    <div class="ssfa-item-area ssfa-item-border-bottom" style="flex:1;">
        <label class="ssfa-item-label"><imart type="message" id="CAP.Z.SSFA.SALES_PLAN_DATE" /></label>
             <div class="ssfa-item-value"><label id="ssfaMtrDtl_sales_plan_year_month_date" name="ssfaMtrDtl_sales_plan_year_month_date" class="ssfa-item-input--alignment-numeric ssfa-item-label--date"></label></div>
    </div>
    <!-- 「売上予定日」の下側に「サンプル」を追加する場合は以下の通り追加 -->
    <!-- サンプル項目 -->
    <div class="ssfa-item-area ssfa-item-border-bottom" style="flex:1;">
        <label class="ssfa-item-label"><imart type="message" id="CAP.Z.SSFA.MATTER_SAMPLE" /></label>
            <div class="ssfa-item-value"><label id="ssfaMtrDtl_matter_sample" name="ssfaMtrDtl_matter_sample" class="ssfa-item-input--alignment-numeric"></label></div>
    </div>
    ...
    対象項目の指定

    IDは、登録更新ダイアログで指定した項目ID（matter_sample）に合わせて設定してください。
    パーツIDのみ、画面に合わせて変更します。
    サンプルプログラムでは、パーツIDssfaMtrDtl_をmatter_sampleの前に付与しています。

  3. 追加した項目が、画面上の意図した位置に表示されていることを確認します。

    画面項目追加

REST APIを修正する​

案件データの取得結果をサーバー側から受け取る際のレスポンス定義に、サンプル項目を追加します。

本手順で実施すること​

  • REST APIのレスポンスデータ定義を修正
参考ガイド

クライアント・サーバー間のデータ連携の概要については、「REST APIによるサーバー・クライアント間の通信処理」を参照してください。

javaファイルカスタマイズの注意事項

javaファイルのカスタマイズには注意事項があります。
実際にカスタマイズを行う際は、以下ガイドの注意事項を考慮したうえでカスタマイズを実施してください。

「intra-mart Accel Platform ユーザモジュール開発ガイド」 - 依存関係に設定するモジュールの選別
https://document.intra-mart.jp/library/iap/public/development/usermodule_developers_guide/texts/dependency/index.html#依存関係に設定するモジュールの選別

  1. プロジェクトのsrc/main/java/jp/co/intra_mart/sol/ssfa/webapi/matter/model/の配下に、製品側のjavaファイルをコピーして配置します。

    • 製品ソース
      • jp/co/intra_mart/sol/ssfa/webapi/matter/model/
        • GetMatterDtlResult.java

  2. APIのレスポンス内容に、サンプル項目を追加します。
    これにより、サンプル項目の取得データがAPIを通してクライアント側に渡されます。

    GetMatterDtlResult.java
         ...
           @JsonIgnoreProperties(ignoreUnknown = true)
           @lombok.Data
           public static class MatterInfo {
       
               private String matter_id;
               private String agent_sys_cstmr_comp_id;
               　　　...
       
               //カスタマイズ
               private String matter_sample;
           }　　
       ...

    対象項目の指定

    レスポンスデータのクラス名（例：MatterInfo）とプロパティ名（例：matter_sample）は、登録更新ダイアログの「REST APIを修正する」の際に定義したリクエストパラメータと構成が一致するように作成します。
    画面項目のIDとレスポンスデータのプロパティ名を一致させることで、APIのレスポンスデータが自動的に対象の項目にマッピングされます。

サーバーサイド処理を修正する​

サーバー側で実行する取得処理に、取得データとしてサンプル項目を追加します。
これにより、APIはレスポンスデータとしてサンプル項目を含む取得結果をクライアント側に返却します。

本手順で実施すること​

  • 案件情報取得SQLの修正

  1. プロジェクトのsrc/main/jssp/src/ssfa/の配下にcommon/sqlというフォルダを作成し、製品側のjsファイルをコピーして配置します。

    • 製品ソース
      • WEB-INF/jssp/product/src/ssfa/common/sql
        • get_matter_info.sql

  2. 「get_matter_info.sql」を開き、「テーブルを作成する」にて作成した案件拡張マスタより、案件IDに紐づくサンプル項目のデータを取得する処理を追加します。

    get_matter_info.sql
       SELECT
       stm2.sys_cstmr_comp_id,
       stm2.matter_id,
       stm2.matter_no,
       stm2.sys_campaign_id,
       stm2.agent_sys_cstmr_comp_id,
       stm2.ep_matter_cd,
       stm2.mat
       ...
       stm2.hidden_flag,
       stm2.matter_sample //カスタマイズ
       FROM
       ( 
           SELECT
           stm.sys_cstmr_comp_id,
       　　...
           smc_complete_flag.name AS complete_flag_name,
           stm.hidden_flag,
           sample.matter_sample AS matter_sample //カスタマイズ
           FROM
           ssfa_t_matter stm 
       　　...
           /*カスタマイズ開始*/
           -- 案件拡張テーブルを結合
           LEFT JOIN ssfa_t_matter_ex_sample sample
               ON sample.matter_id = stm.matter_id
               AND sample.application_id = /*application_id*/'ssfa'
       　　  AND sample.delete_flag = /*delete_flag*/'0'
       　　/*カスタマイズ終了*/
           WHERE
               stm.application_id = /*application_id*/'ssfa'
               /*IF delete_flag != null*/
               AND stm.delete_flag = /*delete_flag*/'0'
               /*END*/
       ) stm2 
       ...

  3. 詳細画面にサンプル項目のデータが表示されることを確認します。

    詳細画面確認

    実装補足

    更新時の登録データの反映も実装されます。

    更新画面確認