Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@saitohsan

kintoneUIComponentでボタンを設置する

More than 1 year has passed since last update.

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);
    }
0
Help us understand the problem. What is going on with this article?
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
saitohsan
開発、運用、保守、システム監視、時々折衝、調整、企画。最近は契約社員にIT知識を研修するお仕事。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?