新規投稿
フォローする

【FormBridge】指定のkViewerルックアップを編集不可にしたい

Avatar
小林花子

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

掲題の通り、指定のkViewerルックアップを編集不可にしたいです。

現時点で作成している動作としては、以下になります。

①fb.events.fields.XXX.changed を利用して指定のkViewerルックアップに検索ワードを転記

②検索ボタンを押すことで対応したフィールドに情報を反映

 

検索ワードを転記して検索はできたのですが、

検索ワードの入力欄はロックをかけられていない状態なので消してしまえば別の検索もできるようになっています。

これをどうにかできないでしょうか？

0

9件のコメント

Avatar
koichi

小林花子さん

こんにちは。

 

CSSまたはJavaScriptで対応できそうな気がします。

CSS（ルックアップフィールドのinput要素に対して）

pointer-events : none;

JavaScript

fb.getElementByCode('ルックアップフィールドコード').getElementsByTagName('input')[0].disabled = true;
0
Avatar
小林花子

koichiさま

ご教示ありがとうございます。

CSSを利用してkViewerルックアップのほかの設定もしているので、

CSSで実装しようと試しているのですが、個別に指定すると実装ができない状態です。

指定の仕方の問題でしょうか？(display: none;は実装できております)

[data-vv-name="XXX"] > form > div > .el-input__inner {
  display: none;
  pointer-events: none;
}
0
Avatar
koichi

FormBridgeの仕様のためか、data-vv-nameの属性値では反映できないのかもしれません。

/* 1行目内の1番目のkViewerルックアップ */
.row:nth-child(1) .kviewer-lookup-input:nth-of-type(1) input {
    pointer-events: none;
}

kViewerルックアップが複数ある場合は、行番号を指定して適用してみてください。

1
Avatar
小林花子

data-vv-nameではできないのですね、、、

ありがとうございます。確かにご教示いただいたものだと実装できました。

 

度々申し訳ありませんが、JavaScriptでも試してみているのですがこちらも通らずにいます。

お手数ですが、こちらもご教示いただけませんでしょうか？

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

(function() {
    "use strict";

    fb.events.form.mounted = [function(state) {

        fb.getElementByCode('XXX').getElementsByTagName('input')[0].disabled = true;


    return state;
    }];
})();
小林花子により編集されました
0
Avatar
koichi

ご確認いただきありがとうございます。

こちらの環境では編集不可になったのですが、フィールドコードが誤っている等ございませんか。

あるいは、ステップフォームなど使用されてますでしょうか（初期画面ではルックアップが表示されないようになっている等）。

0
Avatar
小林花子

フィールドコードは確認しましたが間違っておりませんでした。

また、今回試しているフォーム自体は特に項目制御を設けていないものになります。

fb.events.form.mounted の中で下記も指定しており、それを外して試したりもしましたが編集不可が反映されずにおります。。

        fb.getElementByCode('label0_1').style.backgroundColor = '#f5f5f5';
0
Avatar
koichi

一度、虫眼鏡からの検索が行われると編集不可が外れることを確認しました。

CSSとやっていることは同じですが、以下に変更していかがでしょうか。

fb.getElementByCode('フィールドコード').getElementsByTagName('input')[0].style.pointerEvents = 'none';
0
Avatar
小林花子

ご確認いただきありがとうございます。

いただいたもののみで試すと編集不可が反映できていることを確認できました。

別にcssでkViewerルックアップの見え方の設定を入れているのですが、それが原因でJavaScriptの指定だと編集不可が反映できていないようでした。。

一旦、cssでも編集不可の設定ができているのでcssを利用していこうと思います。。

いろいろお試しいただいたのに申し訳ありません。

ご教示ありがとうございました！

1
Avatar
koichi

解決しまして何よりです！

0
サインインしてコメントを残してください。