Question

Make a URL link from a lookup from a form

Laserfiche Cloud Business Processes How To

Updated December 7, 2023

asked on December 3, 2023

Hi All, we would appreciate any help on this?

We have a lookup table containing a list of sites and urls. We wish to put a clickable link inside a custom css field. We understand that since the value is retuned during editing of the form then JavaScript is required to trigger on change.

BP_site = The list of sites
BP_URL = the url for the site

Four questions

1.   Our code does not work, can anyone help us?
2.   The console.log does not create any log entries in the F12 developer tools?
3.   If the variable clickable link was being created and set, how would it be accessed from the custom CSS since there is not as token to select in the list?
4.   We tried doing the same in the modern designer but are getting an error The error "ReferenceError: $ is not defined". Do we need to include a reference to the jQuery library before our JavaScript code? How would that look inside Laserfiche

Apologies in advance for any rookie errors in this.

code for the classic designer:

$(document).ready(function() {
  $('#q1').on('change', 'input', function() {
    var clickablelink = $('#q2').val();
    if (clickablelink.length !== 0) {
      $('#q2').attr('href', $('#q2').attr('href'));
	console.log('#q1');
    console.log('#q2');
    console.log(clickablelink);
    }
   
  });
});

code for the modern designer

$(document).ready(function() {
  $('.BP_site').on('change', 'input', function() {
    var clickablelink = $('.BP_URL').val();
    if (clickablelink.length !== 0) {
      $('.BP_URL').attr('href', $('.BP_URL input').val());
    }
    console.log($('.BP_site').val());
    console.log($('.BP_URL').val());
    console.log(clickablelink);
  });
});

0 0

Answer

SELECTED ANSWER

replied on December 5, 2023 • Show version history

Your code problem is that you are incorrectly referencing the #q1 dropdown. Since #q2 is filled by a lookup triggered by #q1, I would use the #q2 change event. I would also change so the #q1 site is used as the display for the link. Here is updated to work with your form

$(document).ready(function() {
  // When the #q2 input changes, update HTML field
  $('#q2').on('change', 'input', function() {
    // Get the Site from #q1
    var linkdescription  = $('#q1 select').val();
    // Get the URL from #q2
    var clickablelink = $('#q2 input').val();
    // Write URL value to console
    console.log("#q1: " + linkdescription);
    console.log("#q2: " + clickablelink);
    if (clickablelink.length !== 0) {
      // Reset HTML code and replace href
      var html = ('<a href="clickablelink" target="_blank">linkdescription</a>').replace(/clickablelink/, clickablelink);
      // Replace link description
      var newHtml = html.replace(/linkdescription/, linkdescription);
      // Add clickable link to HTML field
      $('#q3').html(newHtml);
      // Write #q3 html to console
      console.log("#q3: " + $('#q3').html());
    }
  });
});

Also, after testing, comment out or remove the console.log lines.

0 0

Replies

replied on December 4, 2023

I am assuming that you want the change in #q1 to update a clickable link in #q2. The below is for the classic designer.

$(document).ready(function() {
  // When the Q1 input changes, update HTML field
  $('#q1').on('change', 'input', function() {
    // Get the URL from #q1
    var clickablelink = $('#q1 input').val();
    // Write URL value to console
    console.log("#q1: " + clickablelink);
    if (clickablelink.length !== 0) {
      // Reset HTML code and replace href
      var html = ('<a href="clickablelink" target="_blank">linkdescription</a>').replace(/clickablelink/, clickablelink);
      // Replace link description
      var newHtml = html.replace(/linkdescription/, clickablelink);
      // Add clickable link to HTML field
      $('#q2').html(newHtml);
      // Write #q2 html to console
      console.log("#q2: " + $('#q2').html());
    }
   
  });
});

0 0

View 3 previous replies

replied on December 4, 2023

I think there was a referencing issue with this example code. Q1 is the selection, the url is returned to q2. When Q1 is changed we want to pick up the value in q2 and create a href called newHtml and for that to display in the custom HTML.

1. Q3 is not being populated, it is blank

2. console.log are not creating log entries in the f12 tools

$(document).ready(function() {
  // When the Q1.input changes, update HTML field
  $('#q1').on('change', 'input', function() {
    // Get the URL from #q2
    var clickablelink = $('#q2 input').val();
    // Write URL value to console
    console.log("#q2: " + clickablelink);
    if (clickablelink.length !== 0) {
      // Reset HTML code and replace href
      var html = ('<a href="clickablelink" target="_blank">linkdescription</a>').replace(/clickablelink/, clickablelink);
      // Replace link description
      var newHtml = html.replace(/linkdescription/, clickablelink);
      // Set value of q3 to newHtml
      $('#q3').html (newHtml);
      // Write #q2 html to console
      console.log("#q2: " + $('#q2').html());
    }
  });
});

