新デザイン　再利用画面と編集画面のオペレーター混同

kintone カスタマイズ
1

新デザインになってから、右上の操作ボタンが間違いやすくなり
（旧ではプラグインでアイコンの横にボタン説明を付加できた）、
オペレーターが編集作業したつもりで、新しくレコードを追加してしまう事態が多発しております。
アイコンデザインが不評です。

「レコード編集したつもりが、新たに追加される」のは運用上の
重大な問題であるため、オペレーターに操作を間違えないよう、視認性をもっと高めたいです。

以下が可能か自分なりに調べてみましたが、、
・右上の操作ボタンをデザイン変更する
（または説明文をすぐ横に設ける）
・追加画面、編集画面、再利用画面 をそれぞれ開いたときに、
背景色をそれぞれ違うものに変更する
または、大きな文字で（ラベルなどで）「これは編集画面です」
「これはレコード追加画面です」 などを表示／非表示させる。

ＪＳ、ＣＳＳでどうにかできないか、ご教示いただけますでしょうか。

※ＣＳＳで操作ボタンの色を少し変える、とかはできました。

a.gaia-argoui-app-menu-copy {
background-color: #F0F0A8;
}

2

やーさん さん

ちょっと面白そうなので、作ってみました。 こんな感じでいかがですか？

表示テキストやスタイルなどは、調整してください。

DOM 操作になりますので、 kintone の仕様変更で操作しなくなるリスクがあります。

 

 

詳細画面

新規画面

 

jQuery.noConflict();
(function($) {
"use strict";

kintone.events.on(["app.record.detail.show","app.record.index.show"], function(event) {
var descCtls = [
{ bSel: 'a.gaia-argoui-app-menu-add', cls: 'xp-app-menu-add-desc', text: '新規' },
{ bSel: 'a.gaia-argoui-app-menu-edit', cls: 'xp-app-menu-edit-desc', text: '編集' },
{ bSel: 'a.gaia-argoui-app-menu-copy', cls: 'xp-app-menu-copy-desc', text: '複写' },
{ bSel: 'a.gaia-argoui-app-menu-settings', cls: 'xp-app-menu-settings-desc', text: '設定' },
];
descCtls.forEach(function(descCtl) {
if ($(descCtl.bSel).length > 0 && $('.' + descCtl.cls).length === 0) {
$('<span class="' + descCtl.cls + '">' + descCtl.text + '</span>').insertAfter(descCtl.bSel);
}
});
return event;
});

kintone.events.on(["app.record.create.show","app.record.edit.show"], function(event) {
var msgCtls = {
'create': { bSel: 'button.gaia-ui-actionmenu-save', cls: 'xp-app-message-create-desc', text: '新規レコード' },
'copy': { bSel: 'button.gaia-ui-actionmenu-save', cls: 'xp-app-message-copy-desc', text: '複写レコード' },
'edit': { bSel: 'button.gaia-ui-actionmenu-save', cls: 'xp-app-message-edit-desc', text: '編集レコード' },
}
var mode = 'edit';
if (event.type === 'app.record.create.show') {
mode = event.reuse ? 'copy' : 'create';
}
var msgCtl = msgCtls[mode];
if ($(msgCtl.bSel).length > 0 && $('.' + msgCtl.cls).length === 0) {
$('<span class="xp-app-message ' + msgCtl.cls + '">' + msgCtl.text + '</span>').insertAfter(msgCtl.bSel);
}
return event;
});

})(jQuery);

 

.xp-app-message {
margin-left: 30px;
font-size: 28px;
}
.xp-app-message-create-desc {
color: red;
}
.xp-app-message-copy-desc {
color: orange;
}
.xp-app-message-edit-desc {
color: blue;
}

 

3

kintone ちょっと便利なプラグイン に、メニューボタン名表示機能を追加しました。

上記に、メニューボタン名の3ヶ国語対応およびスタイル調整を行っています。

有償プラグインですが、試用版プラグインもありますので、よろしければ、お試しください。

 

4

rex002さん

ありがとうございます！ 望んでいたことが実現できました。

しかもすぐにプラグインも作成されるのも素早くて素晴らしいです。

大変助かりました、重ねてお礼申し上げます。

 

5

rex0220様、やーさん様

rex0220様のアイデアをいただいて、操作ボタンに説明を付ける部分だけ、勝手ながら私なりにいじらせていただきました。

「新規」「編集」という文字の部分をクリックして「あれ？？」と言っている人が少なからずいたので、<a>タグの子ノードに文字を置くようにしています。

私の好みで文字が小さくなったり、多少デザインをいじっていますが、よろしければお試しください。

jQuery.noConflict();
(function($) {
"use strict";

kintone.events.on(["app.record.detail.show","app.record.index.show"], function(event) {
var descCtls = [
{ bSel: 'a.gaia-argoui-app-menu-add', text: '新規' },
{ bSel: 'a.gaia-argoui-app-menu-edit', text: '編集' },
{ bSel: 'a.gaia-argoui-app-menu-copy', text: '複製' },
{ bSel: 'a.gaia-argoui-app-menu-settings', text: '設定' },
];
descCtls.forEach(function(descCtl) {
if ($(descCtl.bSel).length > 0 && $('.' + descCtl.cls).length === 0) {
$(descCtl.bSel).css('background-position','left center');
$(descCtl.bSel).css('width','58pt');
$(descCtl.bSel).css('text-align','left');
$(descCtl.bSel).append('<span style="font-size:small; margin-left:34px">'+descCtl.text+'</span>');
}
});
return event;
});


})(jQuery);
6

いいですね。確かに、文字部分をクリックしたくなりますね。

 

7

rex0220様

早速のレスポンス、ありがとうございます。

あと、.style.display=‘none’ としたときに、文字の部分も一緒に消えてくれるのが意外と便利かも知れない、、、と思っています。