Classic form drop-down compared to new form

SELECTED ANSWER

replied on June 8, 2022 • Show version history

The structure of the field in the new designer is completely different than the structure of the field on the classic designer. The classic designer is more basic.

The downside, if they were to change the structure of the field on the classic designer, it could easily break scripts used by people all over.

The good news, is there are a lot of great resources out there to help make this work without Laserfiche needing to change the basic structure of the field in the classic designer.

I recommend downloading the Chosen JQuery plugin: https://github.com/harvesthq/chosen/releases

Put the files into your Server that is running LFForms at this location:

Then on your form, your drop-down field(s) should include CSS Class name of chosenSelect.

Then add this Javascript:

$(document).ready(function () {
  
  //Set the dropdown field(s) with the chosenSelect class to use the
  //functionality from the Chosen JQuery library.
  //The if statement ensures it only processes on a live form and not 
  //the archival or read-only versions.
  if($('.chosenSelect select').val() != undefined)
  {
    var serverAddress = 'https://SERVERNAME/forms';     //NEED TO LIST YOUR SERVER NAME HERE!
    var scriptAddress = '/js/chosen_v1.8.7/chosen.jquery.js';
    var styleAddress = '/js/chosen_v1.8.7/chosen.css';
    $('head').append('<link rel="stylesheet" type="text/css" href="' + serverAddress + styleAddress + '">');
    $.getScript(serverAddress + scriptAddress, function () {
      $('.chosenSelect select').each(function() {
        $(this).chosen();
      });
    });
  }
  
});

When the form is loaded, the script loads in the Chosen stylesheet and Chosen script, and applies it all of your select fields that have the choseSelect class.

End result looks pretty good.

