カテゴリー内の他の記事

印刷画面をメイクアップ - 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 コミュニティをご活用ください。

Avatar
yamatami

こちらの記事を参考に、印刷画面をカスタマイズしておりますが、

フォームに配置した入力項目の説明の「ラベル」が印刷画面で非表示にできないことに気づきました。

ラベルのように利用できて、印刷画面で非表示にできるフィールドタイプはどれを選ぶのが良いでしょうか?

また、レコード追加や詳細編集画面でラベルのように見せるための制御をご教示いただければありがたいです。

Avatar
cybozu Development team

yamatamiさん

ご質問いただきありがとうございます。cybozu developer network運営チームです。

書いて頂いた通り、フィールドの表示/非表示の操作は、ラベル/罫線/スペースフィールドには対応しておりません。
ラベル同様のフィールドはないのですが、代用で使えるとしたら「グループ」フィールドでしょうか?

グループフィールドは、通常複数のフィールドをまとめて開閉できるようにする機能を持ったものですが、
使いようによってはグループの中にフィールドを入れずにラベルのように使うことも可能かと思います。
このフィールドであれば表示/非表示の切り替えも可能です。

ご検討ください。

Avatar
yamatami

ご回答ありがとうございます。

「グループ」!なるほど!盲点でした。

大変助かりました。

今後ともよろしくお願いいたします。

 

Avatar
N.Munechika

「カテゴリを有効化」にした場合、印刷画面には選択したカテゴリが出てしまうのですが、これを非表示にすることは可能でしょうか?

(フィールド以外の要素についての質問で恐縮ですが。。。)

 

Avatar
cybozu Development team

N.Munechika さん

ご質問いただきありがとうございます。cybozu developer network運営チームです。

カテゴリーも他のフィールドと同様に、setFieldShownで非表示にすることが可能です。
サンプルコードに下記を追加してお試しください。

kintone.app.record.setFieldShown('カテゴリー', false);

今後ともよろしくお願いいたします。

Avatar
N.Munechika

早速の回答ありがとうございます。

アドバイスいただいた形でカテゴリーも非表示にすることができました!

助かりました。ありがとうございました。

Avatar
kirimin

こちらの記事の方法で、テーブルの一部の列だけを非表示にすることは可能でしょうか?
(記事の例でいうと「単価」の列だけを印刷されないようにするイメージです)

Avatar
cybozu Development team

kirimin様

setFieldShownはテーブル内フィールドに対応しておらず、この方法ではできません。お役に立てず、恐縮です。

レコード印刷画面表示イベント https://developer.cybozu.io/hc/ja/articles/209732286 にその旨の記載がありませんでしたので、記載するようにいたします。

Avatar
kirimin

早々のご回答ありがとうございます。
テーブル内は対応していないんですね…承知しました。
今後ともよろしくお願いいたします。

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