お世話になっております。
タイトルの件について、下記トピックを参考に一覧ビューに複数のボタンを設置したいと考えております。
どのようにコードを書けば良いかわからず。。。ご教授いただければ幸いでございます。
よろしくお願いいたします。
Naoさん
↑のサンプルをもとにすると、以下のようなコードでボタンを追加できるかと思われます。
（ボタンクリック時の処理などは省いています）
(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個あってすごく見づらいコードになっていましたが、
ご教授いただいたコードにてスッキリとなりました。
本当にありがとうございました。
今後ともよろしくお願いいたします。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。