レコード上にある「i」マーク(アプリの説明の表示/非表示切替)

お世話になっております。

画面右上のiマークをクリックした時だけ表示することは可能でしょうか?

ご教授いただければ幸いです。

よろしくお願いいたします。

青山昌司さん

アプリの説明の開閉を行うボタンのことですよね?

JavaScript で操作すれば、可能だとは思います。

ただすみませんが、普段から非表示だと、その機能を知らない人がそもそもそのボタンの位置をクリックしなくなるので、

不便になると思うのですが、よかったら想定の運用をお聞きしてもよろしいですか?

しぶい様

 

昨日に続きありがとうございます。

アプリの説明の開閉ボタンです。

アプリの説明内には普段は利用しないのですが、商品ごとの問い合わせ先を書いています。

アプリの利用者(管理者)が限定的な為実装したいと考えています。

 

 

青山昌司さん

その辺の操作を行うのは、当然DOM操作になります。

DOM操作を行った場合、アップデートで動作しなくなることもあるので、その辺は気を付けてくださいね。

本題ですが、検証した感じ、あの辺のDOM の構造上、相性いいのは、“カーソルが合わさったら出現” がよさそうですね。

JavaScript では、カーソル合わせた時のイベント mouseover

カーソルを離した時のイベント mouseout があります。

それぞれに、表示、非表示の設定をすればできました。

詳細は以下をご覧ください。

表示/非表示の切り替え

mouseover

mouseout

あとは、DOM の構造上アイコンの要素を直接とったら安定しなかったので、

mouseover mouseout のイベントを発生させる要素は、アイコンの親要素がいいです。

みなさま、横から失礼します。

プロジェクト・アスノートの松田と申します。

 

業務上の説明をアプリフォームで見せたい時によくやるのが、

ラベルフィールドを設置して、そこに説明を書くという方法です。

必要に応じて、画像も貼り付けたりできます。

説明が多い場合は、ラベルフィールドをグループに入れて、通常は閉じておき、必要時に開いて読む等。

グループフィールドに対してアクセス権を設定することもできます。

 

ご質問の内容とは直接関係ありませんが、業務の説明を必要に応じて見てもらう、という意味ではこういうのもアリかと思います。

ご参考まで。

 

イメージ:

 

青山昌司さん

自分のは、めちゃくちゃ無理やりな方法なのでぶっちゃけ、Shotaro Matsuda さんのやり方がいいかもしれませんね。

Shotaro Matsuda さん、参考ありがとうございます。

青山昌司さん

ごめんなさい、恐らく自分認識が間違っていました。

自分、アイコン自体を非表示にしたいとおもっておりましたが、恐らく違いますよね?

(function() {
"use strict";

var events = [
'app.record.create.show',
'app.record.edit.show',
'app.record.index.show',
'app.record.detail.show'
];

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

//console.log(document.getElementsByClassName('gaia-argoui-app-info-content')[0]);

document.getElementsByClassName('gaia-argoui-app-info-content')[0].style.display="none";

var elem = document.getElementsByClassName('gaia-argoui-app-info-icon')[0];
elem.addEventListener('click', function(click) {

if(document.getElementsByClassName('gaia-argoui-app-info-content')[0].style.display === "none") {
document.getElementsByClassName('gaia-argoui-app-info-content')[0].style.display="block";
} else {
document.getElementsByClassName('gaia-argoui-app-info-content')[0].style.display="none"
}
}, true);
});
})();

少し急いで作りましたが、このコードなら、画面表示時には必ず閉じています。

しぶい様

ソースまでご提供頂きありがとうございます。

おかげさまで非表示にすることができました。

 

松田様

確かにアプリの説明書きをやめてこれにするのは簡単にできますね。

両方試してみて運用を考えてみようと思います。

 

みなさま、ありがとうございました。

 

青山さん

できれば、カスタマイズは最小限にしておきたいですよね。

ぜひ色々検証してみて下さい。