プリントクリエイターの出力イベント時にDBに書き込む方法について

[Legacy_Account1995 (CTK（Legacy Account）)]

いつもお世話になっております。

早速ですが、現在、見積書アプリを作成しております。

そこで以下のような処理を追加したいのですが、なかなか実装出来ず悩んでおります。

何かヒントになるようなアドバイスを頂けないでしょか。

[実装したい事]

プリントクリエイターの[出力]ボタンをクリックすると、

採番アプリのレコード内にある採番用フィールドの値に、 +1 した値をレコードに書き込む。

 

現在のところ、以下のようなコードでボタンのエレメントを取得しようと試みてはいるのですが、未だに取得できません。

window.onload = function (){
“use strict”;

kintone.events.on(‘app.record.detail.show’, function (event) {
var inputs = document.getElementsByTagName(“input”);
for(var i in inputs){
var input = inputs[i];
if(input.type === “submit”){
alert(“これがsubmitボタン”);
console.log(input[i]);
break;
}
console.log(i + inputs[i].type);
}
});

どこに問い合わせても、ご回答頂けず、登録致しました。

何かヒントを頂けると幸いです。

 

以上です、よろしくお願いいたします。

 

[Legacy_Account2115 (瀧ヶ平（Legacy Account）)]

CTKさん
cstapの瀧ヶ平です。

プリントクリエイターの出力ボタンはレコード表示イベント内部で追加されているため、他に登録されているイベントハンドラーの実行タイミングに出力ボタンが存在していない場合があります。
そのため、MutationObserverなどのJavaScript APIを用いてヘッダーメニュースペース要素を監視するなどして、出力ボタンを取得する必要があります。
具体的には

var submit = function(e){
// 処理
};
var form = document.getElementsByClassName("pcreator-container")[0];
if(!form){
(new MutationObserver(function(mutations, observer){
form = document.getElementsByClassName("pcreator-container")[0];
if(form){
button = form.getElementsByTagName("input")[0];
button.addEventListener("click", submit);
observer.disconnect();
}
})).observe(kintone.app.getHeaderMenuSpaceElement(), {childList:true, subtree:true});
} else {
button = form.getElementsByTagName('input')[0];
button.addEventListener("click", submit);
}

のようなコードでプリントクリエイターの出力ボタンのイベントハンドラーに関数を登録できます。

参考になりますでしょうか？

[Legacy_Account1995 (CTK（Legacy Account）)]

cstap 瀧ヶ平様

お忙しいところ、ご回答頂きありがとう御座います。

教えて頂いたサンプルを参考に以下のようなスクリプトをアプリに読み込ませてみましたが、chrome上で以下のようなメッセージが表示されてしまいます。

申し訳御座いませんが、以下のメッセージの対応方法を教えて頂けないでしょうか。

Uncaught NotFoundError: Failed to execute ‘observe’ on ‘MutationObserver’: The provided node was null.

 

以上です、よろしくお願い致します。

 

(function () {
“use strict”;

 

kintone.events.on(‘app.record.create.show’, function (event) {

var submit = function(e){
//window.alert(‘イベントチェック’);
console.log(‘イベントチェック’);
};

var form = document.getElementsByClassName(“pcreator-container”)[0];
if(!form){
(new MutationObserver(function(mutations, observer){
form = document.getElementsByClassName(“pcreator-container”)[0];

if(form){
button = form.getElementsByTagName(“input”)[0];
button.addEventListener(“click”, submit);
observer.disconnect();
}

})).observe(kintone.app.getHeaderMenuSpaceElement(), {childList:true, subtree:true});
} else {
button = form.getElementsByTagName(‘input’)[0];
button.addEventListener(“click”, submit);
}

});

})();

[Legacy_Account2115 (瀧ヶ平（Legacy Account）)]

CTKさん

すいません、kintone.app.getHeaderMenuSpaceElementのところはkintone.app.record.getHeaderMenuSpaceElementメソッドですね。

またレコード追加画面ではプリントクリエイターの出力ボタンは表示されないので、レコード追加画面の表示時イベントではなくレコード詳細画面の表示時イベントで処理を行ってください。(app.record.detail.show)

 

[Legacy_Account1995 (CTK（Legacy Account）)]

cstap 瀧ヶ平様

早速、ご回答頂きありがとう御座います。

ご指摘頂きました箇所を修正してみたのですが、

chrome上で以下のようなメッセージが表示されてしまいます。

Uncaught ReferenceError: button is not defined

再度、申し訳御座いません。対応方法を教えて頂けないでしょうか。

以上です、よろしくお願いいたします。

 

(function () {

“use strict”;

 

 

 

kintone.events.on(‘app.record.detail.show’, function (event) {

 

var submit = function(e){

//window.alert(‘イベントチェック’);

console.log(‘イベントチェック’);

};

 

var form = document.getElementsByClassName(“pcreator-container”)[0];

if(!form){

(new MutationObserver(function(mutations, observer){

form = document.getElementsByClassName(“pcreator-container”)[0];

 

if(form){

button = form.getElementsByTagName(“input”)[0];

button.addEventListener(“click”, submit);

observer.disconnect();

}

 

})).observe(kintone.app.record.getHeaderMenuSpaceElement(), {childList:true, subtree:true});

} else {

button = form.getElementsByTagName(‘input’)[0];

button.addEventListener(“click”, submit);

}

 

});

 

})();

[Legacy_Account2115 (瀧ヶ平（Legacy Account）)]

CTKさん

すいません、私のコードでbutton変数が宣言されていないのが問題のようです。
また、button変数に代入する値がまちがっていました。

修正したコードを載せるので参考にしてください

(function () {
"use strict";
kintone.events.on('app.record.detail.show', function (event) {
var button;
var submit = function(e){
//window.alert('イベントチェック');
console.log('イベントチェック');
};
var form = document.getElementsByClassName("pcreator-container")[0];
if(!form){
(new MutationObserver(function(mutations, observer){
form = document.getElementsByClassName("pcreator-container")[0];
if(form){
button = Array.prototype.slice.call(form.getElementsByTagName("input")).find(function(i){
return i.type === "submit";
});
button.addEventListener("click", submit);
observer.disconnect();
}
})).observe(kintone.app.record.getHeaderMenuSpaceElement(), {childList:true, subtree:true});
} else {
button = Array.prototype.slice.call(form.getElementsByTagName("input")).find(function(i){
return i.type === "submit";
});
button.addEventListener("click", submit);
}
});
})();

[Legacy_Account1995 (CTK（Legacy Account）)]

cstap 瀧ヶ平様

お付き合い頂きありがとう御座います。

イベントを発行する事が出来ました。

ただ、更なる課題が御座いまして、もう少しお付き合い頂けないでしょうか。

[課題]

プリントクリエイターの出力処理より先に、レコードへの書き込み処理を実行するには、どのような方法が御座いますでしょうか。

只今、作成しております見積書アプリのプリントクリエイターの出力ボタンをクリックした時に、

現在開いているレコードのprn_checkフィールドに値を書き込み、そのあとプリントクリエイターの出力（帳票）を実行したいです。

現在のところ、

プリントクリエイターの出力が終わった後、書き込み処理が実装しているようで、悩んでおります。

以上です、よろしくお願い致します。

 

(function () {
"use strict";
kintone.events.on('app.record.detail.show', function (event) {
var button;
var submit = function(e){
//window.alert('イベントチェック');
console.log('イベントチェック');
var appId = event.appId;
var recordId = event.recordId;
var prn_event = "prn";

kintone.api('/k/v1/record', 'PUT', {app: appId, id: recordId, record: {"prn_check": {"value": "test"}}});

};
var form = document.getElementsByClassName("pcreator-container")[0];
if(!form){
(new MutationObserver(function(mutations, observer){
form = document.getElementsByClassName("pcreator-container")[0];
if(form){
button = Array.prototype.slice.call(form.getElementsByTagName("input")).find(function(i){
return i.type === "submit";
});
button.addEventListener("click", submit);
observer.disconnect();
}
})).observe(kintone.app.record.getHeaderMenuSpaceElement(), {childList:true, subtree:true});
} else {
button = Array.prototype.slice.call(form.getElementsByTagName("input")).find(function(i){
return i.type === "submit";
});
button.addEventListener("click", submit);
}
});
})();

 

 

[Legacy_Account2115 (瀧ヶ平（Legacy Account）)]

CTKさん

レコード詳細画面でREST APIによってレコード更新を行っても基本的にkintone.apiメソッドは非同期で通信を行い、通信後ページ内部で取得できるレコード情報は更新されていないため、おっしゃっているようなレコードを更新後に帳票出力というのは、すでに設置されているプリントクリエイターのJavaScriptに加えて新たなJavaScriptで対処するのは不可能になると思われます。

多少難しくはなりますがこちらを利用してご自身でプリントクリエイターの出力ボタンを拡張するというような方法で対応することができます。
また、この対応であれば先ほどのような方法でイベントを追加せずとも直接帳票出力の処理に追記するだけでご希望の機能が実装できるかと思います。

開発のヒントとしましては、src/print-creator/form/single.coffee内のsubmit処理内部で指定しているrecord変数を編集しておき、その中で一緒に更新処理も行うと良いです。

 

また、こちらで対応しないのであれば、出力とは別のボタンで同様の処理を実行してから出力ボタンを押すような運用で対応するのが良いかと思います。

[Legacy_Account1995 (CTK（Legacy Account）)]

cstap 瀧ヶ平様

ご回答頂きありがとう御座います。

>多少難しくはなりますがこちらを利用してご自身でプリントクリエイターの出力ボタンを拡張するというような方法で対応することができます。

良い機会なので、貴社のプログラムで勉強したいと思います。

質問ばかりで申し訳ないのですが、

開発環境の構築方法など、参考になる情報が御座いましたら教えて頂けないでしょうか。

先に進むには、この知識が必須など。参考になる文献が御座いましたら合わせて教えて頂けると幸いです。

以上です、よろしくお願い致します。

 

[Legacy_Account2115 (瀧ヶ平（Legacy Account）)]

CTKさん

開発環境に関してはgit cloneで当該リポジトリをローカルにクローンし、READMEに従ってNode.jsのVersion0.10をインストールすれば問題無いです。

また開発にあたってCoffeeScriptの知識、また前提となるJavaScriptの知識が無いとつまづくかと思います。そこまで複雑なことをしないのであれば数十行程度の処理追加で済むはずなので頑張ってみてください！