7.2. 実装¶
項目
- 画面への組み込み
- 起動引数
- parent(必須)
- templateId
- displayMode
- selectType
- closeAfterSelection
- targetDate
- includeInvalidData
- targetLocale
- loadDefaultSelected
- defaultSelected
- chipLabel
- filter
- onAddChipCallbackFunction
- onRemoveChipCallbackFunction
- onLoadDefaultSelectedCallbackFunction
- onRestApiErrorCallbackFunction
- onNetworkAccessErrorCallbackFunction
7.2.1. 画面への組み込み¶
IM-共通マスタ 検索(オートコンプリート型)を画面に組み込む方法について説明します。
7.2.1.1. ライブラリの読み込み¶
IM-共通マスタ 検索(オートコンプリート型)は、ライブラリを読み込むことで使用可能です。ライブラリは以下のディレクトリに格納されています。「%RESIN_HOME% /webapps/ %コンテキストパス% /im_master/search_dialog」
ライブラリ ファイル名 説明 autocompletes_company.bundle.js 会社検索コンポーネントのライブラリです。 autocompletes_department.bundle.js 組織検索コンポーネントのライブラリです。 autocompletes_user.bundle.js ユーザ検索コンポーネントのライブラリです。
- スクリプトタグを使用してライブラリを読み込む例:
1 2 3 <script type="text/javascript" src="im_master/search_dialog/autocompletes_company.bundle.js"></script> <script type="text/javascript" src="im_master/search_dialog/autocompletes_department.bundle.js"></script> <script type="text/javascript" src="im_master/search_dialog/autocompletes_user.bundle.js"></script>
7.2.1.2. スタイルシートの読み込み¶
スタイルシートを読み込みます。スタイルシートは以下のディレクトリに格納されています。「%RESIN_HOME% /webapps/ %コンテキストパス% /im_master/search_dialog」
- スタイルシートを読み込む例:
1 <link rel="stylesheet" type="text/css" href="./im_master/search_dialog/common_search.css" />
7.2.1.3. コンポーネントの生成¶
ライブラリに定義されているクラスのインスタンスを生成することで、起動引数 parent で指定したHTMLエレメント配下にコンポーネントが生成されます。IM-共通マスタ 検索(オートコンプリート型)は、検索結果の表示順や表示項目等を定義したテンプレートを使用します。使用するテンプレートは起動引数 params の templateId パラメータに指定します。
クラス ネームスペース クラス名 説明 ImMaster AutocompletesCompanySearch 会社検索コンポーネントを制御します。 ImMaster AutocompletesDepartmentSearch 組織検索コンポーネントを制御します。 ImMaster AutocompletesUserSearch ユーザ検索コンポーネントを制御します。
ユーザ検索コンポーネントを使用する例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <div id="autocomplete_user_search" style="padding: 1rem;"></div> <link rel="stylesheet" type="text/css" href="./im_master/search_dialog/common_search.css" /> <script type="text/javascript" src="im_master/search_dialog/autocompletes_user.bundle.js"></script> <script type="text/javascript"> let autocompletesUserSearch; (function () { const params = { parent: "#autocomplete_user_search", // コンポーネントを生成するHTML要素のIDセレクタ params: { templateId: "imm_t_user" // 使用するテンプレートID } }; autocompletesUserSearch = new ImMaster.AutocompletesUserSearch(params); })(); </script>注意
上記「ユーザ検索コンポーネントを使用する例」のテンプレートID「imm_t_user」は検索タイプが「ユーザ検索」で設定されているテンプレート定義のIDです。それぞれのコンポーネントには、対応する「検索タイプ」のテンプレートIDを指定してください。対応しない組み合わせでの使用は、予期しない動作を引き起こす可能性があります。
【表:対応表】 コンポーネントのクラス名 テンプレート定義の検索タイプ AutocompletesUserSearch ユーザ検索、ユーザ(所属組織)検索 AutocompletesCompanySearch 会社検索 AutocompletesDepartmentSearch 組織検索
7.2.1.4. コンポーネントの削除¶
生成したコンポーネントを削除するには、各コンポーネント制御クラスの dispose メソッドを使用します。
ユーザ検索コンポーネントを削除する例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <link rel="stylesheet" type="text/css" href="./im_master/search_dialog/common_search.css" /> <script type="text/javascript" src="im_master/search_dialog/autocompletes_user.bundle.js"></script> <script type="text/javascript"> let autocompletesUserSearch = new ImMaster.AutocompletesUserSearch(params); ... function foo() { if (autocompletesUserSearch) { autocompletesUserSearch.dispose(); autocompletesUserSearch = null; } } </script>
7.2.1.5. 選択データの取得¶
コンポーネントで選択したデータ(「選択データ表示チップ」に表示されているデータ)の 「結果項目」 は、各コンポーネント制御クラスの getResult メソッドを使用して、オブジェクト配列として取得できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <link rel="stylesheet" type="text/css" href="./im_master/search_dialog/common_search.css" /> <script type="text/javascript" src="im_master/search_dialog/autocompletes_user.bundle.js"></script> <script type="text/javascript"> let autocompletesUserSearch = new ImMaster.AutocompletesUserSearch(params); ... function register() { let result = autocompletesUserSearch.getResult(); for (let idx = 0; idx < result.length; idx++) { console.log(result[idx].userCd); ... } // result = [ // { // 結果項目1: 1番目の選択データの結果項目1の値, // 結果項目2: 1番目の選択データの結果項目2の値, // ... // }, // { // 結果項目1: 2番目の選択データの結果項目1の値, // 結果項目2: 2番目の選択データの結果項目2の値, // ... // }, // ... // ] } </script>
プロパティ名 型 備考 (result) Array 配列インデックス Object X X 選択したデータの「 結果項目 」 コラム
コールバックメソッドを利用すると、追加、削除のタイミングで操作対象のデータを取得できます。詳細は「 onAddChipCallbackFunction 」、「 onRemoveChipCallbackFunction 」を参照してください。
7.2.1.6. 初期選択データの設定¶
起動引数 params の defaultSelected パラメータを使用することで、初期表示の選択データを指定できます。テンプレート定義に設定された検索項目を指定することで、検索条件に該当するデータが選択された状態で初期表示されます。
ユーザコードが「aoyagi」に該当するユーザを選択した状態で表示する例:
1 2 3 4 5 6 7 const params = { parent: コンポーネントを生成するHTML要素のIDセレクタ, params: { templateId: 使用するテンプレートID, defaultSelected: [{ userCd: "aoyagi" }] } };
7.2.1.7. 編集可否の設定¶
起動引数 params の displayMode パラメータに「view」を指定することで、コンポーネントを編集不可(参照モード)に設定できます。初期選択データの表示のみ可能で、「 検索キーワード入力テキストボックス 」や「 検索候補リスト 」は表示されません。
参照モードで表示する例:
1 2 3 4 5 6 7 8 const params = { parent: コンポーネントを生成するHTML要素のIDセレクタ, params: { template: 使用するテンプレートID, displayMode: "view", defaultSelected: [{ userCd: "aoyagi" }, { userCd:"ikuta" }] } };
7.2.1.8. 選択候補のフィルタリング¶
起動引数 params の filter パラメータを使用することで、検索結果をフィルタリングできます。詳細は「filter」を参照してください。
7.2.2. 起動引数¶
起動引数を指定することで、検索条件などを変更できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 const params = { parent: "#sample_user_search", params: { templateId: "imm_t_user", displayMode: "edit", selectType: "multiple", targetDate: 1606748400000, includeInvalidData: true, targetLocale: "ja", loadDefaultSelected: false, defaultSelected: [{ userCd:"aoyagi" }], chipLabel: ["userCd"], filter :{ company : [ "comp1", "comp2" ] }, onAddChipCallbackFunction: callbackAddChip, onRemoveChipCallbackFunction: callbackRemoveChip, onLoadDefaultSelectedCallbackFunction: callbackDefaultSelected, onRestApiErrorCallbackFunction: callbackRestError, onNetworkAccessErrorCallbackFunction: callbackError } };
7.2.2.1. parent(必須)¶
コンポーネントを生成するHTML要素のIDセレクタを指定します。先頭に#を付与した形で指定します。指定したHTMLエレメント配下にコンポーネントが生成されます。
1 parent: "#sample_user_search"
7.2.2.2. templateId¶
検索テンプレート定義のIDを指定します。テンプレート定義については「 テンプレート定義 」を参照してください。指定しない場合は、コンポーネントに対応した「 標準テンプレート定義 」が適用されます。
1 2 3 params: { templateId: "imm_t_user" }
7.2.2.3. displayMode¶
オートコンプリートの表示モードを指定します。「edit」、「view」が指定できます。指定しなかった場合のデフォルト値は「edit」です。「edit」を指定すると、検索ができます。「view」を指定すると、「 選択データ表示チップ 」の初期表示のみで、検索できません。
1 2 3 params: { displayMode: "edit" }
1 2 3 params: { displayMode: "view" }
7.2.2.4. selectType¶
オートコンプリートのセレクトタイプを指定します。「single」、「multiple」が指定できます。指定しなかった場合のデフォルト値は「multiple」です。
1 2 3 params: { selectType: "single" }
1 2 3 params: { selectType: "multiple" }
7.2.2.5. closeAfterSelection¶
selectType が「multiple」の場合の選択後動作を選択します。「true」、「false」が指定できます。指定しなかった場合のデフォルト値は「true」です。「true」を指定すると、「 検索候補リスト 」選択後の動作に変更はありません。
1 2 3 4 params: { selectType: "multiple", closeAfterSelection: false }
7.2.2.6. targetDate¶
検索基準日を指定します。値の形式は数値でミリ秒、または「yyyy-MM-dd’T’hh:mm:ssZ」形式です。指定しなかった場合のデフォルト値は検索実行時の「クライアント日時」です。(例)2020年12月01日の場合「1606748400000」 または 「2020-12-01T00:00:00+0900」
1 2 3 params: { targetDate: 1606748400000 }
7.2.2.7. includeInvalidData¶
検索対象に無効データ(論理削除データ)を含むか指定します。指定しなかった場合のデフォルト値は「false」です。「true」無効データを含めて検索します。「false」有効データから検索します。
1 2 3 params: { includeInvalidData: true }
7.2.2.8. targetLocale¶
検索ロケールを指定します。指定しなかった場合のデフォルト値は検索実施者のアカウントコンテキストから取得したロケールです。
1 2 3 params: { targetLocale: "ja" }
7.2.2.9. loadDefaultSelected¶
後述の defaultSelected を元に、初期表示データを取得するかを指定します。「true」の場合、 defaultSelected のデータを元に初期表示データを取得します。「false」の場合、データの取得はせず、 defaultSelected の設定値を初期表示データとして使用します。
1 2 3 params: { loadDefaultSelected: false }
7.2.2.10. defaultSelected¶
初期表示時の選択済データを指定します。loadDefaultSelected が「true」の場合、指定したデータを元に初期表示データを取得します。loadDefaultSelected が「false」の場合、指定した値が getResult で取得されます。そのため、「 結果項目 」の項目でオブジェクトを作成することを推奨します。
1 2 3 4 5 6 7 params: { defaultSelected: [ { userCd: "aoyagi", userName: "青柳辰巳", ... }, { userCd: "ueda", userName: "上田辰男", ... }, ... ] }
7.2.2.11. chipLabel¶
loadDefaultSelected が「false」の場合、「 選択データ表示チップ 」に表示する defaultSelected の項目を指定します。
1 2 3 4 5 params: { chipLabel: [ "userName" ] }
7.2.2.12. filter¶
filter パラメータを指定することで、入力された検索キーワード以外の検索条件(暗黙条件)を埋め込むことが可能です。特定の部署に所属するユーザのみを検索対象としたい場合などに利用できます。指定できるfilterは「 検索タイプ 」ごとに異なります。指定した条件が複数の場合はAND条件とみなされます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 const params = { parent: "#sample_user_search", params: { filter :{ company: [ { companyCd : "comp_sample_01" }, { companyCd : "comp_other_01" } ], role: { role : "im_workflow_user" } } } };
コラム
filter パラメータ内の比較項目(compare)のコードの意味は以下の通りです。
gt : より大きい
ge : 以上
eq : 等しい
lt : より小さい
le : 以下
7.2.2.12.1. company¶
指定の会社で絞り込みます。複数指定が可能です。ただし、「 departmentSetList 」または「 department 」を設定している場合、利用されません。認可設定で許可された会社のみ有効です。
1 2 3 4 5 6 7 8 9 10 11 filter :{ company: [ { companyCd: "comp_sample_01" }, { companyCd: "comp_other_01" }, ... ] }
プロパティ名 型 必須 初期値 備考 company Array × - 配列インデックス Object × - companyCd String ○ - 会社コード
7.2.2.12.2. departmentSetList¶
指定の会社と組織の組み合わせで絞り込みます。ただし、1つの会社に複数の組織は指定できません。認可設定で許可された会社のみ有効です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 filter :{ departmentSetList: [ { companyCd: "comp_sample_01", departmentSetCd: "comp_sample_01", departmentCd: "dept_sample_10", departmentCompare: "le", postCd: "ps002", postCompare: "le" }, { companyCd: "comp_sample_01", departmentSetCd: "comp_sample_01", departmentCd: "dept_sample_20", departmentCompare: "le", postCd: "ps002", postCompare: "le" }, ... ] }
プロパティ名 型 必須 初期値 備考 departmentSetList Array × - 配列インデックス Object × - companyCd String ○ - 会社コード departmentSetCd String ○ - 組織セットコード departmentCd String × - 組織コード departmentCompare String × le gt、ge、eq、lt、leのいずれか postCd String × - 役職コード postCompare String × le gt、ge、eq、lt、leのいずれか コラム
departmentCd が指定されている場合、 departmentCompare は使用されます。postCd が指定されている場合、 postCompare は使用されます。
7.2.2.12.3. department¶
指定の組織で絞り込みます。ただし、「 departmentSetList 」が指定されている場合は、「 departmentSetList 」指定が優先されます。認可設定で許可された会社のみ有効です。
1 2 3 4 5 6 7 8 filter :{ department: { companyCd: "comp_sample_01", departmentSetCd: "comp_sample_01", departmentCd: "dept_sample_10", compare: "le" } }
プロパティ名 型 必須 初期値 備考 department Object × - companyCd String ○ - 会社コード departmentSetCd String ○ - 組織セットコード departmentCd String × - 組織コード compare String × le gt、ge、eq、lt、leのいずれか コラム
departmentCd が指定されている場合、 compare は使用されます。
7.2.2.12.4. departmentPost¶
指定の組織役職で絞り込みます。ただし、「 departmentSetList 」の postCd が指定されている場合は、「 departmentSetList 」指定が優先されます。認可設定で許可された会社のみ有効です。
1 2 3 4 5 6 7 8 filter :{ departmentPost: { companyCd: "comp_sample_01", departmentSetCd: "comp_sample_01", postCd: "ps002", compare: "le" } }
プロパティ名 型 必須 初期値 備考 departmentPost Object × - companyCd String ○ - 会社コード departmentSetCd String ○ - 組織セットコード postCd String ○ - 役職コード compare String × le gt、ge、eq、lt、leのいずれか
7.2.2.12.5. departmentCategoryItem¶
指定の組織分類項目を持つ組織で絞り込みます。認可設定で許可された会社のみ有効です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 filter :{ departmentCategoryItem: [ { companyCd: "comp_sample_01", categoryCd: "category_01", categoryItemCds: [ "item_01", "item_02", ... ] }, { companyCd: "comp_sample_01", categoryCd: "category_01", categoryItemCds: [ "item_01", "item_02", ... ] }, ... ] }
プロパティ名 型 必須 初期値 備考 departmentCategoryItem Array × - 配列インデックス Object × - companyCd String ○ - 会社コード categoryCd String ○ - 組織分類コード categoryItemCds Array ○ - 配列インデックス String ○ - 組織分類項目コード
7.2.2.12.6. publicGroup¶
指定のパブリックグループで絞り込みます。
1 2 3 4 5 6 7 filter :{ publicGroup: { publicGroupSetCd: "sample_public", publicGroupCd: "public_group_a", compare: "le" } }
プロパティ名 型 必須 初期値 備考 publicGroup Object × - publicGroupSetCd String ○ - パブリックグループセットコード publicGroupCd String × - パブリックグループコード compare String × le gt、ge、eq、lt、leのいずれか コラム
publicGroupCd が指定されている場合、 compare は使用されます。
7.2.2.12.7. publicGroupRole¶
指定のパブリックックグループ役割で絞り込みます。
1 2 3 4 5 6 7 filter :{ publicGroupRole: { publicGroupSetCd: "sample_public", roleCd: "public_role_001", compare: "le" } }
プロパティ名 型 必須 初期値 備考 publicGroupRole Object × - publicGroupSetCd String ○ - パブリックグループセットコード roleCd String ○ - パブリックグループ役割コード compare String × le gt、ge、eq、lt、leのいずれか
7.2.2.12.8. publicGroupCategoryItem¶
指定のパブリック分類項目を持つパブリックグループで絞り込みます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 filter :{ publicGroupCategoryItem: [ { categoryCd: "category_01", categoryItemCds: [ "item_01", "item_02", ... ] }, { categoryCd: "category_01", categoryItemCds: [ "item_01", "item_02", ... ] }, ... ] }
プロパティ名 型 必須 初期値 備考 publicGroupCategoryItem Array × - 配列インデックス Object × - categoryCd String ○ - パブリックグループ分類コード categoryItemCds Array ○ - 配列インデックス String ○ - パブリックグループ分類項目コード
7.2.2.12.9. userCategoryItem¶
指定のユーザ分類項目で絞り込みます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 filter :{ userCategoryItem: [ { categoryCd: "category_01", categoryItemCds: [ "item_01", "item_02", ... ] }, { categoryCd: "category_01", categoryItemCds: [ "item_01", "item_02", ... ] }, ... ] }
プロパティ名 型 必須 初期値 備考 userCategoryItem Array × - 配列インデックス Object × - categoryCd String ○ - ユーザ分類コード categoryItemCds Array ○ - 配列インデックス String ○ - ユーザ分類項目コード
7.2.2.12.10. role¶
指定のロールで絞り込みます。
1 2 3 4 5 filter :{ role:{ role: "im_workflow_user" } }
プロパティ名 型 必須 初期値 備考 role Object × - role String ○ - ロールID
7.2.2.13. onAddChipCallbackFunction¶
「 選択データ表示チップ 」を追加したときに呼ばれる関数を指定します。引数には追加されるデータが渡されます。
1 2 3 params: { onAddChipCallbackFunction: callbackAddChip }
1 2 3 4 function callbackAddChip(result) { // result.data = { userCd: "aoyagi", userName: "青柳", ... } // result.metaData = { userCd: "VARCHAR", userName: "VARCHAR", ... } }
7.2.2.14. onRemoveChipCallbackFunction¶
「 選択データ表示チップ 」が削除されたときに呼ばれる関数を指定します。引数には削除されたデータが渡されます。
1 2 3 params: { onRemoveChipCallbackFunction: callbackRemoveChip }
1 2 3 function callbackRemoveChip(result) { // result.data = { userCd: "aoyagi", userName: "青柳", ... } }渡される引数
プロパティ名 型 備考 (result) Object data Object 削除されたデータの「 結果項目 」
7.2.2.15. onLoadDefaultSelectedCallbackFunction¶
loadDefaultSelected が「true」の際、データをDBから取得し終えたときに呼ばれる関数を指定します。引数には取得したデータが渡されます。
1 2 3 params: { onLoadDefaultSelectedCallbackFunction: callbackDefaultSelected }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 function callbackDefaultSelected(result) { // result.list = [ // { // data: { userCd: "aoyagi", userName: "青柳", ... }, // status: "0" // }, // { // data: { userCd: "ueda", userName: "上田", ... }, // status: "0" // }, // ... // ] // result.metaData = { userCd: "VARCHAR", userName: "VARCHAR", ... } }
7.2.2.16. onRestApiErrorCallbackFunction¶
REST APIでエラーがスローされたときに呼ばれる関数を指定します。
1 2 3 params: { onRestApiErrorCallbackFunction: callbackRestError }
1 2 3 4 5 6 function callbackRestError(error) { // error.response = レスポンス // error.message = エラーメッセージ、または、空 console.log(error.response.status); // 404など console.log(error.response.statusText); // Not Foundなど }渡される引数
プロパティ名 型 備考 (error) Object response Object status String REST API HTTPステータスコード statusText String REST API HTTPステータスコードテキスト message String エラーメッセージ
7.2.2.17. onNetworkAccessErrorCallbackFunction¶
APサーバからの応答がないなどのエラーがスローされるときに呼ばれる関数を指定します。
1 2 3 params: { onNetworkAccessErrorCallbackFunction: callbackError }
1 2 3 function callbackError(error) { console.log(error.message); // エラーメッセージ }渡される引数
プロパティ名 型 備考 (error) Object message String エラーメッセージ