MTAppjQuery

mtapp.multiField v2 で初期値をセットしたり始めからフィールドを表示させたりする方法

2021-12-23
7分で読了
更新: 2025-12-26

目次

MTAppjQuery の mtapp.multiField v2 で初期値をセットしたり始めからフィールドを表示させたりする方法をステップバイステップでご紹介します。

ステップ01：マルチフィールドを適用

まずは user.js に下記のように普通に mtapp.multiField を適用させます。

(function($){

  mtapp.multiField({
    version: 2, // 忘れないように！
    id: 26, // 適宜変更してください。
    label: '初期値有りテーブルサンプル',
    showViewRawDataButton: true, // 始めは true にします。
    fieldBlocks: {
      sampleTable: {
        type: 'table-vertical-fixed', label: '初期値有りテーブル', data: {}, fields: [
          'text', 'tinymce', 'image'
        ]
      }
    },
    fieldGroups: [
      ['sampleTable']
    ]
  })

})(jQuery);

ステップ02：フィールドを表示して値をコピー

次に「フィールドを追加」→「初期値有りテーブル」でフィールドブロックを表示し、「保存データを表示」をクリックします。そして、表示された JSON の値をコピーします。

Clean Shot 2021 12 23 16 32 22

ステップ03：初期表示フィールドをセット

ステップ01 のコードの上に初期表示フィールドをセットするためのコードを挿入します。ここでは sampleTableDefault という変数に、先ほどコピーした値を代入します。

代入する際に、id の値の文字列を mtapp.randomString() に、ts の値を (new Date()).getTime() に書き換えます。

(function($){

  // 初期値の値
  const sampleTableDefault = {"items":[{"data":{"text":"","tinymce":"","image":{"id":"","url":"","thumbnail":""}},"handle":"sampleTable","id":mtapp.randomString()}],"version":2,"ts":(new Date()).getTime()};

  mtapp.multiField({
    version: 2, // 忘れないように！
    id: 26, // 適宜変更してください。
    label: '初期値有りテーブルサンプル',
    showViewRawDataButton: true, // 始めは true にします。
    fieldBlocks: {
      sampleTable: {
        type: 'table-vertical-fixed', label: '初期値有りテーブル', data: {}, fields: [
          'text', 'tinymce', 'image'
        ]
      }
    },
    fieldGroups: [
      ['sampleTable']
    ]
  })

})(jQuery);

これで先ほどのマルチフィールドを適用した画面をリロードしても表が表示されているハズです。

Clean Shot 2021 12 23 16 34 38

ステップ04：初期値もセット

下記のように sampleTableDefault を代入するところで初期値を入れれば各フィールドに初期値をセットすることもできます。

(function($){

  // 初期値の値
  const sampleTableDefault = {
    "items":[
      {
        "data":{
          "text":"初期値です",
          "tinymce":"
リッチ初期値です
",
          "image":{
            "id":"66",
            "url":"/files/pakutasho-01.jpg",
            "thumbnail":"/mt/mt.cgi?__mode=thumbnail_image&width=80&ts=20211223123754&blog_id=5&id=66&height=120"
          }
        },
        "handle":"sampleTable",
        "id":"mtapp.randomString()"
      }
    ],
    "version":2,
    "ts":"(new Date()).getTime()"
  };

  // 新規作成の場合に初期値をテキストエリアに入れる（26部分はフィールドIDに変更してください）
  const $contentField26 = $('[name="content-field-26"]');
  if ($contentField26.val() === '') {
    $contentField26.val(Object.toJSON(sampleTableDefault));
  }

  mtapp.multiField({
    version: 2, // 忘れないように！
    id: 26, // 適宜変更してください。
    label: '初期値有りテーブルサンプル',
    showViewRawDataButton: true, // 始めは true にします。
    fieldBlocks: {
      sampleTable: {
        type: 'table-vertical-fixed', label: '初期値有りテーブル', data: {}, fields: [
          'text', 'tinymce', 'image'
        ]
      }
    },
    fieldGroups: [
      ['sampleTable']
    ]
  })

})(jQuery);
Clean Shot 2021 12 23 16 43 29

ステップ05：showViewRawDataButton に false をセット

最後に showViewRawDataButton に false をセットしておきましょう。

以上です。簡単ですので是非ご活用ください。

この記事をシェア

関連記事