印刷画面をメイクアップ - kintone 単体で綺麗に印刷 -利用でのカスタマイズ

実現したいこと

①ルックアップフィールドの文字とアンダーラインの色を黒にしたい。

②合計金額のアンダーラインがぶつ切れになるのを改善したい。

 

エラー情報

エラーはありませんが、状況は以下の通りです。

利用したソースコード

(function() {
‘use strict’;

// 印刷画面が表示されたときに動作
kintone.events.on(‘app.record.print.show’, function(event) {
// 画面下部の「見積日(加工用)」、「見積有効期限(加工用)」、「メモ」を非表示
kintone.app.record.setFieldShown(‘purchase_price’, false);
kintone.app.record.setFieldShown(‘purchase_total’, false);
kintone.app.record.setFieldShown(‘profit’, false);
kintone.app.record.setFieldShown(‘profit_margin’, false);
kintone.app.record.setFieldShown(‘memo’, false);
kintone.app.record.setFieldShown(‘memo_2’, false);
kintone.app.record.setFieldShown(‘memo_3’, false);

// 下記フィールドの枠線を非表示、背景色をkintone全体の背景色と同じに設定
// 「会社名」、「見積番号」、「見積日」、「印影」、「見積有効期限」、「小計」、「消費税」、「合計金額」
//‘expiration’,‘Estimates_total’, ‘Property_name’
var fields = [‘quotation_number’, ‘pretty_quotation_date’, ‘company_name’, ‘title’, ‘Greeting’, ‘company_information’, ‘person’, ‘Tax_classification’, ‘sub_total’, ‘tax’, ‘grand_total’, ‘expiration’, ‘Estimates_total’, ‘Property_name’, ‘total_charge’];

for (var i = 0; i < fields.length; i++) {
var field = fields[i];
var element = kintone.app.record.getFieldElement(field);
element.style.backgroundColor = ‘#f5f5f5’;
element.style.borderWidth = ‘0px’;
}
});

})();

(function() {
‘use strict’;
var events = [“app.record.detail.show”, “app.record.print.show”];

kintone.events.on(events, function(e) {

//下記のフィールドにアンダーラインを設定
var uVal = kintone.app.record.getFieldElement(“company_name”);
uVal.style.textDecoration = “underline”;
var uVal = kintone.app.record.getFieldElement(“Property_name”);
uVal.style.textDecoration = “underline”;
var uVal = kintone.app.record.getFieldElement(“Estimates_total”);
uVal.style.textDecoration = “underline”;
var uVal = kintone.app.record.getFieldElement(“expiration”);
uVal.style.textDecoration = “underline”;

});

 

})();

(function() {
‘use strict’;
var events = [“app.record.detail.show”, “app.record.print.show”];

kintone.events.on(events, function(e) {

//下記のフィールドの色を変更
kintone.app.record.getFieldElement(“company_name”).style.fontColer = ‘black’;

});

 

})();

3つのファイルを読み込みました。

 

 

試したこと

 styleプロパティがどんなものがあるかを、検索してみました。

再現条件

  • 画面・イベント:上記のとおり
  • カスタマイズに関連するフィールド(フィールド種類/フィールド名/フィールドコード):①ルックアップフィールド/得意先/company_name②計算フィールド/合計Estimates_total)
  • 権限設定:アプリ管理者
  • デバイス(PC or モバイル):PC
  • OS・ブラウザ:windwos10・Chrome
  • IP制限などネットワークに特殊なことがあれば:よくわからない

 JavaScriptなど、全く無知です。印刷画面をメイクアップ - kintone 単体で綺麗に印刷 のコードを参考にカスタマイズをしました。どうかよろしくお願い致します。

①ルックアップフィールドの文字とアンダーラインの色を黒にしたい。

anchorタグが下にはいっているので、下記のようにアクセスして色をかえてみてください。

element.children[0].style.color = ‘black’; // elementはルックアップフィールドの要素としてください

 

②合計金額のアンダーラインがぶつ切れになるのを改善したい。

