Clickable URL in Single Line Field

posted on August 6, 2024 • Show version history

Hello,
I am on forms version 11.0.2311.50553 and am trying to make a single line field clickable. The field looks up a URL and has a class of urlColumn. The table has the class of myTable. The field looks clickable, but I have to copy and paste the link as it is not clickable.

I've used the following CSS and JS.

.urlColumn input {
color: blue;
text-decoration: underline;
cursor: pointer;
}

}
$(document).ready( function() {
// attach delegated event handler to table
// using url column as triggering element
$('.myTable').on('click','.urlColumn input',function(){
// get url from field value
var url = $(this).val();

// add http if url is incomplete
if (!url.startsWith('https')) {
url = 'https://' + url;
}

// open in new tab
window.open(url,'_blank');
});
});

0 0

replied on August 6, 2024 • Show version history

Are you using the Classic Designer or the New/Modern Designer? Because this code is working for me in the Classic Designer. But it would definitely not work in the New/Modern Designer without some major rewrites.

P.S.: use the "{...} code" button here on LFAnswers to make your code easier to read and work with in posts.

P.P.S.: you should also consider editing your post to change it from a Discussion to a Question so that it can be marked as Answered once you have a satisfactory answer.

0 0

View 1 previous reply

replied on August 6, 2024

Something like this should work for the Modern Designer:

//Run the function when the form is first
//loaded and when anything in the table is
//changed.
UpdateLinks();
LFForm.onFieldChange(UpdateLinks, {variableName: "urlColumn"});

//Function to update all the links in
//the table.
function UpdateLinks() {
  let urlColumn = LFForm.findFieldsByClassName("urlColumn");
  urlColumn.forEach(function(element, index)  {
    let url = element.data;
    if (!url.startsWith('https')) {
      url = 'https://' + url;
    }
    LFForm.changeFieldSettings( {fieldId: 4, index: index}, {content: "<a href='" + url + "' target='_Blank'>" + url + "</a>"} );
  });
};

To make this work:

Add a Custom HTML element into your table to the side of the single line field.
Determine the Field ID of the Custom HTML field and updated line 16 of the code with that ID # (where it currently says 4).
Determine the Variable Name of the Single Line field and list it in line 5 of the code (where it currently says urlColumn).
Determine the Class Name of the Single Line field and list it in line 10 of the code (where it currently says urlColumn).

This worked for me in testing to create the links in the Custom HTML fields when the form first loaded and when any changes were made to the values in the Single Line fields.

0 0

replied on August 6, 2024

Thank you so much. I think I am close, but still missing something.

Does it matter if my single line field is in a table?

This is what I have for my code;

//Function to update all the links in
//the table.
function UpdateLinks() {
  let urlColumn = LFForm.findFieldsByClassName("link");
  urlColumn.forEach(function(element, index)  {
    let url = element.data;
    if (!url.startsWith('https')) {
      url = 'https://' + url;
    }
    LFForm.changeFieldSettings( {fieldId: 385, index: index}, {content: "<a href='" + url + "' target='_Blank'>" + url + "</a>"} );
  });
};

Field 369 is populated with the linked based on the lookup.
Field 385 is my HTML field.

0 0

replied on August 28, 2024

Sorry - I didn't see this response.

It looks to me like you're missing the first part of the code (lines 4 and 5 in my example) that actually call the UpdateLinks() function.

0 0

Discussion

Discussion

Clickable URL in Single Line Field

Comments 5

Follow-Ups 0

Sign in to reply to this post.