複数ボタンを設置

お世話になっております。

タイトルの件について、下記トピックを参考に一覧ビューに複数のボタンを設置したいと考えております。

第2回 レコード一覧画面にボタンを置いてみよう!

どのようにコードを書けば良いかわからず。。。ご教授いただければ幸いでございます。

よろしくお願いいたします。

Naoさん

第2回 レコード一覧画面にボタンを置いてみよう!

↑のサンプルをもとにすると、以下のようなコードでボタンを追加できるかと思われます。

(ボタンクリック時の処理などは省いています)

(function() {
kintone.events.on('app.record.index.show', function(event) {
// 増殖バグを防ぐ
if (document.getElementById('my_index_button') !== null) {
return;
}

var myIndexButton = document.createElement('button');
myIndexButton.id = 'my_index_button';
myIndexButton.innerHTML = '一覧のボタン';

// ふたつめのボタン
var myIndexButton2 = document.createElement('button');
myIndexButton2.id = 'my_index_button2';
myIndexButton2.innerHTML = '一覧のボタン2';

// ボタンを配置するスペース
var el = kintone.app.getHeaderMenuSpaceElement();

// スペースに作成したボタンを追加
el.appendChild(myIndexButton);
el.appendChild(myIndexButton2);
});
})();

document.createElement(‘button’) で任意の数だけボタンを作成し、

ボタンを配置する先のスペースに appendChild() で追加してあげれば良いと思われます。

Shinichi Suenaga様

早速のご返信ありがとうございます。

度々の質問で申し訳ございませんが、複数のボタンをデザインする場合は

やはり下記のように各ボタン毎にコードを書かなければいけないでしょうか?(スマートに書く方法ははできますでしょうか?)

(function() {
    kintone.events.on('app.record.index.show', function(event) {
        // 増殖バグを防ぐ
        if (document.getElementById('my_index_button') !== null) {
            return;
        }
        
        // ひとつめのボタン
        var myIndexButton = document.createElement('button');
        myIndexButton.id = 'my_index_button';
        myIndexButton.style.display = 'inline-block';
        myIndexButton.style.backgroundColor = '#f7f9fa';
        myIndexButton.style.height = '48px';
        myIndexButton.style.border = 'solid 1px #e3e7e8';
        myIndexButton.style.color = '#3498db';
        myIndexButton.innerHTML = '一覧のボタン';
        // オンマウス
        myIndexButton.onmouseover = function() {
        myIndexButton.style.backgroundColor = '#3498db';
        myIndexButton.style.color = '#ffffff';
        };
        // マウスアウト
        myIndexButton.onmouseout = function() {
        myIndexButton.style.backgroundColor = '#f7f9fa';
        myIndexButton.style.border = 'solid 1px #e3e7e8';
        myIndexButton.style.color = '#67c5ff';
        };
 
        // ふたつめのボタン
        var myIndexButton2 = document.createElement('button');
        myIndexButton2.id = 'my_index_button2';
        myIndexButton2.style.display = 'inline-block';
        myIndexButton2.style.backgroundColor = '#f7f9fa';
        myIndexButton2.style.height = '48px';
        myIndexButton2.style.border = 'solid 1px #e3e7e8';
        myIndexButton2.style.color = '#3498db';
        myIndexButton2.innerHTML = '一覧のボタン2';
        // オンマウス
        myIndexButton02.onmouseover = function() {
        myIndexButton02.style.backgroundColor = '#3498db';
        myIndexButton02.style.color = '#ffffff';
        };
        // マウスアウト
        myIndexButton2.onmouseout = function() {
        myIndexButton2.style.backgroundColor = '#f7f9fa';
        myIndexButton2.style.border = 'solid 1px #e3e7e8';
        myIndexButton2.style.color = '#67c5ff';
        };
 
        // ボタンを配置するスペース
        var el = kintone.app.getHeaderMenuSpaceElement();
 
        // スペースに作成したボタンを追加
        el.appendChild(myIndexButton);
        el.appendChild(myIndexButton2);
    });
})();

Naoさん

スマートに書く方法として、ひとつは「style」の指定をCSSファイルに任せる方法があるかと思われます。

ご提示いただいたコードでしたら、「id」と「innerHTML」以外はCSSで制御できます。

二つのボタンを同じデザインにされているようですので、同じCSSクラスを指定してあげればCSS側の定義だけでよさそうです。

(以下の例ではCSSクラス名を ‘sample-class’ としています)

 

JS

(function() {
kintone.events.on('app.record.index.show', function(event) {
// 増殖バグを防ぐ
if (document.getElementById('my_index_button') !== null) {
return;
}

//ボタンに付与するCSSクラス名
var btnClassName = 'sample-class';

// ひとつめのボタン
var myIndexButton = document.createElement('button');
myIndexButton.id = 'my_index_button';
myIndexButton.className = btnClassName; // CSSクラスを指定
myIndexButton.innerHTML = '一覧のボタン';

// ふたつめのボタン
var myIndexButton2 = document.createElement('button');
myIndexButton2.id = 'my_index_button2';
myIndexButton2.className = btnClassName; // CSSクラスを指定
myIndexButton2.innerHTML = '一覧のボタン2';

// ボタンを配置するスペース
var el = kintone.app.getHeaderMenuSpaceElement();

// スペースに作成したボタンを追加
el.appendChild(myIndexButton);
el.appendChild(myIndexButton2);
});
})();

 

CSS

@charset "UTF-8";
/* 基本設定 */
.sample-class {
display: inline-block;
background-color: #f7f9fa;
height: 48px;
border: solid 1px #e3e7e8;
color: #3498db;
}

/* マウスオーバー時 */
.sample-class:hover {
background-color: #3498db;
color: #ffffff;
}

Naoさん

よりスマートに書くなら、ボタンを作る関数を作ってしまってもよいかもしれませんね。

↓引数に指定した「 id, CSSクラス名, ボタン内部テキスト 」に基づいてボタンエレメントを作る関数を使ったサンプルです。

(function() {
//ボタン作成関数を定義
function createBtn(id, cls, txt) {
var btn = document.createElement('button');
btn.id = id;
btn.className = cls;
btn.innerHTML = txt;
return btn;
}

kintone.events.on('app.record.index.show', function(event) {
// 増殖バグを防ぐ
if (document.getElementById('my_index_button') !== null) {
return;
}

//ボタンに付与するCSSクラス名
var btnClassName = 'sample-class';

// ひとつめのボタン
var myIndexButton = createBtn('my_index_button', btnClassName, '一覧のボタン');
// ふたつめのボタン
var myIndexButton2 = createBtn('my_index_button2', btnClassName, '一覧のボタン2');

// ボタンを配置するスペース
var el = kintone.app.getHeaderMenuSpaceElement();

// スペースに作成したボタンを追加
el.appendChild(myIndexButton);
el.appendChild(myIndexButton2);
});
})();

Shinichi Suenaga様

ご返信ありがとうございます。

実はボタンが6個あってすごく見づらいコードになっていましたが、

ご教授いただいたコードにてスッキリとなりました。

本当にありがとうございました。

今後ともよろしくお願いいたします。