소개

kintone에서, 드롭다운이나 체크 박스 등 「복수의 선택사항을 준비해 두는 필드 타입」을 만드는 경우, 선택사항이 많아지면, 「+」버튼을 눌러서는 입력, 눌러서는 입력,,, 매우 귀찮은 경우가 많습니다.

하지만 거기는 웹 앱인 킨톤! 브라우저의 디버그 콘솔을 사용하면 JavaScript를 사용하여 대량의 선택사항을 순식간에 등록할 수 있습니다.

샘플 코드

여기!
기존 항목은 유지하고 그 아래에 일괄 투입합니다.values 배열과 checked의 true|false만 수정하면 됩니다. 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을 엽니다.


붙여넣고,,,


Enter! 도야!

체크박스

설정의 상세 화면까지 내고 F12에서 Console을 엽니다.


붙여넣고 기본 검사는 true로 시도합니다.


Enter! 도야!

기존 항목의 설정값만 획득

이렇게 하면 기존 항목의 설정값을 배열로 얻을 수 있습니다.
이 결과를 복사하여 일괄 설정 프로그램의 values로 그대로 사용할 수 버리므로 앱간에 설정 항목의 복사본도 쉽게 할 수 있군요!

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

감사의 말씀(?)

이 기사의 코드는, SonicGarden 부사장후지와라씨이 편성한 기술을, 좀 더 범용적으로 한 것입니다. 원작자의 이름도 제대로 써 두지 않으면!

후지와라 씨는, 이 계의 「디버그 콘솔로 사쿠토 DOM 조작(CSS 조작도)」이 초특기로, 그 분야는 아직 이길 수 있는 생각이 들지 않네요. 초보자 앞에서도 라이브 코딩적인 재미있는 매력 방법을 다양하게 할 수 있기 때문에, 더 극하고 싶네요! 매일 정진입니다.

결론

그 외에도, 「라디오 버튼」 「복수 선택」필드에서도 동작 확인할 수 있었습니다. DOM의 구조는 꽤 공통이군요.

kintone에 업로드한 JavaScript는 설정 화면에서는 유효하지 않지만, 이런 식으로 브라우저의 Console을 사용하면 그 자리에서만 얼마든지 hack 할 수 있습니다! 즐기자



덧붙여서 let const가 아니고 var로 써 있는 것은 이유가 있습니다. 브라우저의 콘솔에 복사하면서 시도하는 경우, 아무래도 var hoge = fuga 라는 것을 반복해서 붙여 넣는 경우가 많고, let const 는 변수의 재정의를 할 수 없기 때문에, 매회 리로드 되어, 신경을 쓰지 않으면 안돼. 재정의 할 수있는 유루 var가 매우 편리했습니다 w  ↩