Rocket Modern Experience (formerly LegaSuite)

 View Only
  • 1.  Limit Character Count in Date Picker Widget

    Posted 07-16-2024 14:11
    Edited by Mike Warren 07-16-2024 16:16

    Using MX Web 10.4.3 we've run into an issue with being unable to limit the number of characters that users key into a Date Picker widget. 

    Here's the use case:

    • Most date fields in our legacy application are 8 characters long (ie. MMDDYYYY)
    • Some are only 6 characters long (ie. MMDDYY)
    • If a user keys "07162024" into a short date field, the input to the host is actually "071620" (a difference of 4 years!)
    • We can add a label to the screen advising users of the correct format, but we all know how good users are at reading and following instructions...

    Is there a way to limit the number of characters? I would assume so since there's an "Auto-tab" property? The format mask is correct but doesn't act as validation. I set the widget to disallow invalid dates, but the erroneous input above uses valid ones. I've also tried using the "maxlength" HTML attribute without success.

    Suggestions?

    EDIT - The QC team and I are getting different results, and I can't seem to duplicate the incorrect values. But I also didn't see a way to delete this post while I research further!

    ------------------------------
    Mike Warren
    Software Development Manager, GOLD Team Leader
    CU*Answers
    Grand Rapids MI US
    ------------------------------



  • 2.  RE: Limit Character Count in Date Picker Widget

    Posted 07-17-2024 03:05
    Edited by Roger Van Valen 07-17-2024 03:05

    Hi Mike,

    What is are the formats for host side and page side in your date pickers?

    A small test I did just on the sign-on screen of an IBM i in the lab, with date fields of 6, 8 and 10 long seem to work as expected for me.

    I've used the following formats:

    • Host field: 10 position long dates: 
      • [MM-DD-YYYY]MMDDYY
      • [MM-DD-YYYY]MMDDYYYY
      • [MM-DD-YYYY]EEEE d mmmm yyyy

    • Host field: 8 position long dates
      •  [MMDDYYYY]MMDDYY
      • [MMDDYYYY]MMDDYYYY
      • [MMDDYYYY]EEEE d mmmm yyyy

    • Host field: 6 position long dates
      • [MMDDYY]MMDDYY
      • [MMDDYY]MMDDYYYY
      • [MMDDYY]EEEE d mmmm yyyy

    In any of the fields of these format, when I either type 071624 or 07162024, the date will become the 16th July of 2024. (in 6 digits 071624).

    As you have seen there is currently no property to configure the length for the date picker widget. 

    Technically it will be possible to add some custom JavaScript to enforce a length, in a similar way we have our 'FormattingAndMaskingExample'  for a creditcard number checks example in our Github example repository: https://github.com/RocketSoftware/legasuite-web-examples/tree/master/FormattingAndMaskingExample

    However, I am wondering why it behaves different for you than it does for me, perhaps there's a catch with slightly different formats. Perhaps you have found an area where we can improve the product. Please let me know the format you are using so we can find out what is happening.

    Regards,

    Roger van Valen.



    ------------------------------
    Roger van Valen
    Senior manager, software engineering
    Rocket Software
    Dordrecht, The Netherlands
    ------------------------------



  • 3.  RE: Limit Character Count in Date Picker Widget

    Posted 07-17-2024 08:49

    Roger,

    Thank you for the GitHub link! I talked to our QC manager. Turns out that the use case she presented was for a different page that she couldn't remember. She offered a different use case this time. And I learned my lesson my testing it first to recreate her results!

    The issue affects both 6-digit and 8-digit host date fields, but I'll stay with a 6-digit scenario. Here's background info first, as we're migrating from LegaSuite GUI (8.5.4) to MX Web right now and the GUI experience is what she's comparing against.

    • LegaSuite GUI doesn't offer a date widget. We used a text widget with a small button almost touching its right edge to create a loose resemblance to a date widget.
    • Auto-tab and character limits were turned on for the text widgets. So, entering something like "010120241" (obviously not a valid date) into the a 6-digit text widget wasn't possible.
    • In MX Web the date widgets don't offer a character limit and the auto-tab property has no effect. So, a user expecting "help" from the UI on restricting data length and allowing data to overflow into following fields gets an unexpected experience. In this case, the invalid date does indeed get parsed down to a date (format mask "[MMddyy]MMM dd, yyyy") but the date is "Oct 12, 1941"
    • I'm being asked to create the same experience that users had in LegaSuite GUI with the text/button combination. 


    ------------------------------
    Mike Warren
    Software Development Manager, GOLD Team Leader
    CU*Answers
    Grand Rapids MI US
    ------------------------------



  • 4.  RE: Limit Character Count in Date Picker Widget

    Posted 07-17-2024 09:20

    Hi Mike,

    The date widget in MX Web is indeed not exactly the same as the way date were done in Rocket MX Desktop aka LegaSuite GUI.

    Therefore, the behavior may differ a bit. 

    As your display format is MMM dd, yyyy, the widget should also allow the user to type this format.
    So typing Oct 12, 2024 should be possible too.

    As typing the display date should be possible, the length should not be restricted to 6 characters in this case.

    Technically, using the method from the GitHub example, nearly everything will be possible. You could check and limit the size if there's only digits, and still allow longer lengths when it starts with letters instead of digits, or anything like that. The question is of course how much would you do to prevent a user from making a mistake. The situation with the extra digit (010120241) indeed gives a date that is unexpected. A length setting may prevent that from happening, but would e.g. not help for a common mistake made between European and American date notation: 03042024 would read as April 3 in Europe, but as March 4 in USA. 

    The web datepicker has another advantage over the GUI controls, it supports an 'error'  state. When really typing an invalid date, e.g. 14142024, you will see that the widget will get an 'error' state. In the default theme (Modern) this will mean it get's a red border (this is configurable in the theme, so may appear different when using a different theme).

    Hope this helps,

    Regards,



    ------------------------------
    Roger van Valen
    Senior manager, software engineering
    Rocket Software
    Dordrecht, The Netherlands
    ------------------------------



  • 5.  RE: Limit Character Count in Date Picker Widget

    Posted 07-19-2024 03:51

    Hi Mike,

    After looking a bit more detailed to the request, I can mention that the date picker widget has a client side JavaScript method to limit the input length.

    This method is called "setMaxInputLength()".

    To use this, you could write a small Client side JavaScript in the application:

    With the following contents:

    function onAppear(event) {
    	this.setMaxInputLength(8);
    }
    
    

    Next you can add the client side script function to the qooxdoo 'appear' event in the events of your date picker widgets. Like this:

    This will limit the input of the date picker widgets to 8 characters.

    Obviously you can use other values, or even have multiple functions if you have dates that would allow 6, 8 or 10 characters of input.

    Do note that the limit is on the input, always. So when using a format like "MMM dd, YYYY", this limit would allow to type "07192024" but not "Jul 19, 2024" as that would be more than 8 characters.

    Hope this helps,

    Regards,

    Roger.



    ------------------------------
    Roger van Valen
    Senior manager, software engineering
    Rocket Software
    Dordrecht, The Netherlands
    ------------------------------