こんにちは。
今現在作成しているアプリで、
項目をマウスオーバーないしクリックをする → 自動的にコメントが浮かんでくる。
といったものを作りたいのですがkintoneで作成できるかが不明です。
知っていらっしゃる方どうかご教授お願いできますか
よろしくお願いします。
番匠 祐樹様
お世話になっております。
cstapの江田と申します。
JavaScriptカスタマイズによって実装可能です。
レコード作成および編集画面で、入力フィールドをマウスオーバーした際にコメントを表示する場合を例にサンプルを作りました。
ご参考になりましたら幸いです。
(function() {
'use strict';
function getFieldElementOnInputPage(fieldName){
var result;
[].forEach.call(document.getElementsByClassName('control-gaia'), function(fieldElement){
if(fieldElement.getElementsByClassName('control-label-text-gaia')[0].innerHTML == fieldName){
result = fieldElement;
}
});
return result;
}
kintone.events.on(['app.record.create.show', 'app.record.edit.show'], function(event){
var comments = [ //フィールド名とコメントを指定
{fieldName:'ヨミガナ', content:'カタカナで入力してください'},
{fieldName:'郵便番号', content:'半角数字7桁で入力してください'},
];
var commentBox = document.createElement('div');
commentBox.style.position = 'fixed';
commentBox.style.display = 'none';
document.body.appendChild(commentBox);
document.addEventListener('mousemove', function(e){
commentBox.style.top = (e.clientY + 20) + 'px';
commentBox.style.left = (e.clientX + 20) + 'px';
});
comments.forEach(function(comment){
getFieldElementOnInputPage(comment.fieldName).addEventListener('mouseover', function(){
commentBox.innerHTML = comment.content;
commentBox.style.display = 'block';
});
getFieldElementOnInputPage(comment.fieldName).addEventListener('mouseout', function(){
commentBox.style.display = 'none';
});
});
});
})();
cstapの江田さま
ご解答いただき誠にありがとうございます。
ただ大変申しにくいのですが、
Uncaught TypeError: Cannot read property ‘innerHTML’ of undefined
というエラーメッセージがでます。
何か必要なプラグインがありますか？
番匠 祐樹様
お世話になっております。
返信遅くなって申し訳ございません。
プラグイン等は用いておりません。
レコード一覧画面に利用しようとしていませんか？
上記はあくまで、レコード作成および編集画面での例です。
一覧画面であれば以下のようなコードになります。
(function(){'use strict';kintone.events.on(['app.record.index.show'],function(event){varcomments=[//フィールドコードとコメントを指定{fieldCode:'ヨミガナ',content:'カタカナで入力してください'},{fieldCode:'郵便番号',content:'半角数字7桁で入力してください'},];varcommentBox=document.createElement('div');commentBox.style.position='fixed';commentBox.style.display='none';document.body.appendChild(commentBox);document.addEventListener('mousemove',function(e){commentBox.style.top=(e.clientY+20)+'px';commentBox.style.left=(e.clientX+20)+'px';});comments.forEach(function(comment){[].forEach.call(kintone.app.getFieldElements(comment.fieldCode),function(element){element.addEventListener('mouseover',function(){commentBox.innerHTML=comment.content;commentBox.style.display='block';});element.addEventListener('mouseout',function(){commentBox.style.display='none';});});});});})();
cstap 江田様
お返事いただき誠にありがとうございます。
_ レコード一覧画面に利用しようとしていませんか？ _
いえ、入力画面で使用しています。
Google choromeだと TypeError: Cannot read property ‘innerHTML’ of undefined
Firefoxだと
といったエラーメッセーがでます。
わざわざ書いていただいたのに、活かせなくて申し訳ございません。
何とかなりました。
頂いたプログラムをもう一度エラーメッセージを解読したところ。
documentの要素がないことがわかったので
console.log( document );
で特に意味なくdomentを使うセンテンスを入れることで
無事が文字が浮かびあがりました。
ありがとうございます。
江田様
いつも大変お世話になっております。
ヘッダーに作成したボタンにカーソルを合わせた際に表示させることは可能でしょうか？
ご教示いただいているeditイベントでの処理ですが
フィールドにて動作ができているのですが、
アプリによってエラーが発生します。
「Uncaught TypeError: Cannot read property ‘innerHTML’ of undefined」
となってしまい取得できないようです。
他のjsやプラグインを無効にしましたが状況変わらずで。。。
console.log(fieldElement.getElementsByClassName('control-label-text-gaia')[0]);
console⇒「undefined」
冒頭の「control-gaia」を「control-label-gaia」に変更したらエラーは出なくなったのですが
フィールドのラベルでcommentが表示されるようになりました。
フィールド自体を選択した際にも同様に表示させたいと思います。
[].forEach.call(document.getElementsByClassName('control-label-gaia'), function(fieldElement){
アドバイスがございましたら
どうぞよろしくお願いいたします。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。