お世話になっております。
こちらの記事を参考に setFieldShown を用いてテーブルを表示させようとしていたのですが、一覧画面には対応していないとの事で代わりのコードを探しているのですが見つからずに作業が止まってしまっています。
（実現したいこと）
setFieldShownのかわりのコードを使って一覧画面にてテーブルをデフォルトで全て表示されている状態にしたい
（使用コード）
(function() {
'use strict';
var events = [
'app.record.index.show',]; //一覧画面が表示されたとき（タイミング）
kintone.events.on('app.record.index.show', function(event) {
kintone.app.record.setFieldShown('table', true); //テーブルを表示する（動作）
return event;
});
})();
初心者の為、コードにおかしな点等あるとは思いますが、どのような別コード使用すればよいのかご教授頂ければ幸いです。
neneko 様
こんにちは。
一覧画面においての setFieldShown の代わりになるような API は用意されていませんので、実装されたいという場合でしたら、JavaScript で、直接一覧画面をDOM操作する必要があります。
第7回 カスタマイズビューを利用してみよう – cybozu developer network
この辺りからやっていき、DOM操作に慣れると良いかと思います。
新屋 育男様
お世話になっております。
APIが用意されていないのですね…
記載して頂いたページを利用してDOM操作に慣れるとともに知識を付けようと思います。
数々のご教示ありがとうございます。
新屋 育男様
こんにちは。
記載して頂いたページを参考にテーブルを作成しているのですが画像のような形にすることは可能なのでしょうか。
お手数をお掛けいたしますがご教授して頂けますと幸いです。
nekoko 様
こんにちは。
ご案内をしたページでは、そのようなテーブルは作成できないかと思います。
結局は、DOM操作して（手を動かして）とりあえず考え方を学ぶ的な部分が主です。
ただ技術的には、画像のような形にすることは可能でございます。
必要な知識は、
・HTML
・CSS
・JavaScript
HTML、CSS は画像の形に作成するには、どのように記述すれば良いかという知識
JavaScript は、そのテーブルを記述する形を作るために、どのようにDOM操作して複製していけば良いかという知識
その他、JavaScript, kintone JavaScript API の基礎的な知識と、内容によってはもしかしたら kintone REST API の知識も必要となるかもしれません。
簡潔にお伝えすると、そこそこに勉強はする必要があります。
特にDOM操作については、kintoneのアップデート等でプログラムが使えなくなるなど、その他色々と問題がありますのでコミュニティではお答えする人も少ない内容かと思います。
独自に一覧表を作成されたいようですと費用対効果ですがエンジニアに依頼をするか、作りたい表に近いプラグイン等を利用するとかの方が早いかもしれません。
とりあえずご自身で実装を目標にするのであれば、画像の様な形にする為には HTMLでどのように記述するのか？
から初めて見るのが一番の近道かと思います。
新屋 育男様
こんにちは。お世話になっております。
返信遅くなってしまい申し訳ございません。
技術的には可能なのですね。
費用は押さえたいので、チュートリアルだったり参考書等を活用してJavaScript, kintone JavaScript API の基礎的な知識を付けるところから始めようと思います。
＞とりあえずご自身で実装を目標にするのであれば、画像の様な形にする為には HTMLでどのように記述するのか？から初めて見るのが一番の近道かと思います。
勉強と並行してこちらの方に挑戦してみます。
新屋 育男様
こんにちは。お世話になっております。
HTMLを用いて理想としていた形のテーブルを作成することが出来ました。
この後の流れとしましてはJavaScript等を用いてレコードの取得でよろしいのでしょうか。
nekoko 様
こんにちは。
素晴らしいですね。
はい、この後の流れはJavaScriptでそのHTMLを複製しながらレコードの情報を取得して、値を代入していけば良いと思います。
複製には、cloneNode を使えばいいかと思います。
Node.cloneNode() - Web API | MDN (mozilla.org)
この辺りですね。
使い方がちょっとわかりにくいので、コードのサンプルを置いておきますが消すかもしれませんのでお気をつけ下さい。
このサンプルのHTMLやCSSの構成などは、nekoko様の作成されたものとは違うと思います。
kintone で扱うには、どのようにするか考えながらやってみると良いと思います。
では、頑張って下さい。
新屋 育男様
こんにちは。ご返信遅くなり申し訳ございません。
ありがとうございます。
＞
JavaScriptでそのHTMLを複製しながらレコードの情報を取得して、値を代入していけば良いと思います。
複製には、cloneNode を使えばいいかと思います。
貼っていただいたリンク等を参考に上記のことに取り掛かろうと思います。
今までとはまた違うことを行うので時間かかるとは思いますが頑張りたいと思います。
新屋 育男様
こんにちは、お世話になっております。
コードについて質問なのですが、１３行目
let baseClone = table.cloneNode(true);
にて
Uncaught TypeError: Cannot read properties of null (reading 'cloneNode')
というエラーが出ており何を示しているのかは分かるのですが調べて出てきた方法を用いても修正することが出来ずに作業が止まってしまっています。
ご教授頂けないでしょうか。
nekoko 様
こんにちは。
その内容だけで判断すると、HTMLcollection（要素）が正しく取得できていないと思われます。
ですので、その前にある
let table = document.querySelector
この辺りが怪しいですね。
考えられる原因としては、
・html が kintone に正しく記述されていない。
・querySelector で要素を取得するために指定している値が正しくない。
上記のことが考えられると思います。
また、table の値が正しく取得できているか、console.log で table の値を確認すると良いと思います。
新屋 育男様
こんにちは。
＞
・html が kintone に正しく記述されていない。
・querySelector で要素を取得するために指定している値が正しくない。
この二つと、tableの値を確認し、もう一度頭から見直してみようと思います。
ありがとうございます。
新屋 育男様
こんにちは。
コードを確認したところ新屋育男様のご指摘通り
lettable =document.querySelector
で要素を正しく取得できていませんでした。
引き続き修正をしていきたいと思います。