新規投稿
フォローする

kintone UI Component のTable にボタンを配置したい

kintone UI Componentを利用して詳細画面に表形式で入力、表示の実装を行いたいと思っています。その際、各行にボタンを配置し、押下されたら別の入力ダイアログを表示したいです。

https://kintone.github.io/kintone-ui-component/latest/Reference/Table/

上記画面を参考にしていますが、Tableの列に配置できるボタンはIconButtonのみのようですので、iconButtonの属性を

       iconBtn: {
          type: 'right',
          color: 'blue',
          shape: 'normal'
        },
 
上記のように設定し、本来の+-ボタンはそのままに、区別して実装することは可能でしょうか。
もしくはより効率的な実装方法がございましたら、教えていただきたくお願い致します。

また、サンプルプログラムにはiconBtn押下時にアラートメッセージが出力されるコードになっています。しかし、そのままオールコピペして一覧画面に表示し、iconBtnをクリックしてもアラート出力されないのですが、なぜでしょうか。
header: 'Icon Button', cell: function() { return kintoneUIComponent.createTableCell('icon', 'iconBtn', {onClick:function(event){ alert('icon button clicked') }}) } },
0

6件のコメント

Avatar
PV

githubのソースの履歴を見る限り、

v0.3.0 → v0.3.1になった際に、onClickが効かなくなったみたいですね。

v0.3.0で試してみてはいかがでしょうか?

https://github.com/kintone/kintone-ui-component/releases/tag/v0.3.0

 

v0.3.0に別の問題があるか無いかは検証が必要かもしれませんが・・・。

1
Avatar
青葉

試してみたところ、V0.3.1はonClick有効、V0.3.2はNG、一応V0.3.3も試しましたがNGでした。

安定したバージョンを利用したいと思っていますので、kintone UI Componentの紹介ページにて
質問を投げさせていただきました。

教えていただき、大変助かりました。ありがとうございました。

0
Avatar
PV

私も安定したバージョンが知りたいので、

お手数でなければ、結果どのバージョンをご使用されたか、

こちらに共有いただけますと助かります。

0
Avatar
青葉

PVさま

kintone UI componentの紹介ページの方で回答がきました。
https://developer.cybozu.io/hc/ja/articles/360000511023/comments/360004616252

今後に期待・・・ということですので、結局最新バージョンを使うことにしました。
tableでのonClickを諦めて、table.onのcellChangeイベントを利用して、アイコンの代わりに
チェックボックスを配置し、処理を実装することにしました。
どのオブジェクトでChangeイベントが起きたのかなど、判定を追加する必要がありますが。

原因がはっきりしましたので、すっきりしました。
ありがとうございました。


0
Avatar
PV

情報をご共有いただきましてありがとうございます。

ボタンは設置できるけど、ボタンのクリックイベントを登録する手段が存在しないとなると、

あまりテストされてないライブラリなのかと使用するのが少し不安になりますね。

0
Avatar
青葉

PVさま

バグフィックスされたV0.5.0がリリースされたようです。

まだ動作は確認していませんが、お知らせまで。。。

https://github.com/kintone/kintone-ui-component/releases/tag/v0.5.0

青葉により編集されました
0
ログインしてコメントを残してください。