何を実現したいのかを書きましょう
現在、Kintoneを利用して役員の会議情報を管理するための「役員管理DB」を作成し、複数の会議情報をテーブル形式で管理しています。
また、トヨクモのフォームブリッジを使用して、役員向けのmyページにこの会議情報のテーブルを表示し、利用者が複数会議の出欠や欠席時の委任状を入力できる仕組みを構築しています。
フォームブリッジのJavaScriptを用いて、会議情報のテーブルにおける行単位の追加削除を抑止する制御は既に実装済みです。
この仕組みに対して、以下の機能を追加したいと考えています。
① 会議終了後のテーブル行非表示
- 会議が終了した行を「完了フラグ」で判定し、表示しないようにしたいと考えています。
② 委任状が不要な会議の欄を非活性化
- 会議番号の体系を基にして、委任状が不要な会議の場合には、委任状の入力欄を非活性化したいと考えています。
発生した問題やエラーメッセージを具体的に書きましょう
まず、上記②の委任状が不要な会議の欄を非活性化の処理を作成しましたが
非活性になりません。
実行したコードをコピー＆ペーストしましょう
(function() {
‘use strict’;
// フォームブリッジのフォームが作成された時に実行
fb.events.form.created = [function(state) {
// フォームブリッジがKintoneのテーブルを操作する際にテーブルの行追加や削除を無効化
var observer = new MutationObserver(function() {
// フォームブリッジの「×」アイコンを非表示にする
var deleteIcons = document.querySelectorAll('.fb-delete-row, .ui.circular.orange.icon.button .remove.icon');
deleteIcons.forEach(function(icon) {
// <i class="remove icon"> の親の <a>タグも非表示にする
var parentButton = icon.closest('a');
if (parentButton) {
parentButton.style.display = 'none'; // 親の<a>タグを非表示にする
}
});
// テーブル行を取得
var tableRows = document.querySelectorAll('(function() {
‘use strict’;
// フォームブリッジのフォームが作成された時に実行
fb.events.form.created = [function(state) {
// フォームブリッジがKintoneのテーブルを操作する際にテーブルの行追加や削除を無効化
var observer = new MutationObserver(function() {
// フォームブリッジの「×」アイコンを非表示にする
var deleteIcons = document.querySelectorAll('.fb-delete-row, .ui.circular.orange.icon.button .remove.icon');
deleteIcons.forEach(function(icon) {
// <i class="remove icon"> の親の <a>タグも非表示にする
var parentButton = icon.closest('a');
if (parentButton) {
parentButton.style.display = 'none'; // 親の<a>タグを非表示にする
}
});
// テーブル行を取得
var tableRows = document.querySelectorAll('(function() {
‘use strict’;
// フォームブリッジのフォームが作成された時に実行
fb.events.form.created = [function(state) {
// フォームブリッジがKintoneのテーブルを操作する際にテーブルの行追加や削除を無効化
var observer = new MutationObserver(function() {
// フォームブリッジの「×」アイコンを非表示にする
var deleteIcons = document.querySelectorAll('.fb-delete-row, .ui.circular.orange.icon.button .remove.icon');
deleteIcons.forEach(function(icon) {
// <i class="remove icon"> の親の <a>タグも非表示にする
var parentButton = icon.closest('a');
if (parentButton) {
parentButton.style.display = 'none'; // 親の<a>タグを非表示にする
}
});
// テーブル行を取得
var tableRows = document.querySelectorAll('会議状況TBL tbody tr'); // テーブルのIDを適切に設定
tableRows.forEach(function(row) {
// 役員会議CDをフィールド名で取得（フィールド名は適宜修正）
var meetingNumber = row.querySelector('input[name="役員会議CD"]').value.trim();
// 委任状をフィールド名で取得
var proxyField = row.querySelector('input[name="委任状"]');
// 会議番号が「SFKI」で始まる場合、委任状フィールドを非活性化
if (meetingNumber.startsWith('SFKI')) {
proxyField.disabled = true; // 非活性化
} else {
proxyField.disabled = false; // その他の場合は活性化
}
});
});
// DOMの変化を監視して、要素が動的に追加された場合も対応
var targetNode = document.body;
var config = { childList: true, subtree: true };
observer.observe(targetNode, config);
return state;
}];
})();
'); // テーブルのIDを適切に設定
tableRows.forEach(function(row) {
// 役員会議CDをフィールド名で取得（フィールド名は適宜修正）
var meetingNumber = row.querySelector('input[name="役員会議CD"]').value.trim();
// 委任状をフィールド名で取得
var proxyField = row.querySelector('input[name="委任状"]');
// 会議番号が「SFKI」で始まる場合、委任状フィールドを非活性化
if (meetingNumber.startsWith('SFKI')) {
proxyField.disabled = true; // 非活性化
} else {
proxyField.disabled = false; // その他の場合は活性化
}
});
});
// DOMの変化を監視して、要素が動的に追加された場合も対応
var targetNode = document.body;
var config = { childList: true, subtree: true };
observer.observe(targetNode, config);
return state;
}];
})();
'); // テーブルのIDを適切に設定
tableRows.forEach(function(row) {
// 役員会議CDをフィールド名で取得（フィールド名は適宜修正）
var meetingNumber = row.querySelector('input[name="役員会議CD"]').value.trim();
// 委任状をフィールド名で取得
var proxyField = row.querySelector('input[name="委任状"]');
// 会議番号が「SFKI」で始まる場合、委任状フィールドを非活性化
if (meetingNumber.startsWith('SFKI')) {
proxyField.disabled = true; // 非活性化
} else {
proxyField.disabled = false; // その他の場合は活性化
}
});
});
// DOMの変化を監視して、要素が動的に追加された場合も対応
var targetNode = document.body;
var config = { childList: true, subtree: true };
observer.observe(targetNode, config);
return state;
}];
})();
コードをここに入力または貼り付け
