印刷画面をメイクアップ - kintone 単体で綺麗に印刷 -

フォローする

(著者:サイボウズ 竹内 能彦)

 

はじめに

kintone で綺麗に印刷できたらな~と思っていた方に朗報です!
8月のアップデートで印刷画面にもJavaScriptカスタマイズが適用できるようになります。
(詳細はレコード印刷画面表示イベントをご確認ください。)

「印刷したくないフィールドが印刷される・・・」、「フィールドの枠線まで印刷されて綺麗じゃない・・・」といった問題をカスタマイズで解決できるようになります。
今回の記事では上記の問題を解決してみたいと思います。

 

デモ環境

https://dev-demo.cybozu.com/k/259/show#record=1

※デモ環境についての説明、アカウントとパスワードはこちら

 

結果

まずは結果からご覧いただきましょう。

これまで

印影などを添付して表示しても、各フィールドに枠線が表示されて不格好です。
おまけに画面下部には印刷したくないメモ欄が表示されています。

JavaScriptカスタマイズ後(2016年8月の定期メンテナンス以降)

枠線とメモ欄を非表示にし、綺麗に印刷できます。
また、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のコードを見ていただければわかる通り、簡単なカスタマイズなので是非トライしてみてください。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。
Powered by Zendesk