0 0

SELECTED ANSWER

replied on December 5, 2023 • Show version history

$(document).ready(function() {
  // When the #q2 input changes, update HTML field
  $('#q2').on('change', 'input', function() {
    // Get the Site from #q1
    var linkdescription  = $('#q1 select').val();
    // Get the URL from #q2
    var clickablelink = $('#q2 input').val();
    // Write URL value to console
    console.log("#q1: " + linkdescription);
    console.log("#q2: " + clickablelink);
    if (clickablelink.length !== 0) {
      // Reset HTML code and replace href
      var html = ('<a href="clickablelink" target="_blank">linkdescription</a>').replace(/clickablelink/, clickablelink);
      // Replace link description
      var newHtml = html.replace(/linkdescription/, linkdescription);
      // Add clickable link to HTML field
      $('#q3').html(newHtml);
      // Write #q3 html to console
      console.log("#q3: " + $('#q3').html());
    }
  });
});

Also, after testing, comment out or remove the console.log lines.

0 0

replied on December 5, 2023

Thanks for the help with this, we have also learned that javascript actions are different depending on if the field is a plain text or a dropdown. If Q2 is a plain text field then $('#q2').on('change', 'input', function() works however it the field is a dropdown then $('#q2').on('change', 'select', function() function is required.

0 0

replied on December 6, 2023

Hi Sean,

The same would also apply to multiline Textarea elements, so the main ones to address are input, select, textarea, and buttons.

If you're still using jQuery, then you can use the ":input" pseudo-selector which covers all four of the items listed above.

For example, instead of separate code for each, you could do the following:

$('#q2').on('change', ':input', function() { ... });

However, something else to note is that this syntax is for delegated event handlers (i.e., the handler is attached to the first item and filters events that propagate up from specific children based on the second selector parameter.

This is useful for things like tables/collections where you have fields that could be added after the form loads, in which case a delegated handler will still work because it was already attached to the parent.

However, in your case, you seem to be using normal fields so you can simplify your event handler and attach it directly to the input field modifying the selector rather than adding the filter.

For example,

$('#q2 :input').on('change', function () { ... });

The difference being that with this version the event handler is attached directly to the input field(s) contained within the #q2 parent whereas the other version is attached to the parent and just filters out events that originated from a particular type of child.

0 0

replied on December 6, 2023

I see, we can avoid unnecessary event filtering through parent elements and make the code more efficient - thanks for the additional detail. We would like to switch the code over to vanilla js and use the modern designer but not sure if that's possible based on the earlier comments about sandboxing?

0 0

replied on December 7, 2023

Hi Sean,

Based on what you're trying to do, I think it should be possible to do with the modern designer despite the sandboxing.

The sandbox prevents direct interaction with the form elements, however, the LFForm object/api provides a way to subscribe to change events, and a way to update the content of a custom html field, which seems to be all you need.

I have another post farther up that highlights those two bits of code; that's basically just copied straight from their documentation, so it'll be very different from what you have now, but not all that complicated really.

1 0

replied on December 4, 2023

Thanks Bert, do you know if similar code is possible for the modern designer?

0 0

replied on December 4, 2023

also, we need a clickable link in the form so i wanted to use the variable 'clickablelink' in a custom html field. How is that variable accessed so that we present a clickable link?

0 0

replied on December 4, 2023

JavaScript runs in a sandbox in the modern designer, so it cannot alter form elements directly or attach event handlers to the fields.

It also doesn't include jQuery by default so you'll have to take a drastically different approach and would probably be better off working with vanilla javascript.

Instead, you'll need to make use of the LFForm object/api they created for the modern designer.

Javascript in the Forms Designer (laserfiche.com)

For example, to attach a change event handler to a field

LFForm.onFieldChange(function() {console.log(this);}, {variableName: "Single_Line"});

And to change the HTML content of a CustomHTML field

var url = "https://test.com";
LFForm.changeFieldSettings( {fieldId: 12}, {content: '<a src="' + url + '"></a>'} );

0 0

You are not allowed to follow up in this post.

Question

Question

Make a URL link from a lookup from a form

Answer

Replies

Sign in to reply to this post.