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

kintoneUIComponentでボタンを設置する

kintoneUIComponentを使ってボタンを設置する

英語ドキュメントしか出てこなかったので、参考までに書いておく。なお、作ったのはタイムカードアプリなので、サンプルの定義はそれらしい記述になっているのでご了承を。

大前提

kintoneUIComponentのライブラリはアプリに読み込んでおくこと。

ボタン定義

まず、ボタンの定義をする。ボタンに表示するテキストと、ボタンのタイプ、submitとnormalを選べる。

kintoneui.js
        // 開始打刻ボタン定義
        var restStartButton = new kintoneUIComponent.Button({
           text: '休憩開始',
           type: 'submit'
        });

ボタンを設置する

レコード詳細画面で、ボタンを設置したい場所に「スペース」を定義して、その上で上記で定義したボタンを設置する。getSpaceElementで取っているのが、スペースのID。

kintoneui.js
        // 開始打刻ボタン定義
        var restStartButton = new kintoneUIComponent.Button({
           text: '休憩開始',
           type: 'submit'
        });
        // 開始打刻ボタン設置
        let elStartButton = kintone.app.record.getSpaceElement('restStart');
        elStartButton.appendChild(restStartButton.render());

ボタンを押下した時の挙動を定義する

ボタンの場合は「押下(クリック)」した時の動作を定義する。ちなみに別関数を呼び出しているだけ。

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();
        });


参考までに、呼び出し先はこんな感じ。

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);
    }
saitohsan
開発、運用、保守、システム監視、時々折衝、調整、企画。最近は契約社員にIT知識を研修するお仕事。
http://www.typezero.info/
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
ユーザーは見つかりませんでした