앱에 버튼을 설치하고 싶을 수도 있습니다. 그렇지?
이번에는 버튼을 앱의 스페이스 필드에 추가하여 사용할 수 있도록 하는 이야기입니다✨✨
kintone & JavaScript 커스터마이즈를 방금 시작한 방향으로 썼습니다 ^ 0 ^

이번에 만드는 버튼의 완성 이미지
자작의 버튼을 클릭하면 「푸시」라고 쓰여진 경보를 표시합니다.

공간 필드 준비

그럼 우선 앱의 준비・・・라고 할까 스페이스 필드의 준비를 합니다.

(1) 스페이스 필드를 설치합니다


(2) 요소 ID를 설정합니다. 이번은 spSuteki 로 둡니다. (무엇이든 괜찮습니다)

자바스크립트 쓰기

버튼을 설치할 JavaScript를 작성합니다.
이것의 복사본으로, 신규 추가 화면 & 편집 화면에서 버튼을 일단 사용할 수 있게 됩니다.
해설은 나중에 설명합니다.

//新規追加画面でボタンを使いたいときは'app.record.create.show'
//編集画面でボタンを使いたいときは'app.record.edit.show'
kintone.events.on(['app.record.create.show', 'app.record.edit.show'], event => {
    //ボタンを置きたいスペースフィールドを取ってくる
    const sp = kintone.app.record.getSpaceElement('spSuteki');

    //ボタンを作る
    const btn = document.createElement('button');
    //ボタンに表示したいテキスト
    btn.textContent='ボタン';

    //スペースフィールドにボタンを追加する
    sp.appendChild(btn);

    //ボタンをクリックしたときの動作
    btn.onclick=()=>{
        //ここにボタンをクリックしたときの動作を書く
        alert('プッシュ');
    }

    return event;
});    

JavaScript 해설

이벤트가 발생했을 때 움직이는 프로그램

최초의 이런 행입니다만・・・kintone.events.on(['app.record.create.show', 'app.record.edit.show'], event =>{～～
「〇〇인 이벤트가 발생하면, ~~할게!」라는 의미의 부분입니다.'app.record.create.show' 는 "레코드 추가 화면이 표시된다는 이벤트가 발생하면"'app.record.edit.show' 는 "레코드 편집 화면이 표시된다는 이벤트가 발생하면"
입니다.
event => { 다음에, 「~~한다」를 프로그램 합니다.

스페이스 필드에 버튼을 놓습니다.

화면이 표시된다는 이벤트가 발생하면 버튼을 표시하고 싶습니다.
버튼을 공간 필드에 넣고 싶지만 그것을 프로그래밍하려면

공간 필드를 프로그래밍 방식으로 처리 할 수 ​​있습니다.

"버튼"만들기

공간 필드에 버튼을 놓습니다.

라는 절차가 필요합니다.

프로그램을 살펴보자.

1. "공간"필드는 ↓처럼 프로그램으로 처리할 수 있습니다.const sp = kintone.app.record.getSpaceElement('スペースフィールドの要素ID')
앱을 준비할 때 공간 필드의 요소 ID를 spSuteki로 지정했습니다.
아래와 같이 하는 것으로, sp 라고 하는 넣어에 요소 ID가 spSuteki 의 스페이스 필드를 넣을 수가 있습니다.

//ボタンを置きたいスペースフィールドを取ってくる
const sp = kintone.app.record.getSpaceElement('spSuteki');

2. 다음은 단추를 만듭니다.

JavaScript로 「버튼(button)」을 만들 때는 document.CreateElement('button') 로 합니다.
버튼에 표시하고 싶은 텍스트도 설정해 둡시다.

//ボタンを作る
const btn = document.createElement('button');
//ボタンに表示したいテキスト
btn.textContent='ボタン';

3. 그리고 만든 버튼을 스페이스 필드에 올려 (추가)합니다.sp (스페이스 필드)에 btn (버튼)을, appendChild (추가)하고 있습니다.

//スペースフィールドにボタンを追加する
sp.appendChild(btn);

버튼 움직임 만들기

버튼 만들기 다음에 버튼을 눌렀을 때 어떻게 할까! ? 의 부분을 프로그래밍합니다.
이번에는 alert()를 사용하여 경고를 표시합시다.
btn (버튼)을, onClick (클릭했을 때) 라는 이미지↓와 같이 씁니다.

//ボタンをクリックしたときの動作
btn.onclick=()=>{
    //ここにボタンをクリックしたときの動作を書く
    alert('プッシュ');//アラート表示
}

요약

kintone에서는 버튼을 추가하고 싶을 때는 JavaScript로 커스터마이즈 할 필요가 있습니다.
하지만 단지 몇 줄의 프로그램을 쓰는 것으로 버튼을 표시할 수 있다면 왠지 할 수 있을 것 같은 느낌이 들지 않겠습니까! ?

다음 번에는 버튼을 사용하여 필드의 값을 변경해 보는 것과 같은 프로그래밍에 도전하고 싶습니다 ✨✨
그럼~

※공식의 튜토리얼에서도 버튼을 설치하는 방법이 소개되고 있으므로, 꼭 그쪽도 봐 주세요 ＾0＾
참고 : 제3회 레코드 상세에도 버튼을 설치하자!

이상입니다✨✨