はじめに
kintoneできれいに印刷できたらな~と思っている方へ、JavaScriptで印刷画面をカスタマイズできます!
参考:
レコード印刷画面を表示した後のイベント
「印刷したくないフィールドが印刷される」、「フィールドの枠線まで印刷されてきれいじゃない」といった問題をカスタマイズで解決できます。
今回の記事では上記の問題を解決してみたいと思います。
デモ環境
デモ環境で実際に動作を確認できます。
デモ環境:
https://dev-demo.cybozu.com/k/259/show#record=1
ログイン情報は cybozu developer networkデモ環境 で確認してください。
完成イメージ
まずは結果からご覧いただきましょう。
カスタマイズを適用しない場合
印影などを添付して表示しても、各フィールドに枠線が表示されて不格好です。
おまけに画面下部には印刷したくないメモ欄が表示されています。
カスタマイズを適用した場合
枠線とメモ欄を非表示にし、きれいに印刷できます。
また、8月版で追加されたDATE_FORMAT関数を使って、「見積日」、「見積有効期限」を「年月日」形式で表示しています。
アプリの準備
フォームの配置
スペースフィールドやラベルフィールドを活用することで、以下のフォーム配置になっています。
フィールドの設定(今回のカスタマイズで必要なフィールドのみを抜粋)
フィールド名 | フィールドタイプ | フィールドコード | 備考 |
---|---|---|---|
見積日(加工用) | 日付 | quotation_date | |
見積有効期限(加工用) | 日付 | expiration_date | |
メモ | 文字列(複数行) | memo | |
会社名 | 文字列(1行) | company_name | 見た目をよくするためにフィールド名は非表示 |
見積番号 | 文字列(1行) | quotation_no | 見た目をよくするためにフィールド名は非表示 |
見積日 | 文字列(1行) | pretty_quotation_date | 見た目をよくするためにフィールド名は非表示 見積日(加工用)を使って整形 計算式: DATE_FORMAT(quotation_date, "YYYY年M月d日", "Asia/Tokyo") |
印影 | 添付ファイル | seal | 見た目をよくするためにフィールド名は非表示 |
見積有効期限 | 文字列(1行) | pretty_expiration_date | 見た目をよくするためにフィールド名は非表示 見積有効期限(加工用)を使って整形 計算式: DATE_FORMAT(expiration_date, "YYYY年M月d日", "Asia/Tokyo") |
小計 | 文字列(1行) | sub_total | 見た目をよくするためにフィールド名は非表示 |
消費税 | 文字列(1行) | tax | 見た目をよくするためにフィールド名は非表示 |
合計 | 文字列(1行) | grand_total | 見た目をよくするためにフィールド名は非表示 |
JS / CSS設定
「アプリの設定 > JavaScript / CSSでカスタマイズ」に以下のサンプルコードを設定します。
サンプルコードはエディタにコピーして、ファイル名を「sample.js」、文字コードを「UTF-8N」で保存します。
ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
|
|
おわりに
kintone単体できれいに印刷する方法を紹介させていただきました。
複数レコードの一括印刷やテーブルのページング対応(1枚目と2枚目以降で画面設計を変える)には帳票サービスとの連携が必要になりますが、簡単な印刷の場合は使えそうですよね。
JavaScriptのコードを見ていただければわかるとおり、簡単なカスタマイズなのでぜひトライしてみてください。
このTipsは、2022年10月版kintoneで動作を確認しています。