Help us understand the problem. What is going on with this article?

kintoneのフォーム作成時に、大量の選択肢を一瞬で登録する

はじめに

kintoneで、ドロップダウンやチェックボックスなど「複数の選択肢を用意しておくフィールドタイプ」を作る場合、選択肢が多くなると、「+」ボタンを押しては入力、押しては入力、、、、ってのがとても面倒くさいことが多いです。

しかし、そこはWebアプリであるkintone!ブラウザのデバッグコンソールを使えば、JavaScriptを使って大量の選択肢を一瞬で登録してやることが可能です。

サンプルコード

こちら!
既存の項目は保持して、その下に一括投入します。
values配列とcheckedtrue|falseだけを修正すればOKです。1

// 入力する値
var values = [0, 5, 10, 15, 20, 25, 30]
// 複数選択可能なフィールドでデフォルト値のチェックを付けるならtrue
var checked = false

var addButton = '.treeeditor-node-item-add-cybozu'
var textField = '.treeeditor-nodes-cybozu .input-text-cybozu'
var checkBox = '.treeeditor-nodes-cybozu .input-check-cybozu'
values.forEach(value => {
  var allButtons = document.querySelectorAll(addButton)
  var length = allButtons.length
  // 行追加
  allButtons[length - 1].click()
  // テキスト入力
  document.querySelectorAll(textField)[length].value = value
  // デフォルト値のチェックボックスをON
  if (checked) document.querySelectorAll(checkBox)[length].click()
})

実行例

ドロップダウン

設定の詳細画面まで出して、F12でConsoleを開く
image.png

貼り付けて、、、
image.png

Enter!ドヤ!
image.png

チェックボックス

設定の詳細画面まで出して、F12でConsoleを開く
image.png

貼り付けて、デフォルトチェックはtrueにしてみます。
image.png

Enter!ドヤ!
image.png

既存の項目の設定値だけを取得

こうすれば、既存項目の設定値を配列で取得できます。
この結果をコピーして、一括設定プログラムのvaluesとしてそのまんま使えちゃうので、アプリ間での設定項目のコピペも簡単にできちゃいますね!

var textField = '.treeeditor-nodes-cybozu .input-text-cybozu'
Array.from(document.querySelectorAll(textField)).map(_ => _.value)

image.png

謝辞(?)

この記事のコードは、弊社SonicGarden副社長の藤原氏が編み出した技を、もう少し汎用的にしたものです。原作者の名前もちゃんと書いておかないとね!

藤原さんは、これ系の「デバッグコンソールでサクッとDOM操作(CSS操作も)」が超得意で、その分野はまだまだ勝てる気がしないっすねー。初心者の前でもライブコーディング的な面白い魅せ方が色々できるので、もっと極めたいですね!日々精進であります。

おわりに

ほかにも、「ラジオボタン」「複数選択」フィールドでも動作確認できました。DOMの構造はかなり共通なんですね。

kintoneにアップロードしたJavaScriptは設定画面では有効になりませんが、こんな風にブラウザのConsoleを使ってやると、その場限りでいくらでもhackできます!楽しんでいきましょう :smile:


  1. ちなみにlet constじゃなくてvarで書いてあるのは理由があります。ブラウザのconsoleにコピペしながら試す場合は、どうしてもvar hoge = fugaってのを繰り返し貼り付けるケースが多く、let constは変数の再定義をできないので、毎回リロードするなり、気を使わなきゃいけないんです。再定義できてしまうユルいvarがとても便利でしたw 

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした