# 一覧画面の明細行にボタンを設置する方法

**URL:** <https://community.cybozu.dev/t/topic/585>\
**Category:** kintone 開発相談\
**Created:** [2017 年 10 月 23 日午前 4:22 UTC](https://community.cybozu.dev/t/topic/585 "2017-10-23T04:22:33Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1739](https://avatars.discourse-cdn.com/v4/letter/l/7feea3/32.png) [@Legacy\_Account1739](https://community.cybozu.dev/u/Legacy_Account1739)\
**Post date:** [2017 年 10 月 23 日午前 4:22 UTC](https://community.cybozu.dev/t/topic/585/1 "2017-10-23T04:22:33Z")

</div>

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

一覧画面でボタンもしくはリンクを設置し(条件に応じて表示非表示の切り替えあり)、押下すると別アプリが別タブで開くようにさせたいのですが、スペースフィールドを利用しようとしても上手くいきません。

ご教授いただけませんでしょうか。

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

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1657](https://avatars.discourse-cdn.com/v4/letter/l/f4b2a3/32.png) [@Legacy\_Account1657](https://community.cybozu.dev/u/Legacy_Account1657)\
**Post date:** [2017 年 10 月 24 日午前 6:51 UTC](https://community.cybozu.dev/t/topic/585/2 "2017-10-24T06:51:06Z")

</div>

古川さん

投稿の内容から、どこがうまくいかないのかが、不明なのですが、どのあたりがうまくいかないのでしょうか？

記載の処理に関しては、ボタン押下時に、window.open などで別アプリを開くことで、要望の動作ができる気がします。

&nbsp;

なお、一覧画面へのボタン配置で躓いている場合には、下記ページなどが参考になるかと思います。

一覧画面の横のスペースにボタンを作成している処理となります。

[https://developer.cybozu.io/hc/ja/articles/201767270](https://developer.cybozu.io/hc/ja/articles/201767270)

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1739](https://avatars.discourse-cdn.com/v4/letter/l/7feea3/32.png) [@Legacy\_Account1739](https://community.cybozu.dev/u/Legacy_Account1739)\
**Post date:** [2017 年 10 月 27 日午前 4:44 UTC](https://community.cybozu.dev/t/topic/585/3 "2017-10-27T04:44:11Z")

</div>

サクラエビさん

お世話になります。

コメントありがとうございます。

レコード一覧画面の表示後イベントで下記の記述をしているのですが、エラーとなります。

// 任意のスペースフィールドにボタンを設置  
var linkSpaceFieldButton = document.createElement(‘button’);  
linkSpaceFieldButton.id = ‘link\_space\_field\_button’;  
var app\_url = ‘https://\*\*\*\*\*.cybozu.com/k/17/’;  
linkSpaceFieldButton.setAttribute(‘onClick’,‘location.href=app\_url’);  
linkSpaceFieldButton.innerHTML = ‘明細入力へ’;  
linkSpaceFieldButton.onclick = function () {  
window.open(this.href);  
}

kintone.app.record.getSpaceElement(‘link\_space\_field’).appendChild(linkSpaceFieldButton);←ここでエラー

Uncaught TypeError: Cannot read property ‘appendChild’ of nullとなります。

一覧画面表示後イベントでは上記の指定が出来ないのか指定の仕方が悪いのだと思うのですが、どのようにしたらよいのでしょうか？

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

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1657](https://avatars.discourse-cdn.com/v4/letter/l/f4b2a3/32.png) [@Legacy\_Account1657](https://community.cybozu.dev/u/Legacy_Account1657)\
**Post date:** [2017 年 10 月 27 日午前 5:07 UTC](https://community.cybozu.dev/t/topic/585/4 "2017-10-27T05:07:54Z")

</div>

古川さん

kintone.app.record.getSpaceElement に関しては、一覧画面で使えない関数となっています。

そのため、エラーが発生しているかと思います。

下記のように処理を、kintone.app.getHeaderMenuSpaceElement()に変更することで、

エラーが解消され実行ができると思います。

&nbsp;

(function() {  
“use strict”;  
kintone.events.on(‘app.record.index.show’, function(event) {  
if (document.getElementById(‘link\_space\_field\_button’) !== null) {  
return;  
}

var linkSpaceFieldButton = document.createElement(‘button’);  
linkSpaceFieldButton.id = ‘link\_space\_field\_button’;  
var app\_url = ‘[https://ドメイン.cybozu.com/k/アプリID/](https://qc9q4.cybozu.com/k/3501/)’;  
linkSpaceFieldButton.innerHTML = ‘明細入力へ’;

linkSpaceFieldButton.onclick = function () {  
window.open(app\_url);  
};

kintone.app.getHeaderMenuSpaceElement().appendChild(linkSpaceFieldButton);  
});

})();

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1739](https://avatars.discourse-cdn.com/v4/letter/l/7feea3/32.png) [@Legacy\_Account1739](https://community.cybozu.dev/u/Legacy_Account1739)\
**Post date:** [2017 年 10 月 27 日午前 5:35 UTC](https://community.cybozu.dev/t/topic/585/5 "2017-10-27T05:35:28Z")

</div>

サクラエビさん

お世話になります。

早速の回答、どうもありがとうございました。

上記の方法だとヘッダー部分にボタンがついてしまいました。

一覧画面の各明細行にボタンをつけて条件に応じて表示したり非表示にしたりしたいのですが可能でしょうか？

やりたいことをうまく説明できていなくて申し訳ありませんでした。

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

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1657](https://avatars.discourse-cdn.com/v4/letter/l/f4b2a3/32.png) [@Legacy\_Account1657](https://community.cybozu.dev/u/Legacy_Account1657)\
**Post date:** [2017 年 10 月 27 日午前 6:44 UTC](https://community.cybozu.dev/t/topic/585/6 "2017-10-27T06:44:35Z")

</div>

古川さん

各行にボタンをつけたいのですね。意図がくみ取れず、失礼しました。

ただ、そうなると使えるAPIがないので、サポートされな方法となってしますが

DOM操作で要素を取ってボタンを配置してという感じになりそうですね。

&nbsp;

もしくは、カスタマイズビューで画面を作成するといった感じでしょうか。

cybozuさん的にも推奨はカスタマイズビューでしょうし、DOM操作よりはカスタマイズビューの方が

メンテも少ないので楽だとは思います。

下記ページなどで、カスタマイズビューの利用に関して利用ページがあるので、一度確認されてみてはどうでしょうか？

[https://developer.cybozu.io/hc/ja/articles/202905604](https://developer.cybozu.io/hc/ja/articles/202905604)

[https://developer.cybozu.io/hc/ja/articles/202122544](https://developer.cybozu.io/hc/ja/articles/202122544)

↑が下の方ですがボタンを置いたりもしています。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1739](https://avatars.discourse-cdn.com/v4/letter/l/7feea3/32.png) [@Legacy\_Account1739](https://community.cybozu.dev/u/Legacy_Account1739)\
**Post date:** [2017 年 10 月 31 日午前 4:28 UTC](https://community.cybozu.dev/t/topic/585/7 "2017-10-31T04:28:27Z")

</div>

サクラエビさん

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

カスタマイズビューは面倒で難しそう・・・と思い避けていたのですが、ちょっと挑戦してみようと思います。

色々とどうもありがとうございました。