MTAppjQuery の MultiField で選択肢を動的に変えられるようにする #movabletype

マルチフィールドで 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）を使うだけという感じでいけそう。
色々勘が鈍ってる気がする（そもそもスキルが・・）。