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

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

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

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

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

 

古川さん

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

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

 

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

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

https://developer.cybozu.io/hc/ja/articles/201767270

サクラエビさん

お世話になります。

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

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

// 任意のスペースフィールドにボタンを設置
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となります。

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

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

古川さん

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

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

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

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

 

(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/’;
linkSpaceFieldButton.innerHTML = ‘明細入力へ’;

linkSpaceFieldButton.onclick = function () {
window.open(app_url);
};

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

})();

サクラエビさん

お世話になります。

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

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

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

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

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

古川さん

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

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

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

 

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

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

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

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

https://developer.cybozu.io/hc/ja/articles/202905604

https://developer.cybozu.io/hc/ja/articles/202122544

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

サクラエビさん

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

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

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