2020-01-20
マルチフィールドで MTAppListing みたいな選択をやりたいなぁ、、、と思いつつ。
やりたかったのは記事のカテゴリを選択できるフィールドを作りたかっただけだったので、それなら DataAPI でとればいいのでは？ということで試してみる。
DataAPI たたく部分とかはにっくさんの記事がわかりやすい。
JavaScript の Promise で Movable Type の Data API から取得した非同期通信データを処理する - Qiita
https://qiita.com/TakeshiNickO...
とりあえずざっくりとコードとしてはこんな感じで。
const list = $.ajax('https://example.com/mt/mt-data-api.cgi/v4/sites/1/categories?fields=id,label');
let lists = [];
Promise.resolve(list).then(function(response) {
lists = response.items.map((e) => ({ label: e.label,data: e.id}));
mtapp.multiField({
debug: false,
id: 90,
label: '項目',
showAddFieldButton: true,
showViewRawDataButton: true,
fieldGroups: [
[
{
"type": "multi-column-content", "label": "項目（選択式）", "options": [
[
{ "type": "h1", "label": "項目名" },
{ "type": "textarea", "label": "テキスト" },
{ "type": "text", "label": "カテゴリ選択" },
{ "type": "select", "label": "カテゴリ選択", "options": lists }
]
]
}
]
]
});
});DataAPI でサイトを指定してカテゴリを取り出す。
MultiField の設定としてドロップダウンは
{
"type": "select", "label": "【フィールドのラベル】", "options": [
{ "label": "【 option のラベル】", "data": "【 option の value 属性の値】"},
{ "label": "リンゴ", "data": "apple"},
{ "label": "オレンジ", "data": "orange"},
{ "label": "キウィフルーツ", "data": "kiwi"}
]
}こんな感じの設定になるので、とりあえず DataAPI の設定では id, label を返すようにする。
その上で id を data におきかえて使う感じで問題なくとれた。
あとは保存される id（data）を使うだけという感じでいけそう。
色々勘が鈍ってる気がする（そもそもスキルが・・）。