Really easy to implement in LFForms Classic Designer right now (note, I'm running Version 11 Update 2 for these examples).

*EDIT TO ADD* That script works on a drop-down that has the options set on the Layout Page. If instead you are loading the options from a lookup, things need to be tweaked slightly. For example, if the population of the field happens on form load, you can make it work by using
$(document).on("onloadlookupfinished",function(event) {
instead of
$(document).ready(function () {
like this:

$(document).on("onloadlookupfinished",function(event) {

  //Set the dropdown field(s) with the chosenSelect class to use the
  //functionality from the Chosen JQuery library.
  //The if statement ensures it only processes on a live form and not 
  //the archival or read-only versions.
  if($('.chosenSelect select').val() != undefined)
  {
    var serverAddress = 'https://SERVERNAME/forms';     //NEED TO LIST YOUR SERVER NAME HERE!
    var scriptAddress = '/js/chosen_v1.8.7/chosen.jquery.js';
    var styleAddress = '/js/chosen_v1.8.7/chosen.css';
    $('head').append('<link rel="stylesheet" type="text/css" href="' + serverAddress + styleAddress + '">');
    $.getScript(serverAddress + scriptAddress, function () {
      $('.chosenSelect select').each(function() {
        $(this).chosen();
      });
    });
  }
  
});

*EDIT TO ADD - AGAIN* Here is the updated script that I posted in another comment. This one is more robust about handling the field whether it is populated via the Layout Page or via Lookups, and can also handle the field being hidden initially by Field Rules - if, in addition to putting the chosenSelect class on your dropdowns, you also put the chosenTrigger class on whatever field(s) is/are triggering your field rules - any time any field with the chosenTrigger class is changed, the chosenSelect fields are refreshed. The only part I don't have working is that if the chosenSelect field is used to trigger a Lookup, that isn't working - the change event fires, but the event to trigger the lookup attempt doesn't, and I'm not certain why:

$(document).ready(function () {

  //Set the dropdown field(s) with the chosenSelect class to use the
  //functionality from the Chosen JQuery library.
  //The if statement ensures it only processes on a live form and not 
  //the archival or read-only versions.
  if($('.chosenSelect select').val() != undefined)
  {
    var serverAddress = 'http://SERVERNAME/forms';     //NEED TO LIST YOUR SERVER NAME HERE!
    var scriptAddress = '/js/chosen_v1.8.7/chosen.jquery.js';
    var styleAddress = '/js/chosen_v1.8.7/chosen.css';
    $('head').append('<link rel="stylesheet" type="text/css" href="' + serverAddress + styleAddress + '">');
    $.getScript(serverAddress + scriptAddress, function () {
      $('.chosenSelect select').each(function() {
        $(this).chosen();
      });
    });
  }
  
  //When any field that has the chosenTrigger class changes, check
  //for select fields that have been unhidden and need the chosen
  //script applied to them.
  $('.chosenTrigger').change(function(){
    $('.chosenSelect select').each(function() {
      $(this).trigger('chosen:updated');
      $(this).parent().find('.chosen-container').css('width', $(this).css('width'));
    });
  });
  
});

//Update the dropdowns with the Chosen script when lookups are complete
$(document).on("onloadlookupfinished",function(event) {
  $('.chosenSelect select').each(function() {
    $(this).trigger('chosen:updated');
  });
});

//Update the dropdowns with the Chosen script when lookups are complete
$(document).on("lookupcomplete",function(event) {
  $('.chosenSelect select').each(function() {
    $(this).trigger('chosen:updated');
  });
});

*EDIT TO ADD - THIRD TIME!* Here's modified code that works to trigger the lookup when one of the chosen fields is the source of the lookup:

$(document).ready(function () {

  //Set the dropdown field(s) with the chosenSelect class to use the
  //functionality from the Chosen JQuery library.
  //The if statement ensures it only processes on a live form and not 
  //the archival or read-only versions.
  if($('.chosenSelect select').val() != undefined)
  {
    var serverAddress = 'https://SERVERNAME/forms';     //NEED TO LIST YOUR SERVER NAME HERE!
    var scriptAddress = '/js/chosen_v1.8.7/chosen.jquery.js';
    var styleAddress = '/js/chosen_v1.8.7/chosen.css';
    $('head').append('<link rel="stylesheet" type="text/css" href="' + serverAddress + styleAddress + '">');
    $.getScript(serverAddress + scriptAddress, function () {
      $('.chosenSelect select').each(function() {
        $(this).chosen();
      });
    });
  }
  
  //When any field that has the chosenTrigger class changes, check
  //for select fields that have been unhidden and need the chosen
  //script applied to them.
  $('.chosenTrigger').change(function(){
    $('.chosenSelect select').each(function() {
      $(this).trigger('chosen:updated');
      $(this).parent().find('.chosen-container').css('width', $(this).css('width'));
    });
  });
  
  //Because the chosen script appears to be preventing the lookups
  //from being triggered by the changes to fields, this watches
  //for changes to the field and manually triggers the lookup event.
  $('.chosenSelect select').change(function() {
    $(this).trigger('lookup');
  });
  
});

//Update the dropdowns with the Chosen script when lookups are complete
$(document).on("onloadlookupfinished",function(event) {
  $('.chosenSelect select').each(function() {
    $(this).trigger('chosen:updated');
  });
});

//Update the dropdowns with the Chosen script when lookups are complete
$(document).on("lookupcomplete",function(event) {
  $('.chosenSelect select').each(function() {
    $(this).trigger('chosen:updated');
  });
});

4 0

View 7 previous replies

replied on June 8, 2022

Just ran into a glitch. I have a field rule to show this drop-down only when a radio button option is selected. When I select the radio button, the field shows up but it is much smaller and cannot be clicked to expand. If I remove the field rule, the drop-down works fine.

0 0

replied on June 8, 2022

Oh, I hadn't played with field rules on it before. Let me try that real quick and see if I can tell what it is doing.

0 0

replied on June 8, 2022

Okay, so the problem with the field rules is that when the chosen() function is run on the select field, if the field is hidden by Field Rules, the appearance and contents of the field mimic the hidden field (0 width and no options). The script I shared before wasn't doing anything to trigger an update of the field with the chosen script on it.

Here's some updated code that will be a lot more robust about updates to the chosen functionality. In order to trigger it, you need to add the CSS Class name of chosenTrigger on any fields whose changes should result in the chosen code being updated on the chosenSelect fields. In your case, you want to add the chosenTrigger class to the radio button that is triggering your select field to be shown/hidden.

This code is also updated to allow both drop-downs that were populated on the Layout page and via the Data Lookups, so you don't need to pick one or the other.

$(document).ready(function () {

  //Set the dropdown field(s) with the chosenSelect class to use the
  //functionality from the Chosen JQuery library.
  //The if statement ensures it only processes on a live form and not 
  //the archival or read-only versions.
  if($('.chosenSelect select').val() != undefined)
  {
    var serverAddress = 'http://SERVERNAME/forms';     //NEED TO LIST YOUR SERVER NAME HERE!
    var scriptAddress = '/js/chosen_v1.8.7/chosen.jquery.js';
    var styleAddress = '/js/chosen_v1.8.7/chosen.css';
    $('head').append('<link rel="stylesheet" type="text/css" href="' + serverAddress + styleAddress + '">');
    $.getScript(serverAddress + scriptAddress, function () {
      $('.chosenSelect select').each(function() {
        $(this).chosen();
      });
    });
  }
  
  //When any field that has the chosenTrigger class changes, check
  //for select fields that have been unhidden and need the chosen
  //script applied to them.
  $('.chosenTrigger').change(function(){
    $('.chosenSelect select').each(function() {
      $(this).trigger('chosen:updated');
      $(this).parent().find('.chosen-container').css('width', $(this).css('width'));
    });
  });
  
});

//Update the dropdowns with the Chosen script when lookups are complete
$(document).on("onloadlookupfinished",function(event) {
  $('.chosenSelect select').each(function() {
    $(this).trigger('chosen:updated');
  });
});

//Update the dropdowns with the Chosen script when lookups are complete
$(document).on("lookupcomplete",function(event) {
  $('.chosenSelect select').each(function() {
    $(this).trigger('chosen:updated');
  });
});

The only part I'm still struggling with is triggering a lookup from a select field that has chosen enabled. Although those fields are still triggering change events, they don't appear to be triggering the commands to attempt the lookups. I was able to get it to sort of work by telling it when the change triggered to trigger the change again - the lookup worked, but then it ran again and again and again showing the loading icon constantly, that isn't fun.

So bottom-line, this script should work for drop-down fields regardless of how their contents are loaded and whether or not they shown/hidden via Field Rules - but it doesn't currently work to trigger lookups from those drop-down fields. Kind of disappointing.

1 0

replied on June 9, 2022

Matthew,

I'm seeing the same thing. The new code does work to refresh the drop-down when it's shown by the radio button trigger, but after selecting a value from the drop-down it doesn't successfully trigger another lookup rule. If you find yourself looking into this some more, let me know if you come up with a solution.

Much thanks for getting us this far!

Mike

0 0

replied on June 9, 2022

I had to examine the events in the console, but once I figured it out, it seemed like a really obvious solution. I'm updating the original post with new code.

1 0

replied on August 17, 2022 • Show version history

Hi @████████, I'm not sure if this is related to the Chosen code, but I have a table that uses a drop-down assigned to the CSS class chosenSelect. This drop-down uses Lookup rules to populate the customer's address fields; it works for the first record but not subsequent records. If this could be related to the js do you think you could take a look at it and see if there's any adjustments that need to be made?

I see you mentioned something earlier about this so I'll go through your code again and see if I missed something.

Thanks!

Mike

0 0

replied on August 17, 2022

I think the issue is that the code I added in that third edit (lines 30-35 on the one labeled *EDIT TO ADD - THIRD TIME!*) is being loaded at the time the form is loaded. So all of the chosenSelect fields on the form have that event code added to them at that time - but that only includes your first row in the table - the other rows do not exist yet. That code will need to be run again after the new row is added to the table, in order to add that event code added to the newly created field.

Unfortunately, I've got a little too much on my plate right now to play around with this (I've been on leave for most of the last month, and have a tremendous back-log of stuff right now). I'm sorry.

0 0

replied on August 17, 2022

No worries; I think I can figure it out. Thanks!

1 0

replied on August 17, 2022

This works:

//apply Chosen settings to Customers table
$(document).on('click', '.customersTable a.cf-table-add-row', function(e) {
    $('.chosenSelect select').each(function() {
      $(this).chosen();
      $(this).trigger('chosen:updated');
      $(this).parent().find('.chosen-container').css('width', $(this).css('width'));
      $('.internalCustomerSelect select').attr("data-placeholder", "Select a Customer");  
    });
    $('.chosenSelect select').change(function() {
    $(this).trigger('lookup');
  });
});

2 0

replied on August 22, 2022 • Show version history

I found a work around for the lookup rule problem above. I couldn't get the above solutions to work (v10). I added a hidden input field that is set to the result of the select using a calculation. That field is used for the subsequent lookup. On the plus side it uses a lot less JavaScript.

The input field cannot be read-only.

1 0

View 2 previous replies

Is the lookup rule relying on another field?

If it is, then it wouldn't work with the "onloadlookupfinished" which triggers when the lookups happening with the form loading are complete. Lookups triggered by other fields might work with lookupcomplete instead of onloadlookupfinished - but I haven't tested that.

It's not dependent on another field, other than a radio button field to trigger a field rule to show the drop-down. The lookup is populating correctly at this time, but only when the field isn't being shown via a field rule.

Oh, I see your edit about my edit to use the onloadlookupfinished - I didn't see that before my earlier reply.

Thanks for the third edit; it works great!

Glad you like it, this was an interesting experiment to take the extra distance.

replied on June 10, 2022

He is actually wanting an update to the classic designer to match the functionality in the new designer for drop-down fields.

@████████ -

One feature that I use a lot in the classic form designer is javascript. Since that isn't available yet in the new form designer I find that I must continue using the classic form designer. While the new form designer has some much-improved features, such as the dynamic filtering built in to the drop-down control, I often find I must use the classic form designer in order to run custom javascript routines.

replied on June 17, 2022

We will bring the JavaScript support to new form designer for self-hosted Forms in next release with the support of LFForm object currently documented for Cloud along with same expansion for the APIs.

replied on July 20, 2022 • Show version history

I found it on the documentation page

https://harvesthq.github.io/chosen/

set the data-placeholder attribute on the select statement to be enhanced, like so..

$('#q75 select').attr("data-placeholder", "Select an Employee");

chosen will then inherit this placeholder.

Question

Question

Classic form drop-down compared to new form

Answer

Replies

Sign in to reply to this post.