# 【フォームブリッジ】テーブルの行単位での制御

**URL:** <https://community.cybozu.dev/t/topic/9446>\
**Category:** kintone 開発相談\
**Created:** [2024 年 8 月 31 日午前 2:47 UTC](https://community.cybozu.dev/t/topic/9446 "2024-08-31T02:47:50Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![tanaka4189](https://avatars.discourse-cdn.com/v4/letter/t/919ad9/32.png) [@tanaka4189](https://community.cybozu.dev/u/tanaka4189)\
**Post date:** [2024 年 8 月 31 日午前 2:47 UTC](https://community.cybozu.dev/t/topic/9446/1 "2024-08-31T02:47:50Z")

</div>

kViewerのMyページからフォームブリッジを呼び出した際に、以下のような制御を行いたい

テーブルには申請日と、完了（チェックボックス）があります。  
完了にチェックが入っていれば申請日は変更不可、入っていなければ変更可能  
これを行単位で制御したい。

```javascript
(function () {
    "use strict";
    fb.events.kviewer.record.mapped = [function (state) {

        const record = state.record;

        for (let i = 0; i < record.テーブル.value.length; i++) {
            if (record.テーブル.value[i].value.完了.value === '完了') {
                record.テーブル.value[i].value.申請日.disabled = true;
            } else {
                record.テーブル.value[i].value.申請日.disabled = false;
            }

        }

        return state;
    }]
}());

```

エラーは出ていませんが制御できていません。

問題点等お気づきの点がございましたら、ご教授いただきますようお願いいたします。

---

<div class="post-metadata">

**Author:** ![aaa](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/aaa/32/277_2.png) [@aaa](https://community.cybozu.dev/u/aaa)\
**Post date:** [2024 年 9 月 2 日午前 7:45 UTC](https://community.cybozu.dev/t/topic/9446/2 "2024-09-02T07:45:29Z")

</div>

` fb.events.kviewer.record.mapped`  
のイベントを使うと以下のようなエラーが出ました。  
細かい設定が質問者と同じになっていないのかも知れません。  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/2X/b/baeeb4ee86858b4cd4bd8a45a2e9dcffc9d43e34.png)

```javascript
(() => {
    "use strict";
    fb.events.form.mounted = [state => {

        const record = state.record;

        record.テーブル.value.forEach((row, i) => {
            if (row.value.チェックボックス.value[0] === '完了') {
                console.log("完了");
                const tableRowElement = fb.getTableElementsByCode('テーブル', '申請日')[i];
                const inputElement = tableRowElement.querySelector('input');
                if (inputElement) {
                    inputElement.disabled = true;
                }
            } else {
                console.log("未完了");
            }
        });

        return state;
    }];
})();

```

 ![image](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/2X/8/894cc25a62aaa37d2e2c4fef5c8386ea0cc06eda.png)

formbridge上で完了、未完了を変更できてしまうのですがこれが希望した結果なのか？よくわかりませんでした。

---

<div class="post-metadata">

**Author:** ![tanaka4189](https://avatars.discourse-cdn.com/v4/letter/t/919ad9/32.png) [@tanaka4189](https://community.cybozu.dev/u/tanaka4189)\
**Post date:** [2024 年 9 月 3 日午前 12:39 UTC](https://community.cybozu.dev/t/topic/9446/3 "2024-09-03T00:39:12Z")

</div>

ご返信ありがとうございます。  
このエラーが出る場合は setTimeout で回避できました。  
しかしながらfb.events.kviewer.record.mappedでもfb.events.form.mountedでも制御ができませんでした。  
申請日のフィールドコードのタイプが日付になっているためと思われます？文字列で試してみましたところ制御は出来ているようです。制御したいのはタイプが日付のフィールドです。  
引き続き気が付く点等ございましたらよろしくお願いいたします。

参考にしてこちらのコードで試してみました

```javascript
(() => {
    "use strict";
    fb.events.kviewer.record.mapped = [state => {

        const record = state.record;

        setTimeout(function () {

            record.テーブル.value.forEach((row, i) => {
                if (row.value.完了.value[0] === '完了') {
                    console.log("完了");
                    const tableRowElement = fb.getTableElementsByCode('テーブル', '申請日')[i];
                    const inputElement = tableRowElement.querySelector('div[data-vv-name = "テーブル-0-申請日"] input');
                    if (inputElement) {
                        inputElement.disabled = true;
                        console.log(inputElement);
                    }
                } else {
                    console.log("未完了");
                }
            });
        }, 1000);

        return state;
    }];
})();

```

console.log(inputElement);  
のログではdisabled = trueとなるのですが、実際のコードはdisabled が抜けてしまうようです。

---

<div class="post-metadata">

**Author:** ![aaa](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/aaa/32/277_2.png) [@aaa](https://community.cybozu.dev/u/aaa)\
**Post date:** [2024 年 9 月 3 日午前 2:47 UTC](https://community.cybozu.dev/t/topic/9446/4 "2024-09-03T02:47:37Z")

</div>

制御ができないというのは、disableにしても

 ![image](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/2X/f/f7ad67664bbda12237ed2cd7290eb5cbf3df23f0.png)  
日付フィールドをクリックするとカレンダーが表示されてしまう  
ということを差していますか？

イベントリスナーが設定されているので、削除する必要があります。

```javascript
(() => {
    "use strict";
    fb.events.form.mounted = [state => {

        const record = state.record;

        record.テーブル.value.forEach((row, i) => {
            if (row.value.チェックボックス.value[0] === '完了') {
                console.log("完了");
                const tableRowElement = fb.getTableElementsByCode('テーブル', '日付')[i];
                const inputElement = tableRowElement.querySelector('input');
                if (inputElement) {
                    inputElement.disabled = true;
                    const clonedElement = inputElement.cloneNode(true);
                    inputElement.replaceWith(clonedElement);
                }
            } else {
                console.log("未完了");
            }
        });

        return state;
    }];
})();

```

![del_eventListener](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/2X/0/016899b43d389504c51f98cb3b5212295a4c0441.gif)

---

<div class="post-metadata">

**Author:** ![tanaka4189](https://avatars.discourse-cdn.com/v4/letter/t/919ad9/32.png) [@tanaka4189](https://community.cybozu.dev/u/tanaka4189)\
**Post date:** [2024 年 9 月 3 日午前 6:27 UTC](https://community.cybozu.dev/t/topic/9446/5 "2024-09-03T06:27:29Z")

</div>

aaa様  
お手数をおかけいたしました。大変勉強になりました。  
無事思うような仕様になりました。本当にありがとうございました。

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 9 月 6 日午前 6:27 UTC](https://community.cybozu.dev/t/topic/9446/6 "2024-09-06T06:27:49Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。