お世話になっております。
掲題の通り、指定のkViewerルックアップを編集不可にしたいです。
現時点で作成している動作としては、以下になります。
①fb.events.fields.XXX.changed を利用して指定のkViewerルックアップに検索ワードを転記
②検索ボタンを押すことで対応したフィールドに情報を反映
検索ワードを転記して検索はできたのですが、
検索ワードの入力欄はロックをかけられていない状態なので消してしまえば別の検索もできるようになっています。
これをどうにかできないでしょうか？
小林花子さん
こんにちは。
CSSまたはJavaScriptで対応できそうな気がします。
CSS（ルックアップフィールドのinput要素に対して）
pointer-events : none;
JavaScript
fb.getElementByCode('ルックアップフィールドコード').getElementsByTagName('input')[0].disabled = true;
koichiさま
ご教示ありがとうございます。
CSSを利用してkViewerルックアップのほかの設定もしているので、
CSSで実装しようと試しているのですが、個別に指定すると実装ができない状態です。
指定の仕方の問題でしょうか？(display: none;は実装できております)
[data-vv-name="XXX"] > form > div > .el-input__inner {
display: none;
pointer-events: none;
}
FormBridgeの仕様のためか、data-vv-nameの属性値では反映できないのかもしれません。
/* 1行目内の1番目のkViewerルックアップ */
.row:nth-child(1) .kviewer-lookup-input:nth-of-type(1) input {
pointer-events: none;
}
kViewerルックアップが複数ある場合は、行番号を指定して適用してみてください。
data-vv-nameではできないのですね、、、
ありがとうございます。確かにご教示いただいたものだと実装できました。
度々申し訳ありませんが、JavaScriptでも試してみているのですがこちらも通らずにいます。
お手数ですが、こちらもご教示いただけませんでしょうか？
よろしくお願いいたします。
(function() {
"use strict";
fb.events.form.mounted = [function(state) {
fb.getElementByCode('XXX').getElementsByTagName('input')[0].disabled = true;
return state;
}];
})();
ご確認いただきありがとうございます。
こちらの環境では編集不可になったのですが、フィールドコードが誤っている等ございませんか。
あるいは、ステップフォームなど使用されてますでしょうか（初期画面ではルックアップが表示されないようになっている等）。
フィールドコードは確認しましたが間違っておりませんでした。
また、今回試しているフォーム自体は特に項目制御を設けていないものになります。
fb.events.form.mounted の中で下記も指定しており、それを外して試したりもしましたが編集不可が反映されずにおります。。
fb.getElementByCode('label0_1').style.backgroundColor = '#f5f5f5';
一度、虫眼鏡からの検索が行われると編集不可が外れることを確認しました。
CSSとやっていることは同じですが、以下に変更していかがでしょうか。
fb.getElementByCode('フィールドコード').getElementsByTagName('input')[0].style.pointerEvents = 'none';
ご確認いただきありがとうございます。
いただいたもののみで試すと編集不可が反映できていることを確認できました。
別にcssでkViewerルックアップの見え方の設定を入れているのですが、それが原因でJavaScriptの指定だと編集不可が反映できていないようでした。。
一旦、cssでも編集不可の設定ができているのでcssを利用していこうと思います。。
いろいろお試しいただいたのに申し訳ありません。
ご教示ありがとうございました！
解決しまして何よりです！
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。