【intra-mart】[IM-FormaDesigner] 画面アイテムの値取得・設定用のラッパー関数を作って利用している話

こんにちは。

再びintra-martに関する記事です。 intra-martアドベントカレンダー2020の22日目です。（まだ誰も参加してなかったので、こっそり参加しました）

qiita.com

TL;DR

画面アイテムの値の取得・設定をするためのコードがちょっと楽に書けるようになります
hidden, textbox, checkbox, radio, selectboxくらいにしか使ってないので他にバグあったら申し訳ないです

IM-FormaDesignerとは

intra-martのローコード開発機能の一つである「IM-FormaDesigner」では、いわゆるIDEのように画面部品をドラッグドロップで配置することで、簡単にCRUD画面を作成することができます。

簡易的な画面を作成する場合は、大変重宝します。僕の場合、自社とユーザの都合で頻繁にデプロイができないため、IM-FormaDesignerを結構重要な場面で活用しています。

ちょっとした課題

各画面部品については、アクション定義におけるカスタムスクリプト（JavaScript）を利用して、値の設定や取得を行うことができます。

www.intra-mart.jp

テキストボックスに設定された文字列を取得

(function($){
    var result = formaItems.product_72_textbox.getItemData.%フィールド識別ID%();
    imuiAlert(result);
})(jQuery);

テキストボックスに文字列値を設定

(function($){
    var args = {};
    args.data = {};
    args.data.%フィールド識別ID% = "入力値";
    formaItems.product_72_textbox.setItemData.%フィールド識別ID%(args);
})(jQuery);

設定方法はあるものの、普段コードを書くにしても、ちょっと長くて覚えづらい感じです。短期間で役目を終え、保守がほとんど不要な画面であれば、このようなコードでもOKなのですが、やはり中長期的に利用する画面だと、メンテナンスが辛くなってしまいます。

そこで、ラッパー関数を用意することにしました。

ラッパー関数

使い方：以下のソースコードをアクション設定の初期処理にカスタムスクリプトとして定義します。

//-------------------------------------------------------------------------
// Forma画面から値を取得するためのショートカット関数
//-------------------------------------------------------------------------
window.rngdGetValue = function (type, fieldId) {
    var fn = getRngdImFieldMap()[type];
    // スマホ版の場合
    if (forma.funcs.getDisplayClientType() === "pc") {
        return formaItems[fn].getItemData[fieldId]();
    } else {
        var args = {};
        args.input_id = fieldId;
        return formaItems[fn].getItemDataSp(args);
    }
};
window.rngdSetValue = function (type, fieldId, value) {
    var fn = getRngdImFieldMap()[type];
    if (forma.funcs.getDisplayClientType() === "pc") {
        var args = {};
        args.data = {};
        args.data[fieldId] = value;
        formaItems[fn].setItemData[fieldId](args);
    } else {
        var args = {};
        args.input_id = fieldId;
        args.inputDataList = {};
        args.inputDataList[fieldId] = value;
        formaItems[fn].setItemDataSp(args)
    }
};
window.rngdBindValue = function (type, fieldId, value) {
    var fn = getRngdImFieldMap()[type];
    if (forma.funcs.getDisplayClientType() === "pc") {
        formaItems[fn].setItemData[fieldId](value);
    } else {
        formaItems[fn].setItemDataSp(value)
    }
}
window.getRngdImFieldMap = function () {
    return {
        "textbox": "product_72_textbox",
        "textarea": "product_72_textarea",
        "number": "product_72_number",
        "calendar": "product_72_calendar",
        "terms": "product_72_terms",
        "itemSelect": "product_80_itemSelect",
        "table": "product_80_table",
        "checkbox": "product_80_checkbox",
        "radio": "product_80_radio",
        "selectbox": "product_80_selectbox",
        "listbox": "product_80_listbox",
        "gridtable": "product_80_gridtable",
        "userSelect": "product_72_userSelect",
        "departmentSelect": "product_72_departmentSelect",
        "departmentPostSelect": "product_72_departmentPostSelect",
        "affiliationSelect": "product_72_affiliationSelect",
        "hidden": "product_72_hidden"
    };
};

他のカスタムスクリプトから利用します・・・下記のような形で、ちょっとだけシンプルに書くことができるようになります

// 部品の種類はgetRngdImFieldMap関数のキー値を参照
rngdSetValue("部品の種類", "フィールド識別ID", 設定したい値);
rngdGetValue("部品の種類", "フィールド識別ID");
// セレクトボックスやラジオは下記の関数を利用
rngdBindValue("部品の種類", "フィールド識別ID", 設定したいオブジェクト);

//-----------------------------------------------------------------------------
// テキストボックスの利用例
//-----------------------------------------------------------------------------
// テキストボックスへの設定
rngdSetValue("textbox", "フィールド識別ID", "設定したい値");

// テキストボックスからの取得
var text = rngdGetValue("textbox", "フィールド識別ID");

//-----------------------------------------------------------------------------
// 隠しパラメータの利用例
//-----------------------------------------------------------------------------
// 隠しパラメータへの設定
rngdSetValue("hidden", "フィールド識別ID", "設定したい値");

// 隠しパラメータからの取得
var hiddenValue= rngdGetValue("hidden", "フィールド識別ID");

//-----------------------------------------------------------------------------
// セレクトボックスの利用例
//-----------------------------------------------------------------------------
// セレクトボックスへの設定 
var selectBoxObj = {
    "data": {},
    "master": {
        "フィールド識別ID": [
            {
                "key_フィールド識別ID": "key_field1",
                "value_フィールド識別ID": "value_field1"
            },
            {
                "key_フィールド識別ID": "key_field2",
                "value_フィールド識別ID": "value_field2"
            },
        ]
    }
}
rngdBindValue("hidden", "フィールド識別ID", selectBoxObj);

// セレクトボックスからの取得
var selectBoxValue = rngdGetValue("selectbox", "フィールド識別ID");

注意事項

上記ラッパー関数ですが、実際に実務で利用してはいるものの、hidden, textbox, checkbox, radio, selectboxくらいでしか利用できていないので、その他の画面アイテムIDで利用する場合には何らかの問題が発生するかもしれません。また、申し訳ありませんがこの対応を実施したことによって発生した障害等について、一切責任を負いません。

気ままなタンス*プログラミングなどのノートブック

プログラミングやRPGツクール、DTM等について、学んだことや備忘録をアウトプットとして残し、情報を必要としている誰かにとって「かゆいところに手が届く」ブログとなることを願いながら記事を書いています。