You are viewing limited content. For full access, please sign in.

Question

Question

Some simple JavaScript codes working in forms v10 not working for the new v11, please help.

asked on January 23, 2024 Show version history

I am disappointed that simple and existing JavaScript codes that works for v10 is now not working for the new v11 responsive "modern" designer.

Can someone help to revise these? As much help appreciated.

 

Title, that displays name of the form in browser:

// Set page Bookmark title
$('title').text("Real Estate Tax Relief Application")

 

Phone and SSN masking  works for forms v10.

I also need help to find out the " 'https://mySite.com/Forms/js/jquery.mask.min.js'" address, where should I look for it?

$(document).ready(function() {

  $.getScript(
    'https://mySite.com/Forms/js/jquery.mask.min.js'
    , function () {	
    // re-format Phone -------------------------------
	   $(".rePhone input").mask("(999) 999-9999");
    // re-format SSN ---------------------------------
	  $(".reSSN input").mask("999-99-9999");

    });   // -- end of getScript --

});	// --- end of document.ready -- 

 

Proper capitalization:

  // To Force proper capitalization
  $('.capitalizeMe input').on('change',function() {
    var orig = $(this).val();
    var breakSpaces = orig.split(' ');
    var newWords = new Array();
    $.each(breakSpaces,function(index,word) {
      newWords.push(word.charAt(0).toUpperCase() + word.slice(1));
    });
    $(this).val(newWords.join(' '));
  });     // -- end of capitalizeMe --

 

Restrict negative numbers

  // Restrict negative numbers
  $('.limitedCurrency input').attr('min',0);

 

0 0

Replies

replied on January 23, 2024 Show version history

You can of course continue to utilize the Classic Designer, and any code created in there for Version 10 should continue to work on Version 11.

But the New Designer is an entirely different animal when it comes to scripting.  For a few reasons:

  1. The new designer doesn't utilize JQuery like the classic designer does, so any code needs to be re-written in vanilla Javascript.
  2. The Javascript runs within a Sandboxed iFrame, so it doesn't have direct access to the structure of the Form/Window/Document/Fields/etc.  That means you are limited to changes that can be applied using the LFForm interface.  They keep adding more to the LFForm interface, but it is still going to be a lot more limited than what we could code in the Classic Designer.
  3. The structure of the form is no longer dictated solely by the DOM structure as the "source-of-truth", but rather uses Angular as the internal source of truth - so even if we could edit the structure, the changes wouldn't "stick".

There's a comment by a Laserfiche employee on this post, that explains it really well.

For purposes of making the form function better on different devices and security of the form, the changes to the new designer are tremendous and very helpful.  And there are some really fantastic changes with things like Field Rules.  But the trade-off is there are still limitations in what we can code in the new designer that we were used to being able to do in the classic designer.

Here's some notes on your specific requests:

  • Title, that displays name of the form in browser:

    • There have been multiple requests for this functionality, but as of the current release (Forms 11 Update 5 / Version 11.0.2311) this isn't currently possible.

  • Phone and SSN masking

    • There is now built-in functionality that can handle much of this as of the current release (Forms 11 Update 5 / Version 11.0.2311).  There was also some code shared on this post that worked in Forms 11 Update 3 / Version 11.0.2212.

  • Proper capitalization

    • This should still be possible via Javascript, but the code will need to be rewritten to utilize the LFForm interface in vanilla Javascript.

  • Restrict negative numbers

    • There is now built-in functionality that can handle much of this as of the current release (Forms 11 Update 5 / Version 11.0.2311).

 

EDIT TO ADD: Here is the "Proper Capitalization" script re-written for the New Designer (tested on Forms 11 Update 5 / Version 11.0.2311): 

var capitalizeMe = LFForm.findFieldsByClassName("capitalizeMe");
capitalizeMe.forEach(function(el) {
  LFForm.onFieldBlur(function(e) {
    var orig = LFForm.getFieldValues(e.options[0]);
    var breakSpaces = orig.split(' ');
    var newWords = [];
    breakSpaces.forEach(function(word) {
      newWords.push(word.charAt(0).toUpperCase() + word.slice(1));
    });
    var newValue = newWords.join(' ');
    LFForm.setFieldValues(e.options[0], newValue);
  }, el);
});

 

3 0
replied on January 23, 2024 Show version history

I'm not sure about the page title, but in v11 Input 5 you can use input mask for phone numbers and SSN. Setting the minimum and/or max for number fields is even easier, either using a hard-coded value or using a validation field rule to utilize a variable.

For title case in JavaScript you could see what's possible using the LFForm object. You may be able to adjust what you have already.

1 0
replied on January 23, 2024 Show version history

Thank you Jonathan Hall, I didn't see the "Use input mask"  option. May be that's because we're on premises, not cloud, are you on Cloud?

0 0
replied on January 23, 2024

On-prem. Range Limiting is only on Number or Currency fields, and the input mask is only on Single Line fields. Input mask is new as of Update 5, but Range Limiting has been there for a while; what's new in Update 4 is the Validation Rule ability.

0 0
replied on January 23, 2024

Here's a video that goes over some the options available when using the Input Mask in Forms 11 Update 5:

5 0
You are not allowed to follow up in this post.

Sign in to reply to this post.