予約アプリを作成したのですが、フォームブリッジ側で値を入力したものが
kintoneのアプリに反映されなく…。
反映されないのは、JavaScriptでカスタマイズしたものになります。
カスタマイズ内容は、予約日の5日前の日付を自動的に表示というものです。
何か別の設定が必要なのか、ご教示いただけますでしょうか。
コードは下記です↓
// フォームブリッジのデータ属性を活用する方法
(function() {
'use strict';
// すでに実行済みかをチェックするフラグ
var scriptExecuted = false;
// メイン関数
function initialize() {
if (scriptExecuted) return;
scriptExecuted = true;
console.log('データ属性活用スクリプトを開始します');
try {
// 1. フィールドコンテナを検索
var reservationContainer = document.querySelector('[data-field-code="予約日"]');
var deadlineContainer = document.querySelector('[data-field-code="予約変更締切日"]');
if (!reservationContainer || !deadlineContainer) {
console.error('フィールドコンテナが見つかりません');
return;
}
// 2. 予約日入力フィールドを検索
var reservationInput = null;
var inputs = document.querySelectorAll('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'date' ||
(input.placeholder && input.placeholder.indexOf('年-月-日') !== -1) ||
(reservationContainer.contains(input) && input.type !== 'hidden')) {
reservationInput = input;
break;
}
}
if (!reservationInput) {
console.error('予約日入力フィールドが見つかりません');
return;
}
// 3. フォームブリッジのデータフィールドを設定するカスタム関数
function setFormBridgeFieldValue(fieldCode, value) {
// 方法1: データ属性を持つ要素に値を設定
var fieldElements = document.querySelectorAll('[data-field-code="' + fieldCode + '"] input');
fieldElements.forEach(function(element) {
try {
// disabledを一時的に解除
var wasDisabled = element.disabled;
if (wasDisabled) element.disabled = false;
element.value = value;
// イベントを発火
var event = new Event('input', { bubbles: true });
element.dispatchEvent(event);
event = new Event('change', { bubbles: true });
element.dispatchEvent(event);
// disabledを元に戻す
if (wasDisabled) element.disabled = true;
} catch (e) {
console.error('フィールド更新エラー:', e);
}
});
// 方法2: 非表示のinputを作成/更新
var hiddenInput = document.querySelector('input[type="hidden"][name="' + fieldCode + '"]');
if (!hiddenInput) {
hiddenInput = document.createElement('input');
hiddenInput.type = 'hidden';
hiddenInput.name = fieldCode;
document.body.appendChild(hiddenInput);
}
hiddenInput.value = value;
// 方法3: フォームブリッジのAPI経由（存在する場合）
if (window.FormBridge && typeof window.FormBridge.setFieldValue === 'function') {
try {
window.FormBridge.setFieldValue(fieldCode, value);
} catch (e) {
console.error('FormBridge API エラー:', e);
}
}
// 方法4: オーバーレイ表示も更新
var overlay = document.querySelector('.new-deadline-overlay');
if (overlay) {
overlay.textContent = value;
overlay.style.display = value ? 'flex' : 'none';
} else {
// オーバーレイがなければ作成
var deadlineField = document.querySelector('[data-field-code="' + fieldCode + '"] input');
if (deadlineField) {
var deadlineParent = deadlineField.parentElement;
deadlineParent.style.position = 'relative';
overlay = document.createElement('div');
overlay.style.position = 'absolute';
overlay.style.left = '0';
overlay.style.top = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.backgroundColor = '#f8f8f8';
overlay.style.display = value ? 'flex' : 'none';
overlay.style.alignItems = 'center';
overlay.style.paddingLeft = '12px';
overlay.style.zIndex = '10';
overlay.style.pointerEvents = 'none';
overlay.className = 'new-deadline-overlay';
overlay.textContent = value;
deadlineParent.appendChild(overlay);
}
}
console.log(fieldCode + 'フィールドを更新:', value);
}
// 4. 予約日フィールドの変更を監視
reservationInput.addEventListener('change', updateDeadline);
reservationInput.addEventListener('input', updateDeadline);
// 5. 一定間隔でも更新
setInterval(updateDeadline, 1000);
// 6. 初期更新を実行
setTimeout(updateDeadline, 100);
// 締切日を更新する関数
function updateDeadline() {
try {
var reservationValue = reservationInput.value;
if (!reservationValue) {
setFormBridgeFieldValue('予約変更締切日', '');
return;
}
// 日付を解析
var reservationDate = new Date(reservationValue);
// 日付が無効な場合は処理を中止
if (isNaN(reservationDate.getTime())) {
console.error('無効な日付形式:', reservationValue);
return;
}
// 5日前の日付を計算
var deadlineDate = new Date(reservationDate);
deadlineDate.setDate(deadlineDate.getDate() - 5);
// 日付をフォーマット (YYYY-MM-DD形式)
var year = deadlineDate.getFullYear();
var month = ('0' + (deadlineDate.getMonth() + 1)).slice(-2);
var day = ('0' + deadlineDate.getDate()).slice(-2);
// ハイフン区切りのフォーマット (YYYY-MM-DD)
var formattedDate = year + '-' + month + '-' + day;
console.log('計算された締切日:', formattedDate);
// カスタム関数で締切日フィールドを更新
setFormBridgeFieldValue('予約変更締切日', formattedDate);
} catch (e) {
console.error('締切日更新でエラー:', e);
}
}
console.log('スクリプトの初期化が完了しました');
} catch (e) {
console.error('スクリプト初期化でエラー:', e);
}
}
// ページ読み込み完了時に実行
if (document.readyState === 'complete') {
setTimeout(initialize, 500);
} else {
window.addEventListener('load', function() {
setTimeout(initialize, 500);
});
}
// DOMContentLoadedでも実行
document.addEventListener('DOMContentLoaded', function() {
setTimeout(initialize, 500);
});
})();