This is not an intended behavior within the Layout Designer and will be deprecated in cloud’s October 2023.10 release and self-hosted's Forms 11 Update 5 release. At that time, we will add a supported mechanism to perform your intended behavior. The below can be used in place of your current setup:
Original Custom HTML Field
<button onclick="document.getElementById('LFForm_sandbox').contentWindow.postMessage('click-start-timer-button', '*');">Click to Start the Test</button>
New Custom HTML Field
<button onclick="clickStartTimerButton()">Click to Start the Test</button>
- Note this will call a function that is defined within the LFForm Sandbox.
- All functions will be run in the LFForm Sandbox frame, so you have access to the LFForm object as well.
- E.g., you may call LFForm.setFieldValues from custom HTML fields.
Old LFForm Sandbox Code
window.addEventListener("message", function (e) {
//Verify message source is the parent page.
if (e.origin != document.referrer.replace(/\/$/, "")) {
return;
} else {
//Handle the specific messages.
if (e.data.toString() == "click-start-timer-button") {
LFForm.setFieldValues({ fieldId: timerFieldID }, timerLength);
LFForm.setFieldValues({ fieldId: startedFlagID }, "Started");
LFForm.changeFieldSettings(
{ fieldId: startButtonFieldID },
{ HTMLContent: "" }
);
}
}
});
New LFForm Sandbox Code
window.clickStartTimerButton = function () {
LFForm.setFieldValues({ fieldId: timerFieldID }, timerLength);
LFForm.setFieldValues({ fieldId: startedFlagID }, "Started");
LFForm.changeFieldSettings(
{ fieldId: startButtonFieldID },
{ HTMLContent: "" }
);
};
Note:
- You no longer need to listen to the “message” event on the window.
- You only need to register the function on the window object within the sandbox and you can invoke anything defined there.
- Static parameters can be passed as arguments to the functions being invoked. Dynamic parameters cannot be passed at this time
Ref #477261