[Summary view] [Print] [Text view]

   1  /*+***********************************************************************************
   2   * The contents of this file are subject to the vtiger CRM Public License Version 1.0
   3   * ("License"); You may not use this file except in compliance with the License
   4   * The Original Code is:  vtiger CRM Open Source
   5   * The Initial Developer of the Original Code is vtiger.
   6   * Portions created by vtiger are Copyright (C) vtiger.
   7   * All Rights Reserved.
   8   *************************************************************************************/
   9  
  10  Settings_Vtiger_Edit_Js('Settings_Webforms_Edit_Js', {}, {
  11      
  12      duplicateWebformNames : {},
  13      
  14      targetFieldsTable : false,
  15      /**
  16       * Function to get source module fields table
  17       */
  18      getSourceModuleFieldTable : function() {
  19          var editViewForm = this.getForm();
  20          if(this.targetFieldsTable == false){
  21              this.targetFieldsTable = editViewForm.find('[name="targetModuleFields"]');
  22          }
  23          return this.targetFieldsTable;
  24      },
  25      
  26      targetModule : false,
  27      
  28      /**
  29       * Function to set target module
  30       */
  31      setTargetModule : function(targetModuleName){
  32          this.targetModule = targetModuleName;
  33      },
  34      
  35      /**
  36       * Function to render selected field UI
  37       */
  38      displaySelectedField : function(selectedField){
  39          var editViewForm = this.getForm();
  40          var targetFieldsTable = this.getSourceModuleFieldTable();
  41          var selectedFieldOption = editViewForm.find('option[value="'+selectedField+'"]');
  42          var selectedFieldInfo = selectedFieldOption.data('fieldInfo');
  43          var selectedOptionLabel = selectedFieldInfo.label;
  44          var selectedOptionName = selectedFieldInfo.name;
  45          var selectedOptionType = selectedFieldInfo.type;
  46          var isCustomField = selectedFieldInfo.customField;
  47          var moduleName = app.getModuleName();
  48          var fieldInstance = Vtiger_Field_Js.getInstance(selectedFieldInfo,moduleName);
  49          var fieldMandatoryStatus = selectedFieldOption.data('mandatory');
  50          var UI = fieldInstance.getUiTypeSpecificHtml();
  51          var UI = jQuery(UI);
  52          var addOnElementExist = UI.find('.add-on');
  53          var parentInputPrepend = addOnElementExist.closest('.input-prepend');
  54          
  55          if((parentInputPrepend.length > 0) && (selectedOptionType != "reference")){
  56              parentInputPrepend.find('.add-on').addClass('overWriteAddOnStyles');
  57          }
  58  
  59          var webFormTargetFieldStructure = '<tr data-name="'+selectedOptionName+'" data-type="'+selectedOptionType+'" data-mandatory-field="'+fieldMandatoryStatus+'" class="listViewEntries">'+
  60                                              '<td class="textAlignCenter">'+
  61                                  '<input type="hidden" class="sequenceNumber" name="selectedFieldsData['+selectedField+'][sequence]" value=""/>'+
  62                                  '<input type="hidden" value="0" name="selectedFieldsData['+selectedField+'][required]"/>'+
  63                                  '<input type="checkbox" value="1" class="markRequired mandatoryField" name="selectedFieldsData['+selectedField+'][required]"/></td>';
  64          
  65          webFormTargetFieldStructure+= '<td class="textAlignCenter">'+
  66                                          '<input type="hidden" value="0" name="selectedFieldsData['+selectedField+'][hidden]"/>'+
  67                                          '<input type="checkbox" value="1" class="markRequired hiddenField" name="selectedFieldsData['+selectedField+'][hidden]"/>'+
  68                                          '</td>'+
  69                                          '<td class="fieldLabel" data-label="'+selectedOptionLabel+'">'+selectedOptionLabel+'</td>'+
  70                                          '<td class="textAlignCenter fieldValue" data-name="fieldUI_'+selectedOptionName+'"></td>';
  71                  
  72          if(isCustomField){
  73              webFormTargetFieldStructure+=    '<td>'+app.vtranslate('JS_LABEL')+":"+selectedOptionLabel;
  74          } else {
  75              webFormTargetFieldStructure+=    '<td>'+selectedField;
  76          }
  77          
  78          webFormTargetFieldStructure+=    '<div class="pull-right actions">'+
  79                                          '<span class="actionImages"><a class="removeTargetModuleField"><i class="icon-remove-sign"></i></a></span></div></td></tr>';
  80                  
  81          targetFieldsTable.append(webFormTargetFieldStructure);
  82          targetFieldsTable.find('[data-name="fieldUI_'+selectedOptionName+'"]').html(UI);
  83          
  84          if (UI.has('input.dateField').length > 0){ 
  85                  app.registerEventForDatePickerFields(UI); 
  86          } else if(UI.has('input.timepicker-default').length > 0){ 
  87                  app.registerEventForTimeFields(UI); 
  88          }
  89          if(UI.attr('multiple')){
  90              app.showSelect2ElementView(UI);
  91          } else if((UI.hasClass('chzn-select')) || (UI.find('.chzn-select').length > 0)){
  92              app.changeSelectElementView(UI);
  93          }
  94          if(selectedOptionType == 'reference'){
  95              this.registerAutoCompleteFields(editViewForm);
  96          }
  97      },
  98      
  99      /**
 100       * Function to register event for onchange event for 
 101       * select2 element fro adding and removing fields
 102       */
 103      registerOnChangeEventForSelect2 : function(){
 104          var thisInstance = this;
 105          var editViewForm = this.getForm();
 106          var fieldsTable = this.getSourceModuleFieldTable();
 107          
 108          jQuery('#fieldsList').on('change',function(e){
 109              var element = jQuery(e.currentTarget);
 110              //To handle the options that are removed from select2
 111              if(typeof e.removed != "undefined"){
 112                  var removedFieldObject = e.removed;
 113                  var removedFieldName = removedFieldObject.id; 
 114                  var removedFieldLabel = removedFieldObject.text; 
 115                  var selectedFieldOption = editViewForm.find('option[value="'+removedFieldName+'"]');
 116                  var fieldMandatoryStatus = selectedFieldOption.data('mandatory');
 117                  //To handle the mandatory option that are removed using backspace from select2
 118                  if(fieldMandatoryStatus){
 119                      var existingOptions = element.select2("data");
 120                      var params = {
 121                          'id' : removedFieldName,
 122                          'text' : removedFieldLabel
 123                      }
 124                      existingOptions.push(params);
 125                      //By setting data attribute select2 mandatory options are added back to select2
 126                      element.select2("data",existingOptions);
 127                      thisInstance.triggerLockMandatoryFieldOptions();
 128                  } else {
 129                      //Remove the row with respect to option that are removed from select2
 130                      var selectedFieldInfo = selectedFieldOption.data('fieldInfo');
 131                      var removeRowName = selectedFieldInfo.name;
 132                      fieldsTable.find('tr[data-name="'+removeRowName+'"]').find('.removeTargetModuleField').trigger('click');
 133                      if(element.val().length == 1){
 134                          jQuery('#saveFieldsOrder').attr('disabled',true);
 135                      }
 136                  }
 137              } else if(typeof e.added != "undefined"){
 138                  //To add the row according to option that is selected from select2
 139                  var addedFieldObject = e.added;
 140                  var addedFieldName = addedFieldObject.id;
 141                  thisInstance.displaySelectedField(addedFieldName);
 142                  thisInstance.registerEventToHandleOnChangeOfOverrideValue();
 143              }
 144          })
 145      },
 146      
 147      /**
 148       * Function to register event for making field as required
 149       */
 150      registerEventForMarkRequiredField : function(){
 151          var thisInstance = this;
 152          this.getSourceModuleFieldTable().on('change','.markRequired',function(e){
 153              var message = app.vtranslate('JS_MANDATORY_FIELDS_WITHOUT_OVERRIDE_VALUE_CANT_BE_HIDDEN');
 154              var element = jQuery(e.currentTarget);
 155              var elementRow = element.closest('tr');
 156              var fieldName= elementRow.data('name');
 157              var fieldType = elementRow.data('type');
 158              if(fieldType == "multipicklist"){
 159                  fieldName = fieldName+'[]';
 160              }
 161              var fieldValue = jQuery.trim(elementRow.find('[name="'+fieldName+'"]').val());
 162              var isMandatory = element.closest('tr').data('mandatoryField');
 163              if(isMandatory){
 164                  if(element.hasClass('mandatoryField')){
 165                      element.attr('checked',true);
 166                  }else if(element.hasClass('hiddenField')){
 167                      if(fieldValue == ''){
 168                          element.attr('checked',false);
 169                          thisInstance.showErrorMessage(message);
 170                      }
 171                  }
 172                  e.preventDefault();
 173                  return;
 174              }else{
 175                  if(element.hasClass('mandatoryField')){
 176                      if(element.is(':checked')){
 177                          var hiddenOption = elementRow.find('.hiddenField');
 178                          if(hiddenOption.is(':checked')){
 179                              if(fieldValue == ''){
 180                                  element.attr('checked',false);
 181                                  thisInstance.showErrorMessage(message);
 182                                  e.preventDefault();
 183                                  return;
 184                              }
 185                          }
 186                      }
 187                  }else if(element.hasClass('hiddenField')){
 188                      var mandatoryOption = elementRow.find('.mandatoryField');
 189                      if(mandatoryOption.is(':checked') && fieldValue == ''){
 190                          element.attr('checked',false);
 191                          thisInstance.showErrorMessage(message);
 192                          e.preventDefault();
 193                          return;
 194                      }
 195                  }
 196              }
 197          })
 198      },
 199      
 200      /**
 201       * Function to show error messages
 202       */
 203      showErrorMessage : function(message){
 204          var isAlertAlreadyShown = jQuery('.ui-pnotify').length;
 205          var params = {
 206              text: message,
 207              type: 'error'
 208          };
 209          if(isAlertAlreadyShown <= 0) {
 210              Settings_Vtiger_Index_Js.showMessage(params);
 211          }
 212      },
 213      
 214      /**
 215       * Function to handle target module remove field action
 216       */
 217      registerEventForRemoveTargetModuleField : function(){
 218          var thisInstance = this;
 219          var sourceModuleContainer = this.getSourceModuleFieldTable();
 220          sourceModuleContainer.on('click','.removeTargetModuleField',function(e){
 221              var element = jQuery(e.currentTarget);
 222              var containerRow = element.closest('tr');
 223              var removedFieldLabel = containerRow.find('td.fieldLabel').text();
 224              var selectElement = sourceModuleContainer.find('#fieldsList');
 225              var select2Element = app.getSelect2ElementFromSelect(selectElement);
 226              select2Element.find('li.select2-search-choice').find('div:contains('+removedFieldLabel+')').closest('li').remove();
 227              selectElement.find('option:contains('+removedFieldLabel+')').removeAttr('selected');
 228              if(selectElement.val().length == 1){
 229                  jQuery('#saveFieldsOrder').attr('disabled',true);
 230              }
 231              thisInstance.triggerLockMandatoryFieldOptions();
 232              containerRow.remove();
 233          })
 234      },
 235      
 236      /**
 237       * Function to lock mandatory option in select2
 238       */
 239      lockMandatoryOptionInSelect2 : function(mandatoryFieldLabel){
 240          var sourceModuleContainer = this.getSourceModuleFieldTable();
 241          var fieldsListSelect2Element = sourceModuleContainer.find('#s2id_fieldsList');
 242          fieldsListSelect2Element.find('.select2-search-choice div:contains("'+mandatoryFieldLabel+'")').closest('li').find('a').remove();
 243      },
 244      
 245      /**
 246       * Function to trigger lock mandatory field options in edit mode
 247       */
 248      triggerLockMandatoryFieldOptions : function(){
 249          var editViewForm = this.getForm();
 250          var selectedOptions = editViewForm.find('#fieldsList option:selected');
 251          for(var i=0;i<selectedOptions.length;i++){
 252              var selectedOption = jQuery(selectedOptions[i]);
 253              var selectedFieldInfo = jQuery(selectedOption).data('fieldInfo');
 254              var mandatoryStatus = selectedOption.data('mandatory');
 255              if(mandatoryStatus){
 256                  var selectedFieldLabel = selectedFieldInfo.label;
 257                  this.lockMandatoryOptionInSelect2(selectedFieldLabel);
 258              }
 259          }
 260      },
 261      
 262      /**
 263       * Function to handle on change of target module
 264       */
 265      registerEventToHandleChangeofTargetModule : function(){
 266          var thisInstance =this;
 267          var editViewForm = this.getForm();
 268          editViewForm.find('[name="targetmodule"]').on('change',function(e){
 269              var element = jQuery(e.currentTarget);
 270              var targetModule = element.val();
 271              var existingTargetModule = thisInstance.targetModule;
 272              
 273              if(existingTargetModule == targetModule){
 274                  return;
 275              }
 276              
 277              var params = {
 278              "module" : app.getModuleName(),
 279              "parent" : app.getParentModuleName(),
 280              "view" : "GetSourceModuleFields",
 281              "sourceModule" : targetModule
 282              }
 283              var message = app.vtranslate('JS_LOADING_TARGET_MODULE_FIELDS');
 284              var progressIndicatorElement = jQuery.progressIndicator({
 285                  'message' : message,
 286                  'position' : 'html',
 287                  'blockInfo' : {
 288                      'enabled' : true
 289                  }
 290              });
 291              AppConnector.request(params).then(
 292                  function(data){
 293                      if(data){
 294                          progressIndicatorElement.progressIndicator({
 295                              'mode' : 'hide'
 296                          })
 297                          editViewForm.find('.targetFieldsTableContainer').html(data);
 298                          thisInstance.targetFieldsTable = editViewForm.find('[name="targetModuleFields"]');
 299                          thisInstance.setTargetModule(targetModule);
 300                          thisInstance.registerBasicEvents();
 301                          thisInstance.eventToHandleChangesForReferenceFields();
 302                      }
 303                  },
 304                  function(error){
 305  
 306                  })
 307          })
 308      },
 309      
 310      /**
 311       * Function to add floatNone and displayInlineBlock class for
 312       * add-on element in a form
 313       */
 314      addExternalStylesForElement : function(){
 315          var editViewForm = this.getForm();
 316          var targetModuleFieldsTable = this.getSourceModuleFieldTable();
 317          var addOnElementExist = editViewForm.find('.add-on');
 318          var parentInputPrepend = addOnElementExist.closest('.input-prepend');
 319          if(parentInputPrepend.length > 0 && (!parentInputPrepend.hasClass('input-append'))){
 320              parentInputPrepend.find('.add-on').addClass('overWriteAddOnStyles');
 321          }
 322          targetModuleFieldsTable.find('input.timepicker-default').removeClass('input-small');
 323          targetModuleFieldsTable.find('textarea').removeClass('input-xxlarge').css('width',"80%");
 324          targetModuleFieldsTable.find('input.currencyField').css('width',"210px")
 325      },
 326      
 327      /**
 328       * Function to register Basic Events
 329       */
 330      registerBasicEvents : function(){
 331          var editViewForm = this.getForm();
 332          app.changeSelectElementView();
 333          app.showSelect2ElementView(editViewForm.find('select.select2'));
 334          
 335          this.registerOnChangeEventForSelect2();
 336          this.registerEventForRemoveTargetModuleField();
 337          this.registerEventForMarkRequiredField();
 338          this.triggerLockMandatoryFieldOptions();
 339          this.addExternalStylesForElement();
 340          
 341          /** Register for fields only if field exist in a form**/
 342          if (editViewForm.has('input.dateField').length > 0){
 343              app.registerEventForDatePickerFields(editViewForm);
 344          }
 345          if(editViewForm.has('input.timepicker-default').length > 0){
 346              app.registerEventForTimeFields(editViewForm);
 347          }
 348          //api to support target module fields sortable
 349          this.makeMenuItemsListSortable();
 350          this.registerEventForFieldsSaveOrder();
 351          this.arrangeSelectedChoicesInOrder();
 352          this.registerEventToHandleOnChangeOfOverrideValue();
 353          this.registerAutoCompleteFields(editViewForm);
 354      },
 355      
 356      /**
 357       * Function to handle onchange event of override values
 358       */
 359      registerEventToHandleOnChangeOfOverrideValue : function() {
 360          var thisInstance = this;
 361          var container  = this.getSourceModuleFieldTable();
 362          var fieldRows = container.find('tr.listViewEntries');
 363          jQuery(fieldRows).each(function(key,value){
 364              var fieldRow = jQuery(value);
 365              var fieldName = fieldRow.data('name');
 366              var fieldType = fieldRow.data('type');
 367              if(fieldType == "multipicklist"){
 368                  fieldName = fieldName+'[]';
 369              }
 370              fieldRow.find('[name="'+fieldName+'"]').on('change',function(e){
 371                  var element = jQuery(e.currentTarget);
 372                  var value = jQuery.trim(element.val());
 373                  var mandatoryField = fieldRow.find('.mandatoryField');
 374                  var hiddenField = fieldRow.find('.hiddenField');
 375                  if((value == "") && (mandatoryField.is(':checked')) && (hiddenField.is(':checked'))){
 376                      hiddenField.attr('checked',false);
 377                      thisInstance.showErrorMessage(app.vtranslate('JS_MANDATORY_FIELDS_WITHOUT_OVERRIDE_VALUE_CANT_BE_HIDDEN'));
 378                      return;
 379                  }
 380              })
 381          })
 382      },
 383      
 384      /**
 385       * Function to regiser the event to make the menu items list sortable
 386       */
 387      makeMenuItemsListSortable : function() {
 388          var selectElement = jQuery('#fieldsList');
 389          var select2Element = app.getSelect2ElementFromSelect(selectElement);
 390          
 391          //TODO : peform the selection operation in context this might break if you have multi select element in menu editor
 392          //The sorting is only available when Select2 is attached to a hidden input field.
 393          var select2ChoiceElement = select2Element.find('ul.select2-choices');
 394          select2ChoiceElement.sortable({
 395              'containment': select2ChoiceElement,
 396              start: function() {  },
 397              update: function() { 
 398  
 399              //If arragments of fileds is completed save field order button should be enabled
 400               if(selectElement.val().length > 1){
 401                   jQuery('#saveFieldsOrder').attr('disabled',false);
 402               }
 403              }
 404          });
 405      },
 406      
 407      /**
 408       * Function to save fields order in a webform
 409       */
 410      registerEventForFieldsSaveOrder : function(){
 411          var thisInstance = this;
 412          jQuery('#saveFieldsOrder').on('click',function(e, updateRows){
 413              if(typeof updateRows == "undefined"){
 414                  updateRows = true;
 415              }
 416              var element = jQuery(e.currentTarget);
 417              var selectElement = jQuery('#fieldsList');
 418              var orderedSelect2Options = selectElement.select2("data");
 419              var i = 1;
 420              for(var j = 0;j < orderedSelect2Options.length;j++){
 421                  var chosenOption = orderedSelect2Options[j];
 422                  var chosenValue = chosenOption.id;
 423                  jQuery('tr[data-name="selectedFieldsData['+chosenValue+'][defaultvalue]"]').find('.sequenceNumber').val(i++);
 424              }
 425              if(updateRows){
 426                  thisInstance.arrangeFieldRowsInSequence();
 427                  element.attr("disabled",true);
 428              }
 429          })
 430      },
 431      
 432      /**
 433       * Function to arrange field rows according to selected sequence
 434       */
 435      arrangeFieldRowsInSequence : function() {
 436          var selectElement = jQuery('#fieldsList');
 437          var orderedSelect2Options = selectElement.select2("data");
 438              
 439          //Arrange field rows according to selected sequence
 440          var totalFieldsSelected = orderedSelect2Options.length;
 441          var selectedFieldRows = jQuery('tr.listViewEntries');
 442          for(var index=totalFieldsSelected;index>0;index--){
 443              var rowInSequence = jQuery('[class="sequenceNumber"][value="'+index+'"]',selectedFieldRows).closest('tr');
 444              rowInSequence.insertAfter(jQuery('[name="targetModuleFields"]').find('[name="fieldHeaders"]'));
 445          }
 446      },
 447      
 448      /**
 449       * Function to arrange selected choices in order
 450       */
 451      arrangeSelectedChoicesInOrder : function(){
 452          this.arrangeFieldRowsInSequence();
 453          var selectElement = jQuery('#fieldsList');
 454          var select2Element = app.getSelect2ElementFromSelect(selectElement);
 455  
 456          var choicesContainer = select2Element.find('ul.select2-choices');
 457          var choicesList = choicesContainer.find('li.select2-search-choice');
 458          var selectedOptions = jQuery('tr.listViewEntries');
 459          for(var index=selectedOptions.length ; index > 0  ; index--) {
 460              var selectedRow = selectedOptions[index-1];
 461              var fieldLabel = jQuery(selectedRow).find('.fieldLabel').data('label');
 462              choicesList.each(function(choiceListIndex,element){
 463                  var liElement = jQuery(element);
 464                  if(liElement.find('div').html() == fieldLabel){
 465                      choicesContainer.prepend(liElement);
 466                      return false;
 467                  }
 468              });
 469          }
 470      },
 471      
 472      /**
 473       * Function which will register reference field clear event
 474       * @params - container <jQuery> - element in which auto complete fields needs to be searched
 475       */
 476      registerClearReferenceSelectionEvent : function(container) {
 477          container.on('click','.clearReferenceSelection', function(e){
 478              var element = jQuery(e.currentTarget);
 479              var parentTdElement = element.closest('td');
 480              var fieldNameElement = parentTdElement.find('.sourceField');
 481              fieldNameElement.val('');
 482              parentTdElement.find('.referenceFieldDisplay').removeAttr('readonly').removeAttr('value');
 483              element.trigger(Vtiger_Edit_Js.referenceDeSelectionEvent);
 484              e.preventDefault();
 485          })
 486      },
 487      
 488      /**
 489       * Function to register form for validation
 490       */
 491      registerSubmitEvent : function(){
 492          var editViewForm = this.getForm();
 493          editViewForm.submit(function(e){
 494              //Form should submit only once for multiple clicks also
 495              if(typeof editViewForm.data('submit') != "undefined") {
 496                  return false;
 497              } else {
 498                  if(editViewForm.validationEngine('validate')) {
 499                      editViewForm.data('submit', 'true');
 500                      var displayElementsInForm = jQuery( "input.referenceFieldDisplay" );
 501                      if(typeof displayElementsInForm != "undefined"){
 502                          var noData;
 503                          if(displayElementsInForm.length > 1){
 504                              jQuery(displayElementsInForm).each(function(key,value){
 505                                  var element = jQuery(value);
 506                                  var parentRow = element.closest('tr');
 507                                  var fieldValue = parentRow.find('.sourceField').val()
 508                                  var mandatoryField = parentRow.find('.mandatoryField');
 509                                  if(((fieldValue == '') || (fieldValue == 0)) && (mandatoryField.is(':checked'))){
 510                                      noData = true;
 511                                      return false;
 512                                  }
 513                              })
 514                          }else if(displayElementsInForm.length == 1){
 515                              var parentRow = displayElementsInForm.closest('tr');
 516                              var fieldValue = parentRow.find('.sourceField').val()
 517                              var mandatoryField = parentRow.find('.mandatoryField');
 518                              if(((fieldValue == '')  || (fieldValue == 0)) && (mandatoryField.is(':checked'))){
 519                                  noData = true;
 520                              }
 521                          }
 522                      }
 523                      if(noData){
 524                          var isAlertAlreadyShown = jQuery('.ui-pnotify').length;
 525                          var params = {
 526                              text: app.vtranslate('JS_REFERENCE_FIELDS_CANT_BE_MANDATORY_WITHOUT_OVERRIDE_VALUE'),
 527                              type: 'error'
 528                          };
 529                          if(isAlertAlreadyShown <= 0) {
 530                              Settings_Vtiger_Index_Js.showMessage(params);
 531                          }
 532                          editViewForm.removeData('submit');
 533                          return false;
 534                      }
 535                      //on submit form trigger the recordPreSave event
 536                      var recordPreSaveEvent = jQuery.Event(Vtiger_Edit_Js.recordPreSave);
 537                      editViewForm.trigger(recordPreSaveEvent);
 538                      if(recordPreSaveEvent.isDefaultPrevented()) {
 539                          //If duplicate record validation fails, form should submit again
 540                          editViewForm.removeData('submit');
 541                          return false;
 542                      }
 543                  } else {
 544                      //If validation fails, form should submit again
 545                      editViewForm.removeData('submit');
 546                      // to avoid hiding of error message under the fixed nav bar
 547                      app.formAlignmentAfterValidation(editViewForm);
 548                  }
 549              }
 550          })
 551      },
 552      
 553      /**
 554       * This function will register before saving any record
 555       */
 556      registerRecordPreSaveEvent : function(form) {
 557          var thisInstance = this;
 558          if(typeof form == 'undefined') {
 559              form = this.getForm();
 560          }
 561          
 562          form.on(Vtiger_Edit_Js.recordPreSave, function(e, data) {
 563              var webformName = jQuery('[name="name"]').val();
 564               if(!(webformName in thisInstance.duplicateWebformNames)) {
 565                  thisInstance.checkDuplicate().then(
 566                      function(data){
 567                           thisInstance.duplicateWebformNames[webformName] = true;
 568                          form.submit();
 569                      },
 570                      function(data, err){
 571                          thisInstance.duplicateWebformNames[webformName] = false;
 572                          thisInstance.showErrorMessage(app.vtranslate('JS_WEBFORM_WITH_THIS_NAME_ALREADY_EXISTS'));
 573                      })
 574               }
 575               else {
 576                  if(thisInstance.duplicateWebformNames[webformName] == true){
 577                      form.submit();
 578                      return true;
 579                  } else {
 580                      thisInstance.showErrorMessage(app.vtranslate('JS_WEBFORM_WITH_THIS_NAME_ALREADY_EXISTS'));
 581                  }
 582              }
 583              e.preventDefault();
 584          })
 585      },
 586      
 587      checkDuplicate : function(){
 588          var aDeferred = jQuery.Deferred();
 589          var webformName = jQuery('[name="name"]').val();
 590          var recordId = jQuery('[name="record"]').val();
 591          var params = {
 592              'module' : app.getModuleName(),
 593              'parent' : app.getParentModuleName(),
 594              'action' : 'CheckDuplicate',
 595              'name'     : webformName,
 596              'record' : recordId
 597          }
 598          AppConnector.request(params).then(
 599              function(data) {
 600                  var response = data['result'];
 601                  var result = response['success'];
 602                  if(result == true) {
 603                      aDeferred.reject(response);
 604                  } else {
 605                      aDeferred.resolve(response);
 606                  }
 607              },
 608              function(error,err){
 609                  aDeferred.reject();
 610              }
 611          );
 612          return aDeferred.promise();
 613      },
 614      
 615      /**
 616       * Function to register form for validation
 617       */
 618      registerFormForValidation : function(){
 619          var editViewForm = this.getForm();
 620          editViewForm.submit(function(e){
 621              var displayElementsInForm = jQuery( "input.referenceFieldDisplay" );
 622              if(typeof displayElementsInForm != "undefined"){
 623                  var noData;
 624                  if(displayElementsInForm.length > 1){
 625                      jQuery(displayElementsInForm).each(function(key,value){
 626                          var element = jQuery(value);
 627                          var parentRow = element.closest('tr');
 628                          var fieldValue = parentRow.find('.sourceField').val()
 629                          var mandatoryField = parentRow.find('.mandatoryField');
 630                          if(((fieldValue == '') || (fieldValue == 0)) && (mandatoryField.is(':checked'))){
 631                              noData = true;
 632                              return false;
 633                          }
 634                      })
 635                  }else if(displayElementsInForm.length == 1){
 636                      var parentRow = displayElementsInForm.closest('tr');
 637                      var fieldValue = parentRow.find('.sourceField').val()
 638                      var mandatoryField = parentRow.find('.mandatoryField');
 639                      if(((fieldValue == '')  || (fieldValue == 0)) && (mandatoryField.is(':checked'))){
 640                          noData = true;
 641                      }
 642                  }
 643              }
 644              if(noData){
 645                  var isAlertAlreadyShown = jQuery('.ui-pnotify').length;
 646                  var params = {
 647                      text: app.vtranslate('JS_REFERENCE_FIELDS_CANT_BE_MANDATORY_WITHOUT_OVERRIDE_VALUE'),
 648                      type: 'error'
 649                  };
 650                  if(isAlertAlreadyShown <= 0) {
 651                      Settings_Vtiger_Index_Js.showMessage(params);
 652                  }
 653                  editViewForm.removeData('submit');
 654                  return false;
 655              }
 656          })
 657          var params = app.validationEngineOptions;
 658          params.onValidationComplete = function(editViewForm, valid){
 659              if(valid) {
 660                  jQuery('#saveFieldsOrder').trigger('click',[false]);
 661                  return valid;
 662              }
 663              return false;
 664          }
 665          editViewForm.validationEngine(params);
 666      },
 667      
 668      /**
 669       * Function makes the user list select element mandatory if the roundrobin is checked 
 670       */
 671      registerUsersListMandatoryOnRoundrobinChecked : function() {
 672          var roundrobinCheckboxElement = jQuery('[name="roundrobin"]');
 673          var userListSelectElement = jQuery('[data-name="roundrobin_userid"]');
 674          var userListLabelElement = userListSelectElement.closest('td').prev().find('label');
 675          if(!roundrobinCheckboxElement.is(':checked')){
 676              userListLabelElement.find('span.redColor').addClass('hide');
 677              userListSelectElement.attr('data-validation-engine','');
 678          }
 679          roundrobinCheckboxElement.change(function(){
 680              if(jQuery(this).is(':checked')){
 681                  userListLabelElement.find('span.redColor').removeClass('hide');
 682                  userListSelectElement.attr('data-validation-engine','validate[required,funcCall[Vtiger_Base_Validator_Js.invokeValidation]]');
 683              }
 684              else{
 685                  userListLabelElement.find('span.redColor').addClass('hide');
 686                  userListSelectElement.attr('data-validation-engine','');
 687              }
 688          });
 689      },
 690      
 691      /**
 692       * Function to append popup reference module names if exist
 693       */
 694      eventToHandleChangesForReferenceFields : function(){
 695          var thisInstance = this;
 696          var editViewForm = this.getForm();
 697          var referenceModule = editViewForm.find('[name="popupReferenceModule"]');
 698          if(referenceModule.length > 1){
 699              jQuery(referenceModule).each(function(key,value){
 700                  var element = jQuery(value);
 701                  thisInstance.appendPopupReferenceModuleName(element);
 702              })
 703          }else if(referenceModule.length == 1){
 704              thisInstance.appendPopupReferenceModuleName(referenceModule);
 705          }
 706      },
 707      
 708      appendPopupReferenceModuleName : function(element){
 709          var referredModule = element.val();
 710          var fieldName = element.closest('tr').data('name');
 711          var referenceName = fieldName.split('[defaultvalue]');
 712          referenceName = referenceName[0]+'[referenceModule]';
 713          var html = '<input type="hidden" name="'+referenceName+'" value="'+referredModule+'" class="referenceModuleName"/>'
 714          element.closest('td').append(html);
 715          element.closest('td').find('[name="'+fieldName+'_display"]').addClass('referenceFieldDisplay').removeAttr('name');
 716      },
 717      
 718      setReferenceFieldValue : function(container, params) {
 719          var sourceField = container.find('input[class="sourceField"]').attr('name');
 720          var fieldElement = container.find('input[name="'+sourceField+'"]');
 721          var fieldDisplayElement = container.find('.referenceFieldDisplay');
 722          var popupReferenceModule = container.find('input[name="popupReferenceModule"]').val();
 723  
 724          var selectedName = params.name;
 725          var id = params.id;
 726  
 727          fieldElement.val(id)
 728          fieldDisplayElement.val(selectedName).attr('readonly',true);
 729          fieldElement.trigger(Vtiger_Edit_Js.referenceSelectionEvent, {'source_module' : popupReferenceModule, 'record' : id, 'selectedName' : selectedName});
 730  
 731          fieldDisplayElement.validationEngine('closePrompt',fieldDisplayElement);
 732      },
 733      
 734      referenceCreateHandler : function(container) {
 735          var thisInstance = this;
 736          var referenceFieldName = container.attr('data-name');
 737          var postQuickCreateSave  = function(data) {
 738              container = jQuery('td[data-name="'+referenceFieldName+'"]');
 739              var params = {};
 740              params.name = data.result._recordLabel;
 741              params.id = data.result._recordId;
 742              thisInstance.setReferenceFieldValue(container, params);
 743          }
 744  
 745          var referenceModuleName = this.getReferencedModuleName(container);
 746          var quickCreateNode = jQuery('#quickCreateModules').find('[data-name="'+ referenceModuleName +'"]');
 747          if(quickCreateNode.length <= 0) {
 748              Vtiger_Helper_Js.showPnotify(app.vtranslate('JS_NO_CREATE_OR_NOT_QUICK_CREATE_ENABLED'))
 749          }
 750          quickCreateNode.trigger('click',{'callbackFunction':postQuickCreateSave});
 751      },
 752      
 753      /**
 754       * Function which will handle the registrations for the elements 
 755       */
 756      registerEvents : function() {
 757          var form = this.getForm();
 758          this._super();
 759          this.registerEventToHandleChangeofTargetModule();
 760          this.registerBasicEvents(form);
 761          var targetModule = form.find('[name="targetModule"]').val();
 762          this.setTargetModule(targetModule);
 763          this.registerUsersListMandatoryOnRoundrobinChecked();
 764          //api to support reference field related actions
 765          this.referenceModulePopupRegisterEvent(form);
 766          this.registerClearReferenceSelectionEvent(form);
 767          this.registerReferenceCreate(form);
 768          this.eventToHandleChangesForReferenceFields();
 769          this.registerRecordPreSaveEvent(form); 
 770           this.registerSubmitEvent(); 
 771      }
 772  })