一覧画面に項目を追加する

案件一覧画面の検索条件および一覧に「サンプル」項目を追加する手順を解説します。

「サンプル」項目の仕様

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

サンプル一覧画面

検索条件　　　　　完全一致

プロジェクト構成

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

注意

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

プロジェクト構成

全体の流れ

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

画面を修正する
HTMLファイルに新規項目を追加します。
REST APIを修正する
既存のREST APIを修正します。
サーバーサイド処理を修正する
サーバーサイドにて、案件一覧の取得処理を修正します。
クライアントサイド処理を修正する
クライアントサイドにて、検索条件保存機能の設定を修正します。

手順

画面を修正する

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

本手順で実施すること

HTMLファイルの修正

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

項目を追加したい位置に「サンプル」項目のソースを追加します。
位置調整用に追加されている要素は、サンプル項目の追加により不要となるため、削除しています。

matter_list_d.html
  ...

 <!-- 基本情報表示エリア(上) -->
 <div class="ssfa-flex">
 <!-- 取引先汎用グループ -->
 <div class="ssfa-item-area--col" style="flex:1;">
     <label class="ssfa-item-label"><imart type="message" id="CAP.Z.SSFA.GENERIC_GROUPS"/></label>
     <div class="ssfa-item-value" style="flex:1;" >
        <imart type="imuiSelect" width="100%" id="ssfaMtrList_sys_cstmr_group_id" name="ssfaMtrList_sys_cstmr_group_id" ></imart>
     </div>
 </div>
 <!-- サンプル項目 -->
 <div class="ssfa-item-area--col" style="flex:1;">
     <label class="ssfa-item-label"><imart type="message" id="CAP.Z.SSFA.MATTER_SAMPLE"/></label>
     <div class="ssfa-item-value" style="flex:1;" >
        <imart type="imuiTextbox" id="ssfaMtrList_matter_sample" name="ssfaMtrList_matter_sample" ></imart>
     </div>
 </div>
 <!-- ダミー-->
 <!--<div class="ssfa-item-area--col" style="flex:1;" >
     </div> -->
 </div>
  ... 

<!-- 案件一覧 -->
<div id="ssfaMtrList_list" class="ssfa-content-block ssfa-item-margin--all">
    <imart type="imuiListTable" id="ssfaMtrList_matter_search_list" name="ssfaMtrList_matter_search_list" process="csjs" target="ssfaMtrList_getData"
        onGridComplete="ssfaMtrList_loadComplete" viewRecords="true" width="100%" autoEncode="true" sortName="ssfaMtrList_matter_search_list_record_date" sortOrder="desc"  minHeight="100">
        <pager rowNum="50" rowList="50,100,200" />
        <cols>
            <col name="ssfaMtrList_matter_search_list_new_arrival_icon" caption="%CAP.Z.SSFA.NEW_ARRIVAL" width="30" align="left" sortable="false" />
            <col name="ssfaMtrList_matter_search_list_reliability_type_name" caption="%CAP.Z.SSFA.M.ITEM_RELIABILITY" width="50" align="center" />
            <col name="ssfaMtrList_matter_search_list_matter_sample" caption="%CAP.Z.SSFA.MATTER_SAMPLE" width="100" />
            <col name="ssfaMtrList_matter_search_list_user_name" caption="%CAP.Z.SSFA.MAIN_USER_NAME" width="80" />
            ...

ヒント

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

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

REST APIを修正する

本手順で実施すること

一覧取得REST APIのリクエストパラメーター定義を修正
一覧取得REST APIのレスポンス定義を修正

備考

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

注意

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

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

プロジェクトのsrc/main/java/jp/co/intra_mart/sol/ssfa/webapi/matter/model/の配下に、製品側のjavaファイルをコピーして配置します。
- 製品ソース
  - jp/co/intra_mart/sol/ssfa/webapi/matter/model/
    - GetMatterListParam.java
