1. saitohsan

    Posted

    saitohsan
Changes in title
+kintoneUIComponentでボタンを設置する
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,64 @@
+#kintoneUIComponentを使ってボタンを設置する
+英語ドキュメントしか出てこなかったので、参考までに書いておく。なお、作ったのはタイムカードアプリなので、サンプルの定義はそれらしい記述になっているのでご了承を。
+
+##大前提
+kintoneUIComponentのライブラリはアプリに読み込んでおくこと。
+
+##ボタン定義
+まず、ボタンの定義をする。ボタンに表示するテキストと、ボタンのタイプ、submitとnormalを選べる。
+
+```javascript:kintoneui.js
+ // 開始打刻ボタン定義
+ var restStartButton = new kintoneUIComponent.Button({
+ text: '休憩開始',
+ type: 'submit'
+ });
+```
+
+##ボタンを設置する
+レコード詳細画面で、ボタンを設置したい場所に「スペース」を定義して、その上で上記で定義したボタンを設置する。getSpaceElementで取っているのが、スペースのID。
+
+```javascript:kintoneui.js
+ // 開始打刻ボタン定義
+ var restStartButton = new kintoneUIComponent.Button({
+ text: '休憩開始',
+ type: 'submit'
+ });
+ // 開始打刻ボタン設置
+ let elStartButton = kintone.app.record.getSpaceElement('restStart');
+ elStartButton.appendChild(restStartButton.render());
+
+```
+
+##ボタンを押下した時の挙動を定義する
+ボタンの場合は「押下(クリック)」した時の動作を定義する。ちなみに別関数を呼び出しているだけ。
+
+
+```javascript:kintoneui.js
+ // 開始打刻ボタン定義
+ var restStartButton = new kintoneUIComponent.Button({
+ text: '休憩開始',
+ type: 'submit'
+ });
+ // 開始打刻ボタン設置
+ let elStartButton = kintone.app.record.getSpaceElement('restStart');
+ elStartButton.appendChild(restStartButton.render());
+ // 開始打刻
+ restStartButton.on('click', function(){
+ setRestStartTime();
+ });
+
+
+```
+
+参考までに、呼び出し先はこんな感じ。
+
+
+```javascript:kintoneui.js
+ // 休憩開始打刻
+ function setRestStartTime(){
+ var record = kintone.app.record.get();
+ record['record']['休憩開始']['value'] = moment().format('YYYY-MM-DD HH:mm');
+ kintone.app.record.set(record);
+ }
+```