#はじめに
forma-designerで作成した申請画面から、別ウインドウで開く子画面を表示する際のロード時間が非常に長かったので、手動で解決した話です。

#画面の構成について
forma-designerで作成した画面をIM_Workflowと連携させ、申請画面として表示しました。
画面は4つあり、初期に表示される大きい画面(親画面)と明細を入力する小さい画面(子画面)が3つあり、親画面上にある3つのボタンを押下すると対応したそれぞれの子画面を別ウインドウで表示するようになっています。

#発生した事象と状況
・バージョンは2018Summer
・明細入力画面を押下し、別ウインドウが開くが画面がすべて表示されるまでに10～12秒かかった。
・親→子に遷移するボタンはforma-designer標準アイテム(*1)の「ボタン（次へ）」を使用。
・子→親に遷移するボタンはforma-designer標準アイテム(*1)の「ボタン（戻る）」を使用。
・発生した問題の解消を試みるために子画面のアイテム数を減らしたものの、改善せず。

#原因
・現在でもわかっていません。
・親画面への返却用として使用している「ボタン（戻る）」を削除すると速度が大幅に改善された(3秒くらい)ため、これが原因？

#解決方法
遷移するボタンアイテムを「ボタン（戻る）」から「ボタン（イベント）」に変更しました。親画面に明細で入力した内容を反映させる必要があるため、
intra-mart社が公開しているクライアントサイドスクリプトAPI(*2)を使用し
以下のように実装しました。

イベントボタンJS、データ取得部


// 明細テーブルの値を取得
var rowId = "";
var inputIdList = [];
inputIdList[0] = "colomn_nm1";
inputIdList[1] = "colomn_nm2";
inputIdList[2] = "colomn_nm3";
inputIdList[3] = "colomn_nm4";
inputIdList[4] = "colomn_nm5";
inputIdList[5] = "colomn_nm6";

// データを取得
var result = formaItems.product_80_table.getItemData.table_nm(rowId,inputIdList);

上記で取得したデータを以下で子画面の明細テーブル(hidden属性)にコピーします。

イベントボタンJS、データ送信部

var args = {};
args.data = {};
var option = {};

for(var i=0;i<result.length;i++){
    args.data.column1[i] = result[i].column1;
    args.data.column2[i] = result[i].column2;
    args.data.column3[i] = result[i].column3;
    args.data.column4[i] = result[i].column4;
    args.data.column5[i] = result[i].column5;
    args.data.column6[i] = result[i].column6;
}
// 親画面の明細テーブルにデータをセット
window.opener.formaItems.product_80_table.getItemData.table_nm(args,option);

// 子画面のウインドウを閉じる
window.open("","_self").close();

#結果
この実装により、10～12秒もかかった子画面表示のロードが3秒ほどまでに短縮できた。

#参考
*1・・・forma-designer標準アイテム
forma-designerの画面で使用することができる、アイテムの一覧です。

*2・・・クライアントサイドスクリプトAPI
「ボタン（イベント）」やアクション設定等でformaアイテムのデータの送受信を行うなどの用途で使用可能なスクリプトが紹介されています。