LoginSignup
2
3

More than 5 years have passed since last update.

kintoneでレコード詳細閲覧画面のヘッダ部分に印刷ボタンを追加するには

Last updated at Posted at 2019-02-08

kintoneの印刷は標準だと2アクションしなければいけないため、頻繁に印刷する場合は1アクションにするのがベターです。
そのためにヘッダ領域にボタン(kintone UI componentのButtonを使ってみました) を追加して、それをクリックすると印刷画面が表示されるサンプルソースコードを紹介します。

 kintone UI component の Button: https://kintone.github.io/kintone-ui-component/Reference/Button/
 ※ 下のコードを動かすには、別途 kintone UI component用のJavascriptファイルとcssファイルをアップロード+jQueryを追加する必要があります。

 //レコード詳細表示イベント
 kintone.events.on(["app.record.detail.show","mobile.app.record.detail.show"],function(e){
      // ヘッダ領域に印刷ボタンを追加
      let btnPrint = new kintoneUIComponent.Button({ text: '印刷/PDF保存' }); 
      $('.gaia-argoui-app-toolbar-statusmenu').append(btnPrint.render()); //renderメソッドを使わないとdom要素にならないので注意!

      // 印刷画面を表示
      btnPrint.on('click',function(e){
          // 閲覧時のURLの例:https://サブドメイン名.cybozu.com/k/18/show#record=4&l.view=5520052&l.q&l.sort_0=f5520035&l.order_0=DESC&l.next=3&l.prev=5
          // 印刷用URLの例 :https://サブドメイン名.cybozu.com/k/18/print?record=4
          let 印刷用URL = location.href.replace('/show#','/print?');
          window.open(印刷用URL);
      });
 });

印刷用画面がURLだけで開けることを知りませんでした。
@sy250f さん、ありがとうございます。

参考にしたサイト
- kintoneの詳細画面にkintoneライクなUIを使った印刷ボタンを置いてみた https://qiita.com/sy250f/items/f8f54ae1443ddbbe22e4

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3