「GetMatterListParam.java」を開き、既存のリクエストパラメーターに、新規追加した項目に対応するプロパティを追加します。
これにより、新しい入力値が正しくAPIに渡されるようになります。
GetMatterListParam.java
```
  ...
  @JsonIgnoreProperties(ignoreUnknown = true)
  @lombok.Data
  public static class Details {

  private String matter_name;
  private String sys_cstmr_group_id;
  ...

  //追加
  private String matter_sample;  
  }
```
プロジェクトのsrc/main/java/jp/co/intra_mart/sol/ssfa/webapi/matter/model/の配下に、製品側のjavaファイルをコピーして配置します。
- 製品ソース
  - jp/co/intra_mart/sol/ssfa/webapi/matter/model/
    - GetMatterListResult.java
「GetMatterListResult.java」を開き、APIのレスポンス内容に、サンプル項目を追加します。
これにより、サンプル項目の取得データがAPIを通してクライアント側に渡されます。
GetMatterListResult.java
```
     ...
     @JsonIgnoreProperties(ignoreUnknown = true)
     @lombok.Data
     public static class MatterInfo {
   
       private String sys_cstmr_comp_id;       
       private String matter_id;
       ...
   
       //追加
       private String matter_sample;
    }
```
ヒント
レスポンスデータのクラス名（例：MatterInfo）とプロパティ名（例：matter_sample）は、登録更新ダイアログの「REST APIを修正する」の際に定義したリクエストパラメータと構成が一致するように作成します。
画面項目のIDとレスポンスデータのプロパティ名を一致させることで、APIのレスポンスデータが自動的に対象の項目にマッピングされます。

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

本手順で実施すること

案件一覧データ取得SQLの修正
案件一覧件数取得SQLの修正

プロジェクトのsrc/main/jssp/src/ssfa/の配下にpages/matter_list_d/sqlというフォルダを作成し、製品側のjsファイルをコピーして配置します。
- 製品ソース
  - WEB-INF/jssp/product/src/ssfa/pages/matter_list_d/sql
    - get_matter_list.sql

「get_matter_list.sql」は、検索条件に一致するデータを取得するSQLです。
取得対象としてサンプル項目を追加します。

