KintoneDB作成数日の初心者です。
サンプルトピックからHandsontableを利用してデータを表示すること
はできたのですが、先頭のセルにボタンを表示させることは可能でしょうか？
運用としては、
レコード一覧の中から、該当のボタンを押下した場合に、レコード詳細画面
に遷移するようにしたいと考えています。
Contextメニュー、右クリックでの遷移も検討しているのですが、障碍者がいるためできるだけ、右クリックではなく画面上のボタン（目に見えるもの）で運用したいと考えています。
できれば、ボタン押下後、レコード番号の取得方法、および遷移の方法を教えていただけるとたすかります。
Kintone初心者研修中 さん
Handsontable のセル内にボタンを表示することは可能と思われます。
columns の指定を行う部分（ {data: “hoge”, readOnly: true} などです）で、
renderer: "html"
を追加で指定してあげると、セル内でHTMLの記述が有効となります。
セルに表示するデータに、ボタンを表示するHTMLを記述すればよいと思われます。
英語ですが、こちらのページなどがご参考になるかと思われます。
レコード詳細画面のURLは以下のようになります。
https://{サブドメイン}.cybozu.com/k/{アプリID}/show#record={レコード番号}
※同一ドメイン内でしたら ‘/k’ 以降だけで遷移できます
アプリIDは
kintone.app.getId()
で、
レコード番号は、一覧画面でしたら
event.records[i].$id.value
で取得できますので、あらかじめ先述のボタンに<a>タグなどを仕込んでおけば実現できるのではないでしょうか。
ご回答ありがとうございます。
内容は理解したのですが、初歩的質問でおはずかしいです。
event.records[i]のiには
現在アクティブな行数（０～ｘｘｘ）を入れると思うのですが、現在アクティブな行番号
を取得するにはどのようにしたらよいのでしょうか？
引き続きご回答いただければ幸いです。
Kintone初心者研修中 さん
> event.records[i]のi
for ループの中で使用することを前提として回答しておりました。
「現在アクティブな行数」とは何を指していらっしゃるのかわかりませんが、
「クリックした行のレコード番号」ととらえればよろしいでしょうか？
あらかじめセルにレコード番号を持たせておくようにすれば、
クリック時点ではその行のレコード番号を意識しなくてもよいのではないかと思います。
例）//セルにあらかじめリンクを作成しておく
<a href="/k/{アプリID}/show#record={レコード番号}">レコード詳細へのリンク</a>
的外れなお答えとなっておりましたら申し訳ありません。
差し支えなければ、実際のソースなどをご提示頂ければ認識の相違なくご回答できるかと存じます。
回答ありがとうございます。わかりずらくて申し訳ありません。
ソースは、Handsontableを使ってkintoneをExcelライクに入力しよう その1を利用して
作成しています。
アクティブなレコードとは、グリッド状には100行のレコードが表示されているので
そのうちのどれか？を選択した行のことです。
Contextmenuの場合では、
contextMenu: {
callback: function(key, cell, e) {
console.log(cell.start.row, cell.start.col);
console.log(event.records[cell.start.row].$id.value);
の部分で表示されている該当の行番号が取得できましたのでその行番号から、レコードIDを
取得することはできました。（ページを切り替えるとMenuが無限増殖してしまいますが・・・）
kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
の場合、ボタンを押下した場合にどの行がアクティブ（選択）した状態なのかを
判別する方法がよくわかっていません。
また、レコード行数にボタンを配置しようとし、
columns: [
{data: “レコード番号.value”, editor: false},の部分に直接URLを書き込んで、カスタムHTMLを
表示させようとしたのですが、NULL状態になってしまいます。
この場合、data: records,のdataの状態でHTMLのデータを格納しておく必要があるのでしょうか？
わかりずらい質問で申し訳ないですが、回答のほどよろしくお願いします。
(function() {
“use strict”;
kintone.events.on([‘app.record.index.show’], function(event) {
// ビューIDを指定する（指定したビューID以外は処理しない）
if (event.viewId !== 5118472) return; //カスタムビュー番号
var records = event.records;
// カスタマイズビュー設定時に登録したHTMLの要素を指定します。
var container = document.getElementById(‘sheet’);
container.innerHTML=‘’; //HTML要素のクリア
// 一覧表示時に編集用ボタンを配置
if (document.getElementById(‘my_index_button’) == null) {
var myIndexButton = document.createElement(‘button’);
myIndexButton.id = ‘my_index_button’;
myIndexButton.innerHTML = ‘詳細画面’;
kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
}
// Handsontableをインスタンス化
var hot = new Handsontable(container, {
// kintoneのレコードデータを指定
data: records,
minSpareRows: 0,
maxRows: 5,
// カラムのヘッダーを指定
colHeaders: [“番号”,“工事番号”, “工事件名”, “業務内容”, “備考”, “所在”, “受注日”, “状態”, “完了日”],
contextMenu: {
callback: function(key, cell, e) {
console.log(cell.start.row, cell.start.col);
console.log(event.records[cell.start.row].$id.value);
},
items: {
‘RecordShow’: {name: ‘詳細画面’},
}
},
// dataオプションのどの列を表示するか指定する。
columns: [
{data: “レコード番号.value”, editor: false},
{data: “KOUJINO.value”, editor: false},
{data: “KOUJIKENMEI.value”, editor: false},
{data: “業務内容.value”, editor: false},
{data: “備考.value”, editor: false},
{data: “Address.value”, editor: false},
{data: “受注日.value”, editor: false},
{data: “処理状態.value”, editor: false},
{data: “完了日付.value”, editor: false}
],
fillHandle: false,
columnSorting: true,
sortIndicator: true,
stretchH: ‘all’,
manualColumnResize: true,
});
ボタン押下時の処理
myIndexButton.onclick = function() {
window.confirm(event.records[2].$id.value);
};
});
})();
Kintone初心者研修中 さん
ソースをご提示いただきありがとうございます。
そもそも私が最初に回答した内容がやや的外れだったようですね。
見た目はおいておいて、以下のように「各行にボタンが表示される」ようにされたいのだと認識しておりました。
(function () {
"use strict";
kintone.events.on(['app.record.index.show'], function (event) {
// ビューIDを指定する（指定したビューID以外は処理しない）
if (event.viewId !== 5118472) return; //カスタムビュー番号
varrecords = event.records;
// カスタマイズビュー設定時に登録したHTMLの要素を指定します。
varcontainer = document.getElementById('sheet');
container.innerHTML=''; //HTML要素のクリア
// 一覧表示時に編集用ボタンを配置
// if (document.getElementById('my_index_button') == null) {
// var myIndexButton = document.createElement('button');
// myIndexButton.id = 'my_index_button';
// myIndexButton.innerHTML = '詳細画面';
// kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
// }
//record オブジェクトにあらかじめリンク用HTMLテキストを保持させておく
for(var i =0; i<records.length; i++) {
varrecord = records[i];
record["リンク用HTML"] = '<button><a href="/k/' + kintone.app.getId() + '/show#record='+record.$id.value+'">詳細画面</a></button>';
}
// Handsontableをインスタンス化
var hot = newHandsontable(container, {
// kintoneのレコードデータを指定
data: records,
minSpareRows: 0,
maxRows: 5,
// カラムのヘッダーを指定
colHeaders: ["詳細画面","番号", "工事番号", "工事件名", "業務内容", "備考", "所在", "受注日", "状態", "完了日"],
contextMenu: {
callback: function (key, cell, e) {
console.log(cell.start.row, cell.start.col);
console.log(event.records[cell.start.row].$id.value);
},
items: {
'RecordShow': { name:'詳細画面' },
}
},
// dataオプションのどの列を表示するか指定する。
columns: [
{ data: "リンク用HTML", editor: false , renderer: "html"},
{ data: "レコード番号.value", editor: false },
{ data: "KOUJINO.value", editor: false },
{ data: "KOUJIKENMEI.value", editor: false },
{ data: "業務内容.value", editor: false },
{ data: "備考.value", editor: false },
{ data: "Address.value", editor: false },
{ data: "受注日.value", editor: false },
{ data: "処理状態.value", editor: false },
{ data: "完了日付.value", editor: false }
],
fillHandle: false,
columnSorting: true,
sortIndicator: true,
stretchH: 'all',
manualColumnResize: true,
});
//ボタン押下時の処理
// myIndexButton.onclick = function () {
// window.confirm(event.records[2].$id.value);
// };
});
})();
「ヘッダーにボタンを表示し、現在選択中の行の値に基づいて処理」となると、一気にハードルが上がるように思われます。
こちらに Handsontable のクラスメソッドがまとめてあるようですので、
ボタンを押下した際に get 系のメソッドを組み合わせてレコード番号を取得するしかないのではないかと思います…。
回答ありがとうございました。
やりたいことが実現しました。詳細な回答ありがとうございます。