新規投稿
フォローする

一覧画面の明細行にボタンを設置したい(DOM操作で)

お世話になります。

https://developer.cybozu.io/hc/ja/community/posts/115010727206-%E4%B8%80%E8%A6%A7%E7%94%BB%E9%9D%A2%E3%81%AE%E6%98%8E%E7%B4%B0%E8%A1%8C%E3%81%AB%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%A8%AD%E7%BD%AE%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95?input_string=%E4%B8%80%E8%A6%A7%E7%94%BB%E9%9D%A2%E3%81%AE%E6%98%8E%E7%B4%B0%E8%A1%8C%E3%81%AB%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%A8%AD%E7%BD%AE%E3%81%97%E3%81%9F%E3%81%84(DOM%E6%93%8D%E4%BD%9C%E3%81%A7)

こちらの質問と重複して回答をみておりましたが、カスタマイズビューを使わない方法でボタンを設置したいと思います。

一覧画面のヘッダ部分ではなく、明細行の1カラムにボタンを追加して、クリック時の処理を追加したいです。

明細行中に、DOM操作でボタンを追加する方法を探しましたが、みつけることができませんでしたので、教えてください。

 

0

5件のコメント

Avatar
サクラエビ

hiroko5572さん

テーブル内にボタンを作る場合、1カラム目といってもどこに作るのか、どのように作るのかで

作り方が変わると思いますが、基本的にはkintone.app.record.getSpaceElemenなどAPIで取っていた

DOMの要素(クラス名やID)を自身で確認して、直接ボタンの要素を追加する形になると思います。

要素自体は、各ブラウザの機能で確認できます。

なお、ボタンの作り方自体は変わらないので、記載の方法などをそのまま流用で大丈夫です。

 

処理イメージ(追加部分のみ記載しています)

var a = document.getElementsByClassName(クラス名);

a.appendChild(myIndexButton);

 

要素の取得自体は、多々あるのでお好みで取得するのがいいかと思います

https://qiita.com/mizu16/items/76d72bdeca706e04ca43

0
Avatar
hiroko5572

サクラエビさん、ご返信どうもありがとうございました。
ボタンを追加したい画面は、詳細画面ではなく一覧画面です。明細行の中にボタンを追加したいのですが、空のカラムをできるようフォーム側でひとつフィールドを作っておく方がよいでしょうか?
そのフィールドの中にDOM操作でボタンを追加することになると思うのですが、空のカラムをどのようなフィールドタイプで作成するべきかを教えてください。スペースで空のカラムを作成した場合は、一覧に表示されません。
ヒントがあればよろしくお願いいたします。

0
Avatar
hiroko5572

追記です。空のカラムはテキストフィールドでもなんでもよく、このフィールドを一覧表示させて、DOMで書き換えるというイメージでしょうか?

0
Avatar
サクラエビ

hiroko5572さん

作る場所の認識がずれていましたね。失礼しました。

ただ作り方自体は買わず、どこか任意の要素にボタンを追加する形になるので、記載した処理で

作成が可能と思います。

必ずしもフィールドを配置する必要はないとは思いますが、私は検証しやすいように、フィールドを配置して

そのフィールド内にボタンをつくりました。

無駄なフィールドができてしまうことを嫌う人もいるので、どちらがいいかは、好みなのかなというところです。

 ※フィールドを配置すると、不要なものを消した後、インデントの調整などをしなくてよかったので、

 私はフィールドを配置したというのものあります。

このフィールド自体も、なんでもいいと思いますが、でかいと邪魔なので、文字列1行で作成しました。

0
Avatar
hiroko5572

方向性がわかりましたので、作ってみます!
ありがとうございました。

0
サインインしてコメントを残してください。