Announcement

Collapse
No announcement yet.

Human readable custom input field for an IBAN number?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Human readable custom input field for an IBAN number?

    I need to store an IBAN number and I already have a custom varchar field to which I have also added a pattern to validate the number.
    This works, but it would be nicer if I could enter the number and display it in a human readable form.​

    For example, I currently have to add the number like this, which is hard to read: DE07123412341234123412

    It would be much nicer if I could enter the number in packs of 4 and 2.

    DE07 1234 1234 1234 1234 12​

    Perhaps it would be possible to remove the spaces from the input and then validate and save the result.

    But how to display the number again with spaces?

    Is there also a way to override the pattern error mesaage? For non-technical persons a regex pattern error message is pretty confusing.

  • #2
    Hi Thomas,

    there’s an extension by Eblasoft called Mask Field

    Espocrm, This extension is for enhancing espocrm both Phone & Varchar with mask feature. You can set mask input for any existing varchar field in addition to the new fields. For Phone you have Global Phone Mask with the ability to ovverride from the phone field defs in the field manager. You also can select if you want to save the input including the mask format or only the original input. To see this extension an action please check our demo.Read information about the extension . Release notes are available here.


    before buying contact eymen-elkum using the chat on the website, as I think the website gives you the old version and to get the new one you have to use his Support Portal.
    Last edited by Kharg; 07-13-2023, 02:25 PM.

    Comment


    • #3
      That extension is your best bet. There no other alternative at the moment.

      It got feature request twice (1 by me and 1 by another user).

      Comment


      • #4
        Thanks for the replies.

        It definitely looks like a nice add-on. Just not sure how it would work with regex validation.

        When I tried to program something, I tried to remove the spaces from the input string with a "Before Save Custom Script" and had a RegEx pattern in the field definition. However, the field was evaluated before the script was executed and did not work.

        I now have an "API Before Save Script" that seems to work, but is not as sophisticated as the add-on. It strips the blanks from the input and then validates with a RegEx.
        In case of an error, a message is thrown.

        With this solution I can at least copy and paste IBANs with spaces or type them with spaces to check them visually.


        iBAN = varchar field

        Code:
        iBAN = string\replace(iBAN, ' ', '');
        
        ifThenElse(
        string\test(iBAN, '(^(?:((?:IT|SM)\d{2}[A-Z]{1}\d{22})|(NL\d{2}[A-Z]{4}\d{10})|(LV\d{2}[A-Z]{4}\d{13})|((?:BG|GB|IE)\d{2}[A-Z]{4}\d{14})|(GI\d{2}[A-Z]{4}\d{15})|(RO\d{2}[A-Z]{4}\d{16})|(MT\d{2}[A-Z]{4}\d{23})|(NO\d{13})|((?:DK|FI)\d{16})|((?:SI)\d{17})|((?:AT|EE|LU|LT)\d{18})|((?:HR|LI|CH)\d{19})|((?:DE|VA)\d{20})|((?:AD|CZ|ES|MD|SK|SE)\d{22})|(PT\d{23})|((?:IS)\d{24})|((?:BE)\d{14})|((?:FR|MC|GR)\d{25})|((?:PL|HU|CY)\d{26}))$)'),
        iBAN = iBAN,
        $checkfailed = true
             );
        
        if ($checkfailed == true && iBAN != '') {
            recordService\throwBadRequest("IBAN is incorrect.");
        }​
        Maybe there is a better way to do it, but at least it works. And I'm not really a programmer.
        Last edited by ThomasB; 07-17-2023, 12:37 PM.

        Comment


        • esforim
          esforim commented
          Editing a comment
          Very cool.

      • #5
        I think you can make your regex even better as the first 2 characters are always the country initials

        Comment


        • #6
          Maybe. I copied them from the https://regex101.com/ library. But each country has different lenght in digits. E. g. Norway 15 and Germany 20

          See: https://www.iban.com/structure
          Last edited by ThomasB; 07-17-2023, 01:48 PM.

          Comment


          • esforim
            esforim commented
            Editing a comment
            Which setting do you use for Regex101? Most of my Regex work with the default setting in Reg101, but some it only work with Reg101 but not in EspoCRM.

        • #7
          Oh, and this is just a very simple check. It only checks the country code and length and does not perform a checksum check.

          I found this php library: https://github.com/globalcitizen/php-iban

          But that is far beyond my capability to include that.

          Maybe it would be an idea for some programmers to provide such an extension for SEPA checks (BIC, IBAN) etc.

          Comment


          • #8
            Hi,
            i think another solution is front-end : https://github.com/arhs/iban.js
            it'seems this library can handle "formating" (with space or -)

            Comment


            • #9
              Not perfect, but work for me..

              if iban is valid, then the record is saved silent with human readable (bban)
              if not, a confirm dialog show.
              Maybe someone with front-end skill make it better on event keypress or ... and not on save.

              download : https://github.com/arhs/iban.js
              put iban.js in client/custom/lib/iban.js​

              For Account
              client/custom/Espo/Custom/Resources/metadata/clientDefs/Account.json
              PHP Code:
              {
                  
              "recordViews": {
                      
              "detail""custom:views/account/record/detail"
                  
              }
              }
              ​ 
              field iban = ibanNumber in my case.

              client/custom/src/views/account/record/detail.js
              PHP Code:
              define('custom:views/account/record/detail', ['views/record/detail'], function (Dep) {

                  return 
              Dep.extend({
                      
                      
              actionSave: function () {

                          
              let ibanNumber this.model.get('ibanNumber');
                          if (
              ibanNumber){
                              if (
              IBAN.isValid(ibanNumber) ){
                                  
              this.model.set('ibanNumber'IBAN.printFormat(ibanNumber' ') );
                                  
              Dep.prototype.actionSave.call(this);
                               }else{
                                  
              this.confirm({
                                  
              messagethis.translate('Are you sure you want to save Account with bad iban?'),
                                  
              backdrop'static',
                                  
              confirmTextthis.translate('Confirm'),
                                  }).
              then(() => {
                                      
              this.model.set('ibanNumber'IBAN.printFormat(ibanNumber' ') );
                                      
              Dep.prototype.actionSave.call(this);
                                  });
                               }
                          }else{
                              
              Dep.prototype.actionSave.call(this);
                          } 
                      },
                      
                      
              _initInlineEditSave: function () {
                          
              this.listenTo(this.recordHelper'inline-edit-save', (fieldo) => {
                              
              let ibanNumber this.model.get('ibanNumber');

                              if (
              field === 'ibanNumber' && ibanNumber && !IBAN.isValid(ibanNumber) ){
                                  
              this.confirm({
                                      
              messagethis.translate('Are you sure you want to save Account with bad iban?'),
                                      
              backdrop'static',
                                      
              confirmTextthis.translate('Confirm'),
                                  }).
              then(() => {
                                      
              this.model.set('ibanNumber'IBAN.printFormat(ibanNumber' ') );
                                      
              this.inlineEditSave(fieldo);
                                  });
                              }else{
                                  
              this.inlineEditSave(fieldo);
                              }
                              
                          });
                      },

                  });
              });  
              ​ 
              custom/Espo/Custom/Resources/metadata/app/client.json
              PHP Code:
              {
                  
              "scriptList": [
                      
              "__APPEND__",
                      
              "client/custom/lib/iban.js"
                  
              ],
                  
              "developerModeScriptList": [
                      
              "__APPEND__",
                          
              "client/custom/lib/iban.js"
                  
              ]
              }
              ​ 

              Comment


              • #10
                Originally posted by item View Post

                For Account
                client/custom/Espo/Custom/Resources/metadata/clientDefs/Account.json
                Is the path correct?

                From the directory layout this seems to be more correct: custom/Espo/Custom/Resources/metadata/clientDefs/Account.json​

                Just trying to test your approach.
                Last edited by ThomasB; 09-19-2023, 09:25 AM.

                Comment


                • #11
                  Hi,
                  i have now i more nice solution, more usuable and all entity ready
                  i will post solution tonigth

                  Comment


                  • #12
                    Ok, not sure if I did something wrong. but the test iban: DE91100000000123456789 always says its invalid. After saving, the IBAN number is formatted, so I think the modifications I did are working.

                    Waiting for your nicer solution now.
                    Last edited by ThomasB; 07-24-2023, 12:15 PM.

                    Comment


                    • #13
                      In : /client/custom/res/templates/fields/iban-number/detail.tpl
                      PHP Code:
                      {{#if isNotEmpty~}}
                              
                      <a
                                  role
                      ="button"
                                  
                      data-action="copyToClipboard"
                                  
                      class="pull-right text-soft"
                                  
                      title="{{translate 'Copy to Clipboard'}}"
                              
                      ><span></span></a>
                          {{
                      value}}
                      {{~else}}
                      {{
                      #if valueIsSet}}<span class="none-value">{{translate 'None'}}</span>{{else}}
                      <span class="loading-value">...</span>{{/if}}
                      {{/if}}
                      ​ 
                      in
                      /client/custom/src/views/fields/iban-number.js

                      PHP Code:
                      define('custom:views/fields/iban-number', ['views/fields/varchar'], function (Dep) {

                          return 
                      Dep.extend(/** @lends module:views/fields/varchar.Class# */{
                              
                              
                      detailTemplate'custom:fields/iban-number/detail',

                              
                      setup: function () {
                                  
                      Dep.prototype.setup.call(this);
                                  
                      this.events['click [data-action="copyToClipboard"]'] = () => this.copyToClipboard();
                              },

                              
                      afterRender: function () {
                                  
                      Dep.prototype.afterRender.call(this);

                                  
                      let renderedValue this.model.get(this.name);
                                  
                                  if (
                      IBAN.isValid(renderedValue)){
                                       
                      this.$el.find('[data-action="copyToClipboard"]').addClass('fas fa-check');
                                      
                      this.$el.removeClass('text-muted');
                                  }else{
                                      
                      this.$el.find('[data-action="copyToClipboard"]').addClass('fas fa-ban');
                                      
                      this.$el.addClass('text-muted');
                                  }
                                  
                      this.$el.on('change', (e) => {
                                      
                      let value this.model.get(this.name);
                                      if (
                      IBAN.isValid(value)){
                                          
                      this.$el.removeClass('text-muted');
                                          
                      this.model.setthis.name IBAN.printFormat(value' ') );
                                      }
                                  });
                              },
                          });
                      });
                      ​ 


                      in sample ibanNumber field :
                      /custom/Espo/Custom/Resources/metadata/entityDefs/Account.json
                      PHP Code:
                      {
                          
                      "fields": {
                              
                      "ibanNumber": {
                                  
                      "type""varchar",
                                  
                      "maxLength"20,
                                  
                      "options": [],
                                  
                      "isCustom"true,
                                  
                      "view""custom:views/fields/iban-number"
                              
                      }
                          }
                      }
                      ​ 
                      And from previous post :
                      same :
                      custom/Espo/Custom/Resources/metadata/app/client.json
                      and same :
                      download : https://github.com/arhs/iban.js
                      put iban.js in client/custom/lib/iban.js​​

                      result :
                      Click image for larger version  Name:	Screenshot 2023-07-23 at 13.46.03.png Views:	0 Size:	9.4 KB ID:	95778 Click image for larger version  Name:	Screenshot 2023-07-23 at 13.46.20.png Views:	0 Size:	9.3 KB ID:	95779
                      Attached Files
                      Last edited by item; 07-24-2023, 12:37 PM.

                      Comment


                      • item
                        item commented
                        Editing a comment
                        because i have not a good skill.
                        i have try to have in color "error or warning or success" the icon.. but not success.
                        so i have success in "text-muted"

                      • Kharg
                        Kharg commented
                        Editing a comment
                        Shouldn’t be that hard to color it. If I find the time I will make an extension as a new field if you don’t mind.

                      • item
                        item commented
                        Editing a comment
                        Find Kharg,

                        i have a little changed, so the valid icon is hidden after 3 secondes.. so it's not a christmas lighting
                        only bad is "red icon"

                        if (IBAN.isValid(renderedValue)){
                        this.$el.find('[data-action="copyToClipboard"]').addClass('text-success fas fa-check');
                        this.$el.removeClass('text-muted');
                        setTimeout(() => {
                        this.$el.find('[data-action="copyToClipboard"]').addClass('hidden');
                        }, 500);
                        }else{
                        this.$el.find('[data-action="copyToClipboard"]').addClass('text-danger fas fa-ban');
                        this.$el.addClass('text-muted');
                        }

                    • #14
                      "maxLength": 20,

                      The max valid length for SEPA IBAN is 31 (Malta). Non Sepa Russia is 33. So I think this field should be at least 31 long?

                      Comment


                      • item
                        item commented
                        Editing a comment
                        Hi,
                        no no... i just put sample my field ibanNumber..

                        you just need add this line in your fields :

                        "view": "custom:views/fields/iban-number"

                        in my case, this is a random length... and we use always iban from belgium.
                    Working...
                    X