get_matter_list.sql
   ...
   
   SELECT 
     new_arrival.name AS new_arrival_icon
     , T.sys_cstmr_comp_id
     , T.matter_id
   ...
     , T.matter_no
     , T.matter_sample //カスタマイズ
   FROM (
     SELECT (
       SELECT MAX(t1.cd) AS new_arrival_cd
   　　...
     , T.item_type_name_sort_key
     , T.matter_sample　//カスタマイズ
   FROM (
   SELECT
     stm2.sys_cstmr_comp_id
     , stm2.matter_id
   　　...
     , stm2.item_type_name_sort_key
     , stm2.matter_sample　//カスタマイズ
   FROM
     ( 
       SELECT
         stm.sys_cstmr_comp_id
   　　...
         , stm.matter_no
         , 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 = '0'
   　　/*カスタマイズ追加終了*/
       WHERE
          stm.application_id = /*application_id*/'ssfa'
          /*IF delete_flag != null*/
          AND stm.delete_flag = /*delete_flag*/'0'
          /*END*/
     ) stm2 
   　　...
   WHERE
      1 = 1 
     /*IF sys_cstmr_comp_id != null*/
     AND stm2.sys_cstmr_comp_id = /*sys_cstmr_comp_id*/'scci00004' --顧客からの遷移の場合
     /*END*/
   　...
   
     /*IF matter_no != null*/
     AND stm2.matter_no = /*matter_no*/'0' --案件番号検索
     /*END*/
     /*IF matter_sample != null*/
     AND stm2.matter_sample = /*matter_sample*/'' --カスタマイズ（完全一致）
     /*END*/
     --最終活動日
     /*IF last_activity_date != null*/
   AND NOT EXISTS ( 
   ...
   )

プロジェクトのsrc/main/jssp/src/ssfa/pages/matter_list_d/sqlの配下に、製品側のjsファイルをコピーして配置します。
- 製品ソース
  - WEB-INF/jssp/product/src/ssfa/pages/matter_list_d/sql
    - get_matter_list_count.sql

「get_matter_list_count.sql」は、検索条件に一致するデータの件数を取得するSQLです。
取得条件としてサンプル項目を追加します。
取得した件数は、一覧の取得件数表示に利用されます。

get_matter_list_count.sql
...

SELECT
  count(1) AS count_all
FROM (
SELECT
  stm2.sys_cstmr_comp_id
  , stm2.matter_id
...
  , stm2.matter_no
  , stm2.matter_sample //カスタマイズ
FROM
  ( 
    SELECT
      stm.sys_cstmr_comp_id,
　　...
      stm.matter_no,
      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 = '0'
　　/*カスタマイズ終了*/
    WHERE
       stm.application_id = /*application_id*/'ssfa'
       /*IF delete_flag != null*/
       AND stm.delete_flag = /*delete_flag*/'0'
       /*END*/
  ) stm2 
　　...
WHERE
   1 = 1 
  /*IF sys_cstmr_comp_id != null*/
  AND stm2.sys_cstmr_comp_id = /*sys_cstmr_comp_id*/'scci00004' --顧客からの遷移の場合
  /*END*/
　...

  /*IF matter_no != null*/
  AND stm2.matter_no = /*matter_no*/'0' --案件番号検索
  /*END*/
  /*IF matter_sample != null*/
  AND stm2.matter_sample = /*matter_sample*/'' --カスタマイズ（完全一致）
  /*END*/
  --最終活動日
  /*IF last_activity_date != null*/
AND NOT EXISTS ( 
...

一覧画面にサンプル項目のデータが表示されることを確認します。
一覧でサンプル項目の検索ができることを確認します。

クライアントサイド処理を修正する

案件一覧画面右上の「検索登録」と「検索呼出」ボタンから、サンプル項目の検索条件の登録・呼出を行えるようにカスタマイズします。

本手順で実施すること

詳細画面上の一覧表示設定を追加
検索登録ボタン押下時の保存項目を追加
検索呼出ボタン押下時の呼出項目を追加
一覧初期表示の設定を追加

プロジェクトのsrc/main/public/の配下にssfa/csjs/pages/matter_list_dというフォルダを作成し、製品側のjsファイルをコピーして配置します。
- 製品ソース
  - WEB-INF/ssfa/csjs/pages/matter_list_d
    - matter_list_d.js

詳細画面の一覧表示タブに表示する列を指定します。
以下、サンプル項目を表示しない例です。

matter_list_d.js
...

// 案件一覧展開時列表示設定
const ssfaMtrList_dispColumns = {
ssfaMtrList_matter_search_list_new_arrival_icon : true,
ssfaMtrList_matter_search_list_attach_file_status : true,
ssfaMtrList_matter_search_list_matter_name :true,
ssfaMtrList_matter_search_list_comp_name : true,
ssfaMtrList_matter_search_list_matter_category_name :false,
ssfaMtrList_matter_search_list_comp_rank_cd_name :false,
ssfaMtrList_matter_search_list_item_type_name : false,
ssfaMtrList_matter_search_list_user_name : false,
ssfaMtrList_matter_search_list_agent_comp_name : false,
ssfaMtrList_matter_search_list_matter_status_name : false,
ssfaMtrList_matter_search_list_matter_phase_type_name : false,
ssfaMtrList_matter_search_list_reliability_type_name : false,
ssfaMtrList_matter_search_list_sales_amount : false,
ssfaMtrList_matter_search_list_receive_plan_year_month_date : false,
ssfaMtrList_matter_search_list_sales_plan_year_month_date : false,
ssfaMtrList_matter_search_list_create_date :false,
ssfaMtrList_matter_search_list_record_date :false,
//サンプル項目の設定を追加（true=表示する、false=表示しない）
ssfaMtrList_matter_search_list_matter_sample : false
};

「検索登録」ボタン押下時の検索条件保存の対象にサンプル項目を追加します。

matter_list_d.js
...

/**
* 条件をJSONに変換
*/
function ssfaMtrDtl_conditionToJSON(resultJson) {
    //タイトル（設定なし）
    //検索条件をJSONに変換
    // 拡張項目検索条件取得
    let ssfaMtrListDynamicItem = new ScmnDynamicItem().getInputData(ssfaMtrList_formId, ssfaMtrList_partsId, ssfaMtrList_partsId + "_dynamic_item_area", SCMN_DYNAMIC_ITEM_PAGE_TYPE.SEARCH_COND_REGIST, ssfaDynamicItemGetter);
let conditions = {
        "ssfaMtrList_my_owner_dept0" : $("#" + ssfaMtrList_partsId + "_my_owner_dept0").prop("checked"),
      ...

　　　"ssfaMtrList_dynamic_item_area" : ssfaMtrListDynamicItem,
      "ssfaMtrList_matter_id" : $("#" + ssfaMtrList_partsId + "_matter_id").val(),
      //検索条件保存対象にサンプル項目を追加する
  　　"ssfaMtrList_matter_sample" : $("#" + ssfaMtrList_partsId + "_matter_sample").val()
    };
...
}

「検索呼出」ボタン押下時の検索条件保存の対象にサンプル項目を追加します。

matter_list_d.js
...
/**
* 条件の設定を行います。
*/
function ssfaMtrDtl_conditionSet(resultJson) {

    ssfaSearch_clearButton(ssfaMtrList_partsId);
    ssfaMtrList_defaultSettings();
    let conditionsJson = ImJson.parseJSON(resultJson);
    //JSONの値を条件に設定
    // 自組織チェックがtrueの場合、CSSにて画面表示のみチェックをオンにする
    if(conditionsJson.ssfaMtrList_my_owner_dept0){
    $("#" + ssfaMtrList_partsId + "_my_owner_dept0").addClass("search_condition_owner_dept_flag_checked");
    }
    ...

    $("#" + ssfaMtrList_partsId + "_reliability_type_cd0").val(conditionsJson.ssfaMtrList_reliability_type_cd0);
    $("#" + ssfaMtrList_partsId + "_matter_id").val(conditionsJson.ssfaMtrList_matter_id);
    //検索条件の設定対象にサンプル項目を追加
    $("#" + ssfaMtrList_partsId + "_matter_sample").val(conditionsJson.ssfaMtrList_matter_sample);
    ...

}

一覧の初期表示設定にサンプル項目を追加します。
デフォルト検索条件を設定した際に、サンプル項目の条件初期値設定が可能となります。

matter_list_d.js
…

//デフォルト検索条件が存在する場合は全ての検索条件をクリア
if(scmnIsNotBlank(default_search_condition_id)){
$("#" + ssfaMtrList_partsId + "_my_owner_dept0").prop("checked",false);
$("#" + ssfaMtrList_partsId + "_search_owner_matter0").prop("checked",false);
$("#" + ssfaMtrList_partsId + "_search_favorite_matter0").prop("checked",false);
$("#" + ssfaMtrList_partsId + "_hidden_flag0").prop("checked",false);
…
//サンプル項目を追加
$("#" + ssfaMtrList_partsId + "_matter_sample").val("");
ssfaSetListTags(ssfaMtrList_partsId + "_matter_status_list", [], {cd : "cd", name : "name"});
ssfaSetListTags(ssfaMtrList_partsId + "_reliability_type_cd_list", [], {cd : "cd", name : "name"});
ssfaSetListTags(ssfaMtrList_partsId + "_matter_phase_type_cd_list", [], {cd : "cd", name : "name"});
ssfaMtrList_createDynamicItemArea();
}

サンプル項目に値を入力し、「検索登録」ボタンより、検索条件を保存できることを確認します。
「検索呼出」ボタンより、登録済みの検索条件を選択し、サンプル項目に検索条件が表示されることを確認します。
「検索呼出」ボタンより、任意の検索条件をデフォルトに設定し、案件一覧初期表示時に検索条件が初期セットされることを確認します。

一覧画面に項目を追加する

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

プロジェクト構成​

全体の流れ​

手順​

画面を修正する​

本手順で実施すること​

REST APIを修正する​

本手順で実施すること​

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

本手順で実施すること​

クライアントサイド処理を修正する​

本手順で実施すること​

「サンプル」項目の仕様

プロジェクト構成

全体の流れ

手順

画面を修正する

本手順で実施すること

REST APIを修正する

本手順で実施すること

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

本手順で実施すること

クライアントサイド処理を修正する

本手順で実施すること