mtapp.multiField v3 で初期値をセットしたり始めからフィールドを表示させたりする方法
MTAppjQuery の mtapp.multiField v3 で初期値をセットしたり始めからフィールドを表示させたりする方法をご紹介します。
MTAppjQuery の mtapp.multiField v3 で初期値をセットしたり始めからフィールドを表示させたりする方法をステップバイステップでご紹介します。
ステップ01：マルチフィールドを適用
まずは user.js に下記のように普通に mtapp.multiField を適用させます。
(function($){
// 初期表示するフィールドのIDを取得
// 「multiField v3 フィールド初期表示」部分はコンテンツフィールドのフィールド名を指定
const sampleTableFieldId = mtapp.getContentFieldIdByLabel('multiField v3 フィールド初期表示');
mtapp.multiField({
version: 3, // 忘れないように！
id: sampleTableFieldId, // コンテンツフィールドのフィールド名を指定します。
label: '初期値有りテーブルサンプル',
showViewRawDataButton: true, // 始めは true にします。
fieldBlocks: {
sampleTable: {
type: 'table-vertical-fixed',
label: '初期値有りテーブル',
data: {},
fields: ['text', 'tinymce', 'image']
}
},
fieldGroups: [['sampleTable']]
});
})(jQuery);ステップ02：フィールドを表示して値をコピー
次に「フィールドを追加」→「初期値有りテーブル」でフィールドブロックを表示し、「保存データを表示」をクリックします。そして、表示された JSON の値をコピーします。
ステップ03：初期表示フィールドをセット
ステップ01 のコードの上に初期表示フィールドをセットするためのコードを挿入します。
ここでは sampleTableDefault という変数に、先ほどコピーした値を代入します。下記コードは見やすいように整形していますが、整形する必要はありません。代入する際に、id の値の文字列を mtapp.randomString() に書き換えます。
そして、フィールドのテキストエリアの値を調べ、値が空のとき（＝初期表示のとき）は sampleTableDefault をJSON文字列にして、フィールドにセットします。
(function($){
// 初期表示するフィールドのIDを取得
// 「multiField v3 フィールド初期表示」部分はコンテンツフィールドのフィールド名を指定
const sampleTableFieldId = mtapp.getContentFieldIdByLabel('multiField v3 フィールド初期表示');
// 初期表示するフィールドのデータを定義
const sampleTableDefault = {
items: [
{
data: { text: '', tinymce: '', image: { id: '', url: '', thumbnail: '', alt: '' } },
handle: 'sampleTable',
id: `mtapp.randomString()`,
expanded: true
}
]
};
// フィールドが空の場合は初期表示するフィールドのデータをセット
const sampleTableField = document.querySelector(`[name="content-field-${sampleTableFieldId}"]`);
if (!sampleTableField.value) {
sampleTableField.value = JSON.stringify(sampleTableDefault);
}
mtapp.multiField({
version: 3, // 忘れないように！
id: sampleTableFieldId, // コンテンツフィールドのフィールド名を指定します。
label: '初期値有りテーブルサンプル',
showViewRawDataButton: true, // 始めは true にします。
fieldBlocks: {
sampleTable: {
type: 'table-vertical-fixed',
label: '初期値有りテーブル',
data: {},
fields: ['text', 'tinymce', 'image']
}
},
fieldGroups: [['sampleTable']]
});
})(jQuery);これで先ほどのマルチフィールドを適用した画面をリロードしても表が表示されているハズです。
ステップ04：初期値もセット
ステップ02のところで、フィールドに値を入力してからJSONをコピーして、そのJSONをフィールドにセットするようにすれば、初期値ありの状態にできます。
(function($){
// 初期表示するフィールドのIDを取得
// 「multiField v3 フィールド初期表示」部分はコンテンツフィールドのフィールド名を指定
const sampleTableFieldId = mtapp.getContentFieldIdByLabel('multiField v3 フィールド初期表示');
// 初期表示するフィールドのデータを定義
const sampleTableDefault = {
items: [
{
data: {
text: '1行テキストの初期値です',
tinymce: '<p>リッチテキストの初期値です</p>',
image: {
id: '135',
url: '/mt8/test/mtappassetsgallery/pakutaso-01.jpg',
thumbnail: '/mt8/test/mtappassetsgallery/assets_c/2024/02/pakutaso-01-thumb-autox120-135.jpg',
alt: '美味しそうなケーキ'
}
},
handle: 'sampleTable',
id: mtapp.randomString(),
expanded: true
}
]
};
// フィールドが空の場合は初期表示するフィールドのデータをセット
const sampleTableField = document.querySelector(`[name="content-field-${sampleTableFieldId}"]`);
if (!sampleTableField.value) {
sampleTableField.value = JSON.stringify(sampleTableDefault);
}
mtapp.multiField({
version: 3, // 忘れないように！
id: sampleTableFieldId, // コンテンツフィールドのフィールド名を指定します。
label: '初期値有りテーブルサンプル',
showViewRawDataButton: true, // 始めは true にします。
fieldBlocks: {
sampleTable: {
type: 'table-vertical-fixed',
label: '初期値有りテーブル',
data: {},
fields: ['text', 'tinymce', 'image']
}
},
fieldGroups: [['sampleTable']]
});
})(jQuery);
ステップ05：フィールドの下のボタンを非表示
最後に、showAddFieldButton と showViewRawDataButton に false をセットすれば、フィールドの下にあるボタンを非表示にできます。
以上です。簡単ですので是非ご活用ください。
, Updated 2024-11-13