kintoneでの簡易タブ運用(JavaScript使用)

kintoneでの簡易タブ運用(JavaScript使用):

はじめに

プログラムしない人は@rex0220さんが提供しているタブ表示プラグインを

購入検討したほうが良いかと思います。

私も買いたかった。。。

とりあえずメモ用としておいときます。

完成イメージ

仕組み

kintoneのスペースフィールドの要素を取得し、ボタンを生成、タブ状に配置する。

ボタンを押した際に連動してグループの表示/非表示が行われる。

- フィールドの表示／非表示を切り替える - cybozu developer network

フォームの設定

全体画面

スペースフィールドにtab_buttonを入力する。

プログラムの設定

1. コード内でボタン要素の準備
2. 画面を開いたときにタブボタンを表示
3. ボタンを押したかどうか
4. 表示の処理

tab.js

(function() { 
    "use strict"; 
    // 1. ボタン要素の準備 
    var groupaButton = document.createElement('button'); 
        groupaButton.id = 'groupaButton'; 
        groupaButton.innerHTML = 'groupa'; 
        groupaButton.style.height = '30px'; 
        groupaButton.style.width = '150px'; 
        groupaButton.style.borderRadius = '10px 10px 0px 0px'; 
 
    var groupbButton = document.createElement('button'); 
        groupbButton.id = 'groupbButton'; 
        groupbButton.innerHTML = 'groupb'; 
        groupbButton.style.height = '30px'; 
        groupbButton.style.width = '150px'; 
        groupbButton.style.borderRadius = '10px 10px 0px 0px'; 
 
 
    var allButton = document.createElement('button'); 
        allButton.id = 'allButton'; 
        allButton.innerHTML = 'All'; 
        allButton.style.height = '30px'; 
        allButton.style.width = '150px'; 
        allButton.style.borderRadius = '10px 10px 0px 0px'; 
 
    // 2. 画面を開いたときにタブボタンを表示 
    var event = ['app.record.edit.show', 
                 'app.record.create.show', 
                 'app.record.detail.show']; 
 
    kintone.events.on(event, function(e) { 
        kintone.app.record.getSpaceElement('tab_button').appendChild(groupaButton); 
        kintone.app.record.getSpaceElement('tab_button').appendChild(groupbButton); 
        kintone.app.record.getSpaceElement('tab_button').appendChild(allButton); 
        tagView(0); 
 
        return e; 
    }); 
 
 
    // 3. ボタンを押したかどうか 
    groupaButton.onclick = function() { 
        tagView(0); 
        return false; 
    }; 
 
    groupbButton.onclick = function() { 
        tagView(1); 
        return false; 
    }; 
 
    allButton.onclick = function() { 
        tagView(3); 
        return false; 
    }; 
 
    // 4. 表示の処理 
    function tagView(setInfo){ 
        //初期表示 
        groupaButton.style.background = '#bcdce4'; 
        groupaButton.style.color = '#000000'; 
        groupbButton.style.background = '#bcdce4'; 
        groupbButton.style.color = '#000000'; 
        allButton.style.background = '#bcdce4'; 
        allButton.style.color = '#000000'; 
 
        kintone.app.record.setFieldShown('group_a'  ,false); 
        kintone.app.record.setFieldShown('group_b',false); 
 
 
        switch (setInfo) { 
            case 0: 
                groupaButton.style.background = '#000000'; 
                groupaButton.style.color = '#ffffff'; 
                kintone.app.record.setFieldShown('group_a',true); 
                break; 
 
            case 1: 
                groupbButton.style.background = '#000000'; 
                groupbButton.style.color = '#ffffff'; 
                kintone.app.record.setFieldShown('group_b',true); 
                break; 
 
            case 3: 
                allButton.style.background = '#000000'; 
                allButton.style.color = '#ffffff'; 
                kintone.app.record.setFieldShown('group_a',true); 
                kintone.app.record.setFieldShown('group_b',true); 
                break; 
 
 
            default: 
                allButton.style.background = '#ffffff'; 
                allButton.style.color = '#000000'; 
                kintone.app.record.setFieldShown('group_a',true); 
                kintone.app.record.setFieldShown('group_b',true); 
                break; 
        } 
        return; 
    }     
})(); 
 

最後に

ログインユーザーの取得を使ってユーザーフィールドやステータスの項目を比較して、

その人が開いたときには、その人が見るべき情報や作業すべき内容を自動表示できます。

うまく活用して、ワンクリックでも作業を減らせたらと思います。

では