13. クライアントサイドスクリプトAPI¶
クライアントサイドスクリプトAPIを利用した画面アイテムの値操作について説明します。
Contents
13.1. 画面アイテムから値を取得するAPI¶
13.1.1. PC版¶
- API一覧
アイテム名 API 文字列 formaItems.product_72_textbox.getItemData.%フィールド識別ID% 複数行文字列 formaItems.product_72_textarea.getItemData.%フィールド識別ID% 数値 formaItems.product_72_number.getItemData.%フィールド識別ID% 日付 formaItems.product_72_calendar.getItemData.%フィールド識別ID% 期間 formaItems.product_72_terms.getItemData.%フィールド識別ID% 一覧選択 formaItems.product_80_itemSelect.getItemData.%フィールド識別ID% 明細テーブル formaItems.product_80_table.getItemData.%テーブル識別ID% チェックボックス formaItems.product_80_checkbox.getItemData.%フィールド識別ID% ラジオボタン formaItems.product_80_radio.getItemData.%フィールド識別ID% セレクトボックス formaItems.product_80_selectbox.getItemData.%フィールド識別ID% リストボックス formaItems.product_80_listbox.getItemData.%フィールド識別ID% グリッドテーブル formaItems.product_80_gridtable.getItemData.%テーブル識別ID% ユーザ選択 formaItems.product_72_userSelect.getItemData.%フィールド識別ID% 組織選択(会社コード)(組織セットコード)(組織コード) formaItems.product_72_departmentSelect.getItemData.%フィールド識別ID%_cformaItems.product_72_departmentSelect.getItemData.%フィールド識別ID%_sformaItems.product_72_departmentSelect.getItemData.%フィールド識別ID% 組織・役職選択(会社コード)(組織セットコード)(組織コード)(役職コード) formaItems.product_72_departmentPostSelect.getItemData.%フィールド識別ID%_cformaItems.product_72_departmentPostSelect.getItemData.%フィールド識別ID%_sformaItems.product_72_departmentPostSelect.getItemData.%フィールド識別ID%_dformaItems.product_72_departmentPostSelect.getItemData.%フィールド識別ID% 所属組織選択(会社コード)(組織セットコード)(組織コード) formaItems.product_72_affiliationSelect.getItemData.%フィールド識別ID%_cformaItems.product_72_affiliationSelect.getItemData.%フィールド識別ID%_sformaItems.product_72_affiliationSelect.getItemData.%フィールド識別ID%隠しパラメータ formaItems.product_72_hidden.getItemData.%フィールド識別ID% 一覧選択(互換用) formaItems.product_72_itemSelect.getItemData.%フィールド識別ID% 明細テーブル(互換用) formaItems.product_72_table.getItemData.%テーブル識別ID% チェックボックス(互換用) formaItems.product_72_checkbox.getItemData.%フィールド識別ID% ラジオボタン(互換用) formaItems.product_72_radio.getItemData.%フィールド識別ID% セレクトボックス(互換用) formaItems.product_72_selectbox.getItemData.%フィールド識別ID% リストボックス(互換用) formaItems.product_72_listbox.getItemData.%フィールド識別ID% スプレッドシート formaItems.product_80_spreadsheet.getItemData.%スプレッドシートID%
サンプルコード
- 文字列 入力値の取得
1 2 3 4 (function($){ var result = formaItems.product_72_textbox.getItemData.%フィールド識別ID%(); imuiAlert(result); })(jQuery);
- リストボックス・チェックボックス 入力値の取得
1 2 3 4 5 6 7 (function($){ var result = formaItems.product_80_listbox.getItemData.%フィールド識別ID%(); var valueArray = result.split( ',' ); for(var i=0; i<valueArray.length; i++){ imuiAlert(valueArray[i]); } })(jQuery);
- グリッドテーブル・明細テーブル 全行取得
1 2 3 4 5 6 7 8 9 (function($){ var rowId = ""; var inputIdList = []; inputIdList[0] = "%フィールド識別ID%"; var result = formaItems.product_80_gridtable.getItemData.%テーブル識別ID%(rowId, inputIdList); for(var i=0; i<result.length; i++){ imuiAlert(result[i].%フィールド識別ID%); } })(jQuery);
グリッドテーブル・明細テーブル 特定行取得
PC版の場合、行数には「画面に表示される行数」を指定してください。グリッドテーブルの場合は、削除された行数についても行数の計算にて考慮する必要があります。
1 2 3 4 5 6 7 (function($){ var rowId = 行数; var inputIdList = []; inputIdList[0] = "%フィールド識別ID%"; var result = formaItems.product_80_gridtable.getItemData.%テーブル識別ID%(rowId, inputIdList); imuiAlert(result[0].%フィールド識別ID%); })(jQuery);
スプレッドシート バインディング設定をしたセル・テーブルの全入力値の取得
1 2 3 4 5 6 7 8 9 (function($){ var result = formaItems.product_80_spreadsheet.getItemData.%スプレッドシートID%(); // セル alert(result.%フィールド識別ID(セル)%); // テーブル for(var i=0; i<result.%テーブル識別ID%.length; i++){ alert(result.%テーブル識別ID%[i].%フィールド識別ID(テーブル列)%); } })(jQuery);スプレッドシート バインディング設定をしたセル・テーブルのうち、特定の入力値の取得
1 2 3 4 5 6 7 8 9 10 (function($){ var inputIdList = []; inputIdList[0] = "%フィールド識別ID(セル)%"; inputIdList[1] = "%フィールド識別ID(テーブル列)%"; var result = formaItems.product_80_spreadsheet.getItemData.%スプレッドシートID%(inputIdList); // セル alert(result.%フィールド識別ID(セル)%); // テーブル alert(result.%テーブル識別ID%[0].%フィールド識別ID(テーブル列)%); })(jQuery);
13.1.2. スマートフォン版¶
- API一覧
アイテム名 API 文字列 formaItems.product_72_textbox.getItemDataSp(Object arg) 複数行文字列 formaItems.product_72_textarea.getItemDataSp(Object arg) 数値 formaItems.product_72_number.getItemDataSp(Object arg) 日付 formaItems.product_72_calendar.getItemDataSp(Object arg) 期間 formaItems.product_72_terms.getItemDataSp(Object arg) 明細テーブル formaItems.product_80_table.getItemDataSp(Object arg) チェックボックス formaItems.product_80_checkbox.getItemDataSp(Object arg) ラジオボタン formaItems.product_80_radio.getItemDataSp(Object arg) セレクトボックス formaItems.product_80_selectbox.getItemDataSp(Object arg) リストボックス formaItems.product_80_listbox.getItemDataSp(Object arg) グリッドテーブル formaItems.product_80_gridtable.getItemDataSp(Object arg) ユーザ選択 formaItems.product_72_userSelect.getItemDataSp(Object arg) 組織選択 formaItems.product_72_departmentSelect.getItemDataSp(Object arg) 組織・役職選択 formaItems.product_72_departmentPostSelect.getItemDataSp(Object arg) 所属組織選択 formaItems.product_72_affiliationSelect.getItemDataSp(Object arg)隠しパラメータ formaItems.product_72_hidden.getItemDataSp(Object arg) 一覧選択(互換用) formaItems.product_72_itemSelect.getItemDataSp(Object arg) チェックボックス(互換用) formaItems.product_72_checkbox.getItemDataSp(Object arg) ラジオボタン(互換用) formaItems.product_72_radio.getItemDataSp(Object arg) セレクトボックス(互換用) formaItems.product_72_selectbox.getItemDataSp(Object arg) リストボックス(互換用) formaItems.product_72_listbox.getItemDataSp(Object arg)
サンプルコード
引数のargは、下記の構造のオブジェクトで指定します。
文字列 入力値の取得
1 2 3 4 5 6 (function($){ var args = {}; args.input_id = "%フィールド識別ID%"; var result = formaItems.product_72_textbox.getItemDataSp(args); imspAlert(result); })(jQuery);リストボックス・チェックボックス 入力値の取得
1 2 3 4 5 6 7 8 9 (function($){ var args = {}; args.input_id = "%フィールド識別ID%"; var result = formaItems.product_80_listbox.getItemDataSp(args); var valueArray = result.split( ',' ); for(var i=0; i<valueArray.length; i++){ imspAlert(valueArray[i]); } })(jQuery);グリッドテーブル・明細テーブル 全行の取得
1 2 3 4 5 6 7 8 9 10 11 (function($){ var args = {}; args.tableId = "%テーブル識別ID%"; args.rowId = ""; args.inputIdList = []; args.inputIdList[0] = "%フィールド識別ID%"; var result = formaItems.product_80_gridtable.getItemDataSp(args); for(var i=0; i<result.length; i++){ alert(result[i].%フィールド識別ID%); } })(jQuery);グリッドテーブル・明細テーブル 特定行の取得
スマートフォン版の場合、行数には「画面に表示される行数-1」を指定してください。
1 2 3 4 5 6 7 8 9 (function($){ var args = {}; args.tableId = "%テーブル識別ID%"; args.rowId = 行数; args.inputIdList = []; args.inputIdList[0] = "%フィールド識別ID%"; var result = formaItems.product_80_gridtable.getItemDataSp(args); alert(result[0].%フィールド識別ID%); })(jQuery);
13.2. 画面アイテムに値を反映するAPI¶
13.2.1. PC版¶
- API一覧
アイテム名 API 文字列 formaItems.product_72_textbox.setItemData.%フィールド識別ID%(Object arg) 複数行文字列 formaItems.product_72_textarea.setItemData.%フィールド識別ID%(Object arg) 数値 formaItems.product_72_number.setItemData.%フィールド識別ID%(Object arg) 日付 formaItems.product_72_calendar.setItemData.%フィールド識別ID%(Object arg) 期間 formaItems.product_72_terms.setItemData.%フィールド識別ID%(Object arg) 一覧選択 formaItems.product_80_itemSelect.setItemData.%フィールド識別ID%(Object arg) 明細テーブル formaItems.product_80_table.setItemData.%テーブル識別ID%(Object arg) チェックボックス formaItems.product_80_checkbox.setItemData.%フィールド識別ID%(Object arg) ラジオボタン formaItems.product_80_radio.setItemData.%フィールド識別ID%(Object arg) セレクトボックス formaItems.product_80_selectbox.setItemData.%フィールド識別ID%(Object arg) リストボックス formaItems.product_80_listbox.setItemData.%フィールド識別ID%(Object arg) グリッドテーブル formaItems.product_80_gridtable.setItemData.%テーブル識別ID%(Object arg) ユーザ選択 formaItems.product_72_userSelect.setItemData.%フィールド識別ID%(Object arg) 組織選択(会社コード)(組織セットコード)(組織コード) formaItems.product_72_departmentSelect.setItemData.%フィールド識別ID%_c(Object arg)formaItems.product_72_departmentSelect.setItemData.%フィールド識別ID%_s(Object arg)formaItems.product_72_departmentSelect.setItemData.%フィールド識別ID%(Object arg) 組織・役職選択(会社コード)(組織セットコード)(組織コード)(役職コード) formaItems.product_72_departmentPostSelect.setItemData.%フィールド識別ID%_c(Object arg)formaItems.product_72_departmentPostSelect.setItemData.%フィールド識別ID%_s(Object arg)formaItems.product_72_departmentPostSelect.setItemData.%フィールド識別ID%_d(Object arg)formaItems.product_72_departmentPostSelect.setItemData.%フィールド識別ID%(Object arg) 所属組織選択(会社コード)(組織セットコード)(組織コード) formaItems.product_72_affiliationSelect.setItemData.%フィールド識別ID%_c(Object arg)formaItems.product_72_affiliationSelect.setItemData.%フィールド識別ID%_s(Object arg)formaItems.product_72_affiliationSelect.setItemData.%フィールド識別ID%(Object arg)隠しパラメータ formaItems.product_72_hidden.setItemData.%フィールド識別ID%(Object arg) 一覧選択(互換用) formaItems.product_72_itemSelect.setItemData.%フィールド識別ID%(Object arg) 明細テーブル(互換用) formaItems.product_72_table.setItemData.%テーブル識別ID%(Object arg) チェックボックス(互換用) formaItems.product_72_checkbox.setItemData.%フィールド識別ID%(Object arg) ラジオボタン(互換用) formaItems.product_72_radio.setItemData.%フィールド識別ID%(Object arg) セレクトボックス(互換用) formaItems.product_72_selectbox.setItemData.%フィールド識別ID%(Object arg) リストボックス(互換用) formaItems.product_72_listbox.setItemData.%フィールド識別ID%(Object arg) スプレッドシート formaItems.product_80_spreadsheet.setItemData.%スプレッドシートID%(Object arg)
サンプルコード
引数のargは、下記の構造のオブジェクトで指定します。入力値は、アイテムのデータ型に合わせて指定します。
文字列 入力値の反映
1 2 3 4 5 6 (function($){ var args = {}; args.data = {}; args.data.%フィールド識別ID% = "入力値"; formaItems.product_72_textbox.setItemData.%フィールド識別ID%(args); })(jQuery);リストボックス・チェックボックス 入力値の反映
複数要素の場合、カンマ区切りの文字列で指定します。画面では、送信値に一致する行が選択されます。
1 2 3 4 5 6 (function($){ var args = {}; args.data = {}; args.data.%フィールド識別ID% = "入力値1,入力値2,入力値3"; formaItems.product_80_listbox.setItemData.%フィールド識別ID%(args); })(jQuery);グリッドテーブル・明細テーブル 全行の反映
1 2 3 4 5 6 7 8 9 10 11 (function($){ var args = {}; args.data = {}; args.data.%テーブル識別ID% = []; for(var i=0; i<valueArray.length; i++){ args.data.%テーブル識別ID%[i] = {}; args.data.%テーブル識別ID%[i].%フィールド識別ID% = valueArray[i]; } var option = {}; formaItems.product_80_gridtable.setItemData.%テーブル識別ID%(args, option); })(jQuery);グリッドテーブル 特定行の反映
PC版の場合、行数には「画面に表示される行数」を指定してください。グリッドテーブルの場合は、削除された行数についても行数の計算にて考慮する必要があります。
1 2 3 4 5 6 7 8 9 10 (function($){ var args = {}; args.data = {}; args.data.%テーブル識別ID% = []; args.data.%テーブル識別ID%[0] = {}; args.data.%テーブル識別ID%[0].%フィールド識別ID% = "入力値"; var option = {}; option.indexKey = 行数; formaItems.product_80_gridtable.setItemData.%テーブル識別ID%(args, option); })(jQuery);明細テーブル 特定行の反映
PC版の場合、行数には「画面に表示される行数」を指定してください。
1 2 3 4 5 6 7 8 9 10 11 (function($){ var args = {}; args.data = {}; args.data.%テーブル識別ID% = []; args.data.%テーブル識別ID%[0] = {}; args.data.%テーブル識別ID%[0].%フィールド識別ID% = "入力値"; var option = {}; option.indexKey = 行数; option.tableId = "%テーブル識別ID%"; formaItems.product_80_table.setItemData.%テーブル識別ID%(args, option); })(jQuery);スプレッドシート バインディング設定をしたセル・テーブルの入力値の反映
1 2 3 4 5 6 7 8 9 10 11 12 13 14 (function($){ var args = {}; args.data = {}; args.data.%フィールド識別ID(セル)% = "セル入力値"; // SpreadJSでのセル型がチェックボックスの場合はセル入力値を以下のように設定します。 // チェックON: 文字列の"true"、チェックOFF: 文字列の"false"、不定状態(不定状態が有効の場合):空文字 args.data.%フィールド識別ID(チェックボックスセル)% = "true"; // SpreadJSでのセル型がチェックボックスリストの場合はセル入力値をカンマ区切りの文字列で設定します。 args.data.%フィールド識別ID(チェックボックスリストセル)% = "入力値1,入力値2,入力値3"; args.data.%テーブル識別ID% = []; args.data.%テーブル識別ID%[0] = {}; args.data.%テーブル識別ID%[0].%フィールド識別ID(テーブル列)% = "テーブル列入力値"; formaItems.product_80_spreadsheet.setItemData.%スプレッドシートID%(args); })(jQuery);
13.2.2. スマートフォン版¶
- API一覧
アイテム名 API 文字列 formaItems.product_72_textbox.setItemDataSp(Object arg) 複数行文字列 formaItems.product_72_textarea.setItemDataSp(Object arg) 数値 formaItems.product_72_number.setItemDataSp(Object arg) 日付 formaItems.product_72_calendar.setItemDataSp(Object arg) 期間 formaItems.product_72_terms.setItemDataSp(Object arg) 明細テーブル formaItems.product_80_table.setItemDataSp(Object arg) チェックボックス formaItems.product_80_checkbox.setItemDataSp(Object arg) ラジオボタン formaItems.product_80_radio.setItemDataSp(Object arg) セレクトボックス formaItems.product_80_selectbox.setItemDataSp(Object arg) リストボックス formaItems.product_80_listbox.setItemDataSp(Object arg) グリッドテーブル formaItems.product_80_gridtable.setItemDataSp(Object arg) ユーザ選択 formaItems.product_72_userSelect.setItemDataSp(Object arg) 組織選択 formaItems.product_72_departmentSelect.setItemDataSp(Object arg) 組織・役職選択 formaItems.product_72_departmentPostSelect.setItemDataSp(Object arg) 所属組織選択 formaItems.product_72_affiliationSelect.setItemDataSp(Object arg) 隠しパラメータ formaItems.product_72_hidden.setItemDataSp(Object arg) 一覧選択(互換用) formaItems.product_72_itemSelect.setItemDataSp(Object arg) チェックボックス(互換用) formaItems.product_72_checkbox.setItemDataSp(Object arg) ラジオボタン(互換用) formaItems.product_72_radio.setItemDataSp(Object arg) セレクトボックス(互換用) formaItems.product_72_selectbox.setItemDataSp(Object arg) リストボックス(互換用) formaItems.product_72_listbox.setItemDataSp(Object arg)
サンプルコード
引数のargは、下記の構造のオブジェクトで指定します。入力値は、アイテムのデータ型に合わせて指定します。
文字列 入力値の反映
1 2 3 4 5 6 7 (function($){ var args = {}; args.input_id = "%フィールド識別ID%"; args.inputDataList = {}; args.inputDataList.%フィールド識別ID% = "入力値"; formaItems.product_72_textbox.setItemDataSp(args); })(jQuery);リストボックス・チェックボックス 入力値の反映
複数要素の場合、カンマ区切りの文字列で指定します。画面では、送信値に一致する行が選択されます。
1 2 3 4 5 6 7 (function($){ var args = {}; args.input_id = "%フィールド識別ID%"; args.inputDataList = {}; args.inputDataList.%フィールド識別ID% = "入力値1,入力値2,入力値3"; formaItems.product_80_listbox.setItemDataSp(args); })(jQuery);グリッドテーブル・明細テーブル 全行の反映
1 2 3 4 5 6 7 8 9 10 11 12 (function($){ var args = {}; args.tableId = "%テーブル識別ID%"; args.dataInputId = []; args.dataInputId[0] = "%フィールド識別ID%"; args.inputDataList = []; for(var i=0; i<valueArray.length; i++){ args.inputDataList[i] = {}; args.inputDataList[i].%フィールド識別ID% = valueArray[i]; } formaItems.product_80_gridtable.setItemDataSp(args); })(jQuery);グリッドテーブル・明細テーブル 特定行の反映
スマートフォン版の場合、行数には「画面に表示される行数-1」を指定してください。
1 2 3 4 5 6 7 8 9 10 11 (function($){ var args = {}; args.tableId = "%テーブル識別ID%"; args.rowId = 行数; args.dataInputId = []; args.dataInputId[0] = "%フィールド識別ID%"; args.inputDataList = []; args.inputDataList[0] = {}; args.inputDataList[0].%フィールド識別ID% = "入力値"; formaItems.product_80_gridtable.setItemDataSp(args); })(jQuery);
コラム
- グリッドテーブルの並べ替え機能とAPI動作について
- 全行の反映の場合
- 単一列での並べ替え中に利用した場合、反映後に表示データは並べ替えが適用されます。
- 複数列での並べ替え中に利用した場合、反映後に表示データは並べ替えは適用されません。
- 特定行の反映の場合
- 並び替え前の行IDを指定指定する必要があります。
- 全行の取得の場合
- 単一列での並べ替えを利用した場合、並び替え前の順番で取得されます。
- 複数列での並べ替えを利用した場合、並び替え後の順番で取得されます。
- 特定行の取得の場合
- 単一列・複数列ともに、替え前の行IDを指定する必要があります。
グリッドテーブルに対し、クライアントサイドスクリプトAPIを利用して、複雑な値操作をすることは推奨しません。
複雑な値操作をする場合、外部連携を利用してください。