Clickable URL in a single line field/forms/version 12 modern design

asked one day ago

I have a single line field in the modern design form version 12. I'd like the customer to be able to insert a clickable link. Is this possible? I've added a blank custom HTML under the single line field and found this for the js but it is not working.

LFForm.onFieldChange(function () {
let url = this.value.trim();
let html = "";

if (url) {
// Ensure URL is valid for hyperlinking
if (!url.startsWith("http://") && !url.startsWith("https://")) {
url = "http://" + url;
}

html = `<a href="${url}" target="_blank">${url}</a>`;
}

// Inject the clickable link into the HTML field
LFForm.changeFieldSettings(
{ variableName: "UrlClickable" },
{ content: html }
);

}, { variableName: "UrlInput" });

The instructions said to name the variable for the custom HTML "UrlClickable" but I do not see any variable for that field.

Should I just make the form in classic design?

0 0

replied one day ago

Custom HTML elements have no variable name because they're not "input" elements. However, you can still reference them by Id.

When you open the CSS/JS tabs, you should see the Field Id value in the top-left

once you have the id, just replace: { variableName: "UrlClickable" },

with: { fieldId: __ }

3 0

View 6 previous replies

replied one day ago

We tried this and it didn't work. Thanks tho!

0 0

replied one day ago • Show version history

Just noticed you also have an issue on line 2; the onFieldChange event does not bind "this" to the input element in the same way as a standard change event handler so .value won't work.

Instead, I believe you have to use getFieldValues.

Replace

let url = this.value.trim();

with

let url = LFForm.getFieldValues({ variableName: "UrlInput" })?.trim();

I used "?." for optional chaining just to make sure it wouldn't try to run the trim method and throw an error on a null or undefined result.

UPDATE: I don't see it listed in the documentation but the "this" object scope seems to include a variableName property, and the following also seems to work if you want to avoid typing the variable name in two different places.

let url = LFForm.getFieldValues({ variableName: this.variableName })?.trim();

I'm assuming the properties of "this" are based on how you attached the event. For example, if you attach by variableName, this.variableName will have that value, but if you attach by fieldId, then this.fieldId would have the value.

0 0

replied one day ago

Your answer is correct and should work for this use case, the issue is retrieving the field value, the rest of the code looks find.

I would definitely not recommend using `this` in the context of LFForm event handling. Its not documented, and there isn't anything useful in that object. If you want to determine what field triggered an event, like the row triggering the event in the context of listening to changes in a table/collection column, use the event parameter object in the callback handler.

event.options contains all of the fields that triggered a change event (typically 1), but you can pass that directly to getFieldValues to grab the specific row that changed because it contains field id and index (row).

1 0

replied one day ago • Show version history

@████████ ~~did that change in recent versions?~~

~~I just tested in 11.0.2311.50564 and it was under event.data.options rather than event.options.~~

~~The following line worked for me:~~

~~let url = LFForm.getFieldValues(event.data.options)?.trim();~~

UPDATE: This was a due to a mistake in my code.

0 0

replied one day ago

I'm not sure when/if it changed. Does your event.options exist or have the same data in it?

All of my code over the past couple years uses event.options

0 0

replied one day ago • Show version history

Interesting. When I log the event object to the console I'm getting this

0 0

replied one day ago

where are you logging event? Could you show the full code? that event looks like the main event passed between the form and the sandbox iframe.

Using this simple code

LFForm.onFieldChange(function (e) {
    console.log('event from change', e);
}, { fieldId: 2 });

I log:

I can do a little more digging to see if/when that changed in 11 to 12

1 0

replied 18 hours ago

You're right, I forgot to add the function parameter, and I referenced the variable as "event" so it was just referencing the main event.

In the code below, the "e" variable works correctly like you demonstrated, but event is also populated and what I was getting.

LFForm.onFieldChange(function (e) {
  console.log(event, e);
}, { variableName: "TestInput" });

Fun times with JavaScript scoping haha.

0 0

replied 16 hours ago

ya definitely scoping fun there, fortunately nothing there that would need to be fixed from a security perspective, and unfortunately nothing fun there to use for customizations

0 0

Question

Question

Clickable URL in a single line field/forms/version 12 modern design

Replies

Sign in to reply to this post.