下線の調整については、paddingをもうけてはどうでしょうか?

参考:http://www.koikikukan.com/archives/2012/03/13-025555.php

 

 

村濱様

ご回答大変ありがたく、感謝しております。

①ルックアップフィールドの文字とアンダーラインの色を黒にしたい。
element.children[0].style.color = ‘black’;

について、どこにどのように記述すれば良いのかすらわからず、記述方法を検索したりしましたが、理解できず、試しに

element.style.borderWidth = ‘0px’;の後ろにつけて実行しましたが、element.children[0].style.color = ‘black’;のなかのchildren[0]が何の意味か分からず、そこを書かずにelement.style.color = ‘black’;実行したところ、何の変化もなかったです。

②合計金額のアンダーラインがぶつ切れになるのを改善したい。

について、PaddingはCSSでいれるという事でしょうか?

コピペして、なんとなくここを変えれば何とかなるかな。。。ってやってたので、勉強を始めないことには、回答の意味すら分からないという、残念な状態です。

勉強を始めていきたいと思います。

 

> 書かずにelement.style.color = ‘black’;実行したところ、何の変化もなかったです。

element.children[0].style.color = ‘black’;
ひとまず上記記述通りにやれば大丈夫かとおもいます。
※elementはgetFieldElementで取得したルックアップフィールドとします

ルックアップフィールドの中にリンクタグがあり、ソレのスタイルをあてる、という意味でchildren(子要素の)0としています。

 

> PaddingはCSSでいれるという事でしょうか?

いえ、同じようにstyle.colorのようにJSでスタイルを当てて問題ないです。
style.paddingBottomなどおためしください

http://alphasis.info/2013/10/javascript-dom-styleobject-paddingbottom/

村濱様

書き方と場所ですが、

(function() {
‘use strict’;

// 印刷画面が表示されたときに動作
kintone.events.on(‘app.record.print.show’, function(event) {

中略

for (var i = 0; i < fields.length; i++) {
var field = fields[i];
var element = kintone.app.record.getFieldElement(field);
element.style.backgroundColor = ‘#f5f5f5’;
element.style.borderWidth = ‘0px’;
element.children[0].style.color = ‘black’; ←ここ
element.style.paddingBottom = ‘12px’; ←ここ

}
});

})();

で合ってますか?

試してみましたが、変化がないので場所とか書き方合ってますでしょうか?

訂正です。

色の方は時間差で、実現できました。

paddingbottomは効かないです。
lineheightも試しましたが、ダメでした。

あー失礼しました、下線はunderlineで表現されてるからですね。

線を付ける方法がunderlineとborderがあり、borderのほうが余白つけたいなどの融通をきかせやすいので以下のようにしてはどうでしょう

 

http://www.koikikukan.com/archives/2012/03/13-025555.php

 

具体的には下記で指定したほうがいいかとおもいます。

var uVal = kintone.app.record.getFieldElement("Estimates_total");
// uVal.style.textDecoration = "underline"; // underlineはやめる

// 下記のようにborderをつける
uVal.style.borderBottom = '1px solid black';
uVal.style.paddingBottom = '12px'; // ←すきに調整してください

 

村濱様

お陰様で、全て解決できました。
意味はまだ分かりませんが、文字を中央に寄せたり他のこともすることが出来ました。

とても嬉しいです。

本当にありがとうございました。

外から失礼いたします。

印刷画面をメイクアップ - kintone 単体で綺麗に印刷 -利用でのカスタマイズを基に見積書を作成しております。

こちらのやりとりを参考にさせていただき、当方もルックアップ部分の文字色を黒くすることができました。大変助かりました。ありがとうございました。

お伺いしたいのですが、テーブル内でも商品リストアプリから型番でルックアップをして詳細表示させているのですが、テーブル内のルックアップでも文字色を変更することは可能なのでしょうか。

みなさまのコードから自分に合うものを見つけそのまま使わせていただいている程度の初心者で大変心苦しいのですが、方法がございましたらご教示いただけますと幸いです。

どうぞよろしくお願いいたします。