I know previously, LF Forms could not populate field values in a custom html if the form is live. Is that still the case? If so, is there a way to get the values to show in the modern designer?
Yes, that still holds true. The reason is you are using a variable to populate the custom html field, but the value for the variable does not get set until the form is submitted or if Workflow populated the value to start the instance. You might be able to use JavaScript to accomplish this.
Do you mean before the form was submitted?
Correct. For example, a unique link that is using a lookup.
Yes, that still holds true. The reason is you are using a variable to populate the custom html field, but the value for the variable does not get set until the form is submitted or if Workflow populated the value to start the instance. You might be able to use JavaScript to accomplish this.
That is what I assumed. Thank you!
We use spans to make this work. Here's an older Answers post that talks about that method:
https://answers.laserfiche.com/questions/173809/How-to-add-variable-to-custom-HTML
I'm not sure if anyone on our team has done this with the Modern Designer yet, but it does work in the Classic Designer.
There is no way to populate a custom html via lookup directly. Like other commenters noted, you can use variables in your custom html to dynamically alter its content, but it will be static on page load and will not update if variables are updated while the form is filled out. We do have a feature item being designed right now that will make this possible.
In the meantime, you can use custom js to fill in your html field. For example:
const htmlField = LFForm.findFieldsByVariableName('My_HTML_Field');
const makeHtml = async function (link) {
if (link === '') return;
const html = `<div>
<a href="${link}">Click Here!</a>
</div>`;
await LFForm.changeFieldSettings(htmlField, { content: html });
};
const main = async () => {
// Field that will contain the text needed to create the html
const myField = LFForm.findFieldsByVariableName('My_Field');
// Get and set the html with the current value of the field on page load
const linkText = LFForm.getFieldValues(myField);
await makeHtml(linkText);
// any time the field changes, update the html
LFForm.onFieldChange(async () => {
const linkText = LFForm.getFieldValues(myField);
await makeHtml(linkText);
}, myField);
};
main();
Yes this code will work on the modern designer!
Hey Zachary, I don't see where you can specify a variable name for the Custom HTML. Can you help me understand line 1:
const htmlField = LFForm.findFieldsByVariableName('My_HTML_Field');
Or, could you upload your example so I can import it please?
That is my bad, you cannot locate a custom html field by variable name because it does not have a variable attached to it, you may use any of the other find fields function in place on that line and the rest of the code will work.