やりたいことは以下の通りです。
kViewerの詳細画面表示時、Kintoneレコードのお申込み内容が ”お申込み前" でないとき、エラーポップを表示し、フォームブリッジ編集ボタンを非表示にしたい。
ユーザーの複数回の回答を防ぎたく、実相を試みております。
以下の設定をしていたのですが、制御後もURL先に飛べ、フォームブリッジ編集ボタンを押すことができるため、トラブルになってしまいました。
浅い知識で下記スクリプトを書いてみたのですが（エラーポップは一旦とばしてます）、フォームブリッジ編集ボタンの要素？がわからず、動きを試すことすらできておりません。
(function(){“use strict”;kv.events.view.created = [function (state){
if(record[‘お申込み内容’].value!==‘お申込み前’){
document.getElementById(‘わからない’).style.visibility = ‘hidden’;
}}];
return state;
})();
ご教授宜しくお願い致します。
@bpj0138 さん
こんにちは、当方kviewerを使用してないですが何点か気になったので回答させていただきますね。
まず、コードに書かれている クオーテーションがコピペした時にエラー吐いたので修正しました。
加えて、document.getElementById()→document.getElementByClassName()に変更してみました。
恐らくHTMLのソースコード見るとクラスで指定されていることの方が多いと思いますので、classで取得できるこちらに変更してみました。
ボタンの要素の取得ですが、指定したいボタンの上で右クリックしてブラウザがクロームなら検証、Edgeならページのソースを表示をクリックすると、class = ’ 'と書かれているのと思うのでそこをコピペして下記のコードの’わからない’を置き換えてみてください！
以上簡単ですが回答させていただきました。
(function () {
'use strict';
kv.events.view.created = [function (state) {
if (record['お申込み内容'].value !== 'お申込み前') {
document.getElementByClassName('わからない').style.display = 'none';
}
return state;
}];
})();
ご回答ありがとうございます。
こちらのハイライトの部分でしょうか。
一旦if抜きで試してみたのですが動かず、おかしな点あればご指摘いただければと思います。
(function () {
‘use strict’;
kv.events.view.detail.mounted = [function (state) {
{
document.getElementByClassName(‘ui icon button kv-fb-content _normal red large’).style.display = ‘none’;
}
return state;
}];
})();
イベントはこれ以外にも試しましたが同じく動いておりません
@bpj0138 さん
当方フォームブリッジを使用しているわけでもなく、動作環境がないのでなんともいえませんが、
ブラウザのデバックツールでどのようなエラーがでてますか？
エラーがでていない等であれば実際のコードをブレークポイントで止めながら確認してするしかないと思います。
参考リンク：https://cybozudev.zendesk.com/hc/ja/articles/4977994758297-kintone-JavaScript-カスタマイズデバッグまとめ?_ga=2.74726161.2095374862.1693179429-923425052.1689224001
こちらいかがでしょうか。編集ボタンの非表示ができなければ再びトラブルが起きる可能性がありますので、なんとか解決したいのですが
@bpj0138 さん
こんにちは、そちらのエラーだけではどうなっているのか把握できません。
前回私が参考リンクとしてお伝えしました、デバッグの仕方を運営さんがまとめてくださってる記事を確認されましたでしょうか？
そちらを見ればどこで、なんでうまく動作しないのかなどご自身で把握できるはずかと思われます。
もう少しだけ動き確認してみて、また不明でしたらどこまで検証して、どこまで確認したなどの情報を書いてくださるとヒントになる事もお伝えできるかなと思われます。
ヘルプサイトと違う設定になっていませんか？
ヘルプサイトの内容が正しく設定されているのに、回答後にフォームが表示されるとしたらコミュニティで相談する案件ではなく、製品の不具合だと思います。
(たとえば、絞り込みの設定が無視されて非表示になるべきデータが表示されてしまっている)
前提
フォームは、お申し込み内容のフィールドが「お申し込み前」の状態の人だけに見せたい。
トヨクモに問合せしたところ、"Myページビューで表示すべきkintoneフィールドの値が閲覧できない"と言うことを指しております。との回答いただきました。
内容が通じているかわからない部分あるまま問合せをあきらめてしまいましたが、Myページビュー自体はなくなるが、kViewerレコード詳細画面のKintoneから引っ張ってきているフィールド以外は表示されるという風に解釈しています。（間違えているかもしれません）
URL先はなくなっているが（そのURLのMyページ自体はなくなっているが）、真っ白の画面にエラーポップが出たり、完全なエラー画面になるわけではなく、kViewerのレコード詳細画面は表示されてしまう状態（フォームブリッジ編集ボタンやラベルや罫線などの静的フィールドは表示される状態）で、その画面の右上にエラーポップが出るだけの状態ですので、フォームブリッジ編集ボタンを押して再編集できたと勘違いしてしまうユーザーがいるといった感じでした。
トラブルというのは、アンケート回答者が混乱した（勘違いした）という話だったということで理解しました。
てっきり、重複回答できないはずのフォームからレコードを再編集できてしまって業務に混乱が生じたということかと思っていました。
仕様上どうしようもなさそうなので、静的なフィールドで、回答済みの場合は、○○という状態になりますと書いておくぐらいでしょうか？
存在しないページでも、Javascriptで制御できるのでしょうか？
存在しないページで制御できるかどうかわかりませんでしたので、ページの存在は消さなくても、
URL先に飛んだ時に、ステータスが”お申込み前”でないなら、フォームブリッジ編集ボタンを非表示にし、エラーポップを表示するといった制御ができないかどうかというのがこちらのトピックの初めの質問です。
懸念したのは、
すでに回答済みでkViewerがkintoneのレコードが取得できない場合、
kViewerの仕様で
JavaScriptのカスタマイズのファイルもブラウザ側に
配信されないのではないか？ということでした。
ブラウザ側に配信には配信されていました。
しかし、kViewerのJavaScriptカスタマイズ方法にある一般的なイベントは発生しないようで、
kv.events.record.errorというイベントを使いました。
（レコードにアクセスできないのでステータスが”お申込み前”かどうもわからない。URLが間違っている場合も、二度目の回答の場合もボタンを非表示にします。）
クラス名は質問者さん側のclass名と合わせてください。
(function () {
"use strict";
kv.events.record.error = [function (state) {
const displayFormButton = document.getElementsByClassName('ui icon button kv-fb-content circular teal large');
if (displayFormButton.length > 0) {
for (const button of displayFormButton) {
button.style.display = 'none';
}
}
return state;
}];
})();
kViewerのJavaScriptカスタマイズで驚いたのが、
存在しない変数・オブジェクトを呼び出してもエラーにならないのですね。
console.logには、 testの文字がでるが
nonExistVAR は無視される
(function () {
"use strict";
kv.events.record.mounted = [
function (state) {
console.log("test")
console.log(nonExistVAR)
return state;
}
];
})();
ボタンを隠すのもよいですが、class名を見ているので
うっかりボタンのデザインを変えるとボタンを隠すのに失敗します。
回答済で表示するkintoneレコードがなければ、
どこか説明するページに移動させる手もあるかも知れません。
(() => {
'use strict';
kv.events.record.error = [(state) => {
window.location.href = "https://www.example.com";
return state;
}];
})();
色々とありがとうございます。
とても参考になり、助かります。
説明ページですが、画像部分の文言とURLをhttps://www.example.com/ → https://www.error.com/ などに変更しようと思ったらどのようにすればよろしいでしょうか。
error[.]com
というサイトが存在するのですね。
(() => {
'use strict';
kv.events.record.error = [(state) => {
window.location.href = "https://www.error.com"; // 変更したいURLをここに指定
return state;
}];
})();
このように、window.location.href の値を変更することで、リダイレクト先のURLを指定できます。新しいURLを "https://www.error.com" などに置き換えて、コードを更新してください。
ChatGPT 3.5の回答です。
URLは単純にexampleじゃ格好悪いので、任意の名称に変更したいとの意味合いです。ややこしくて申し訳ございません。
また、画像の文言の変更（HTMLの書き換え）はどのようにすれば可能でしょうか。
ちなみにChatGPTにはなんて質問していますか？
もしかして任意のサイトの記載内容(HTML)を任意に変更できるとお考えなのですか？
どのような理解をした上での質問でしょうか？
どこか説明するページに移動させる
という例として
例示専用サイト
https://www.example.com
を書きました。
質問者さん側で任意の説明ページをインターネット上に用意して、移動させるようにしてください。
kv.events.record.errorには、 追加引数で、errorを受け取れるようです。
もし、厳密に回答済とURLがおかしい場合を分けるには、
現在のエラーメッセージを利用して振り分け可能のようでした。
(() => {
'use strict';
kv.events.record.error = [(state, error) => {
console.log(error.error.message)
if (error.error.message === "Request failed with status code 400") {
console.log("URLが途中で切れている可能性があります")
} else if (error.error.message === "Request failed with status code 404") {
console.log("レコードが見つからないとき")
}
return state;
}];
})();
説明サイトに移動する案とても良いのですが、任意の説明ページをインターネット上に用意する方法のハードルが高く、どのように検索すればよいかもわかりませんでした。ご教授いただけないでしょうか。
また、移動時に一瞬だけMyページビューが移るのですが、移動までのレスポンスを上げる方法ありますでしょうか。