上記ページを参考にしながら動的なドロップダウンをモバイル版でも作成したいのですが、下記のようなコードを書いても反映がされません。
問題点があればご指摘いただけないでしょうか。
こんにちは。
setFieldShownやgetSpaceElementはPC画面・モバイル画面で関数が異なるので、書き換えが必要になるかと思います。
kintone.app.record.setFieldShown() → kintone.mobile.app.record.setFieldShown()
kintone.app.record.getSpaceElement() → kintone.mobile.app.record.getSpaceElement()
developer networkのドキュメントを再確認頂くのが良いかと思います。
kintone-ui-componentはJavaScriptを理解できていないとうまく使えないところが多くあります。
まず、
kintone UI Componentnoの宣言の中で都道府県を47個宣言する必要があります。
記事とkintone UI Componentのドキュメントをよく読んで実装してみてはいかがでしょうか？
ちなみに、
kintone.mobile.app.getSpaceElement('space').appendChild(dropdown.render());
この部分ではdropdownのitem内のオブジェクトに何も宣言されていないため、空の状態にあります。
ご参考になっている記事のソースを丸々コピペして、
イベントをmobile.app.～～～に変えるだけで適用されませんか？
以下のものをコピペしてみてください、
(function() {
'use strict';
var prefectures = {
'北海道地方': ['北海道'],
'東北地方': ['青森', '岩手', '宮城', '秋田', '山形', '福島'],
'関東地方': ['東京', '茨城', '栃木', '群馬', '埼玉', '千葉', '神奈川'],
'中部地方': ['新潟', '富山', '石川', '福井', '山梨', '長野', '岐阜', '静岡', '愛知'],
'近畿地方': ['京都', '大阪', '三重', '滋賀', '兵庫', '奈良', '和歌山'],
'中国地方': ['鳥取', '島根', '岡山', '広島', '山口'],
'四国地方': ['徳島', '香川', '愛媛', '高知'],
'九州地方': ['福岡', '佐賀', '長崎', '大分', '熊本', '宮崎', '鹿児島', '沖縄']
};
var removeDropdownItems = function(event, dropdown) {
dropdown.setValue('');
while (dropdown.getItems().length) {
dropdown.removeItem(0);
}
};
var setDropdownItems = function(event, dropdown) {
if (!event.record.地方.value) return;
dropdown.addItem({label: '-----', value: ''});
prefectures[event.record.地方.value].forEach(function(prefecture) {
dropdown.addItem({
label: prefecture,
value: prefecture
});
});
dropdown.setValue('');
};
var DROPDOWN;
kintone.events.on(['mobile.app.record.create.show', 'mobile.app.record.edit.show'], function(event) {
var label = new kintoneUIComponent.Label({text: '都道府県'});
var dropdown = new kintoneUIComponent.Dropdown({items: []});
DROPDOWN = dropdown;
kintone.mobile.app.record.setFieldShown('都道府県', false);
kintone.mobile.app.record.getSpaceElement('space').appendChild(label.render());
kintone.mobile.app.record.getSpaceElement('space').appendChild(dropdown.render());
dropdown.on('change', function(value) {
var record = kintone.mobile.app.record.get();
record.record.都道府県.value = value;
kintone.mobile.app.record.set(record);
});
setDropdownItems(event, dropdown);
if (event.record.都道府県.value) {
dropdown.setValue(event.record.都道府県.value);
}
});
kintone.events.on(['mobile.app.record.create.change.地方', 'mobile.app.record.edit.change.地方'], function(event) {
removeDropdownItems(event, DROPDOWN);
setDropdownItems(event, DROPDOWN);
event.record.都道府県.value = '';
return event;
});
kintone.events.on(['mobile.app.record.create.submit', 'mobile.app.record.edit.submit'], function(event) {
var record = event.record;
if (!record.都道府県.value) {
event.error = '都道府県を選択してください';
}
return event;
});
})();
岡崎 光輝 様
あさが 様
コメントありがとうございます。
47都道府県はご提示いただいたソースコードと同じように記述しています。
また、記事のソースを丸々コピペして、イベントの頭にmobile～をつけても適用されませんでした。
ちなみにPC版も、参考元のソースを丸々コピペしただけでは適用されませんでしたが、フォームに
・地方のプルダウン
・要素IDが「space」のスペース
上記フィールドを手動で追加したことで解決しました。
初歩的な質問で恐縮ですが、そもそもkintone UI Componentはモバイル版でも使用することは可能なのでしょうか。
JS/CSSでカスタマイズのモバイル版JS、モバイル版CSSにも適用すれば可能かと思います。
実際に上記のコードをモバイル版に適用して、動作を確認しました。
岡崎 様
なるほど。JS/CSSの適用がうまくいっていないかもしれないということですね・・・
ありがとうございます。確認してみます。
念の為ご質問なのですが、適用の際には手動でフォームに上記のようにフィールドの設置は必要でしょうか。
岡崎 様
すみません。私の勘違いでkintone-ui-component.min.jsがモバイル版には適用されていませんでした。
初歩的なミスで何度も質問をしてしまいすみません。無事解決しました。ありがとうございました。