Announcement

Collapse
No announcement yet.

dynamic extra field like the ones on "Email" and "Phone"

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

  • dynamic extra field like the ones on "Email" and "Phone"

    Hello,

    How to have "Adding Button" to add dynamic extra field like the ones on "Email" and "Phone". I want to be able to add extra field under "varchar" and "Date" and of course to be recorded to db.

    I have tried to modify varchar.js and date.js under directory \client\src\views\fields\ and modifying template files varchar and date under directory \client\res\templates\fields

    But I can't get it to work!

    Other alternative option which would be much better is to have same function but on Panel instead of the field itself. on Details view, I want the user to be able to click on "Add" button to be able dynamically adding extra repeated panel for other person, Can you please help me to achieve this!

    Please see attached image

    Thanks

  • #2
    Hi
    with panels can't help.
    What was the problem? You had add button, but it didn't work, or you didn't had the button after modification? (Did you refresh the page? Js and tmp files can be cached)

    Comment


    • #3
      Hello,

      Well I have tried so many things in the past few days and they all seemed not to work for me and I gave up . If you can not help with panels, then would you please help me to configure "Plus Button" for varchar and date fields as I want to be able to enter multiple names and dates as shown on the attached image.

      Edit: Just to make myself clear, I didn't create the button yet, the attached image is photoshop. It is example of what I want but I don't know how to do it! So please provide me with a code and tell me where to place it in the script

      Thank you
      Last edited by start5623; 10-26-2016, 06:58 AM.

      Comment


      • #4
        Hello
        At first - do not change core files, after upgrade you can lose your modification

        create own view and templates, where will be the plus button (you can copy some from phoneNumber templates)

        in the view do not forget to add handler for click plus button (click [data-action="addPhoneNumber"] in phone filed) in the events section, and about fetching data

        change field view in entityDefs

        use phone or email as example

        Comment


        • #5
          Hello,
          Originally posted by tanya View Post
          create own view and templates, where will be the plus button (you can copy some from phoneNumber templates)
          Where exactly should I create my own view and templates. I am assuming the only places would be under \client\res\templates\fields\varcharPlus\ and \client\src\views\fields\varcharPlus.js

          So I should copy all tpl files from \client\res\templates\fields\phone\ and modify them and do same thing to the phone.js from \views\fields\phone.js. if you answer with yes, then I have tried that already and it didn't work at all.

          Would you please do it for me for varchar type and I will try to follow your steps with Date type. It should be simple to you if you know how to do it.

          So I want varcharPlus field type to show up in the "Add field" list under the "Entity Manager" as showing on attached image.


          Thank you very much and I really appropriate your help
          Last edited by start5623; 10-26-2016, 01:32 PM.

          Comment


          • #6
            if you wanna see the field in the field list, learn this folder /application/Espo/Resources/metadata/fields (there you have to set field params) (...."fieldDefs":{ "type":"jsonArray"}....)
            how field has to work - /client/src/views/fields
            field templates - /client/res/templates/fields

            Comment


            • #7
              Ok, if you don't mind, I will have to do that step by step with you as I need to get this part done.

              Please edit all my mistakes ,thanks

              /application/Espo/Resources/metadata/fields/varcharPlus.json


              Code:
              {
                 "params":[
                    {
                       "name":"required",
                       "type":"bool",
                       "default":false
                    },
                 ],
                 "notActualFields":[
                    "data"
                 ],
                 "notCreatable": true,
                 "filter": true,
                 "fieldDefs":{
                    "type":"jsonArray"
                 },
                 "translatedOptions": true
              }
              /client/src/views/fields/varcharPlus.js
              Code:
              Espo.define('views/fields/VarcharPlus', 'views/fields/base', function (Dep) {
              
                  return Dep.extend({
              
                      type: 'VarcharPlus',
              
                      editTemplate: 'fields/VarcharPlus/edit',
              
                      detailTemplate: 'fields/VarcharPlus/detail',
              
                      listTemplate: 'fields/VarcharPlus/list',
              
                      searchTemplate: 'fields/VarcharPlus/search',
              
                      validations: ['required'],
              
                      validateRequired: function () {
                          if (this.isRequired()) {
                              if (!this.model.get(this.name) || !this.model.get(this.name) === '') {
                                  var msg = this.translate('fieldIsRequired', 'messages').replace('{field}', this.translate(this.name, 'fields', this.model.name));
                                  this.showValidationMessage(msg, 'div.VarcharPlus-block:nth-child(1) input');
                                  return true;
                              }
                          }
                      },
              
                      data: function () {
                          var VarcharPlusData;
                          if (this.mode == 'edit') {
                              VarcharPlusData = Espo.Utils.cloneDeep(this.model.get(this.dataFieldName));
              
                              if (this.model.isNew() || !this.model.get(this.name)) {
                                  if (!VarcharPlusData || !VarcharPlusData.length) {
                                       VarcharPlusData = [{
                                          VarcharPlus: this.model.get(this.name) || '',
                                          primary: true,
                                          type: this.defaultType
                                      }];
                                  }
                              }
                          } else {
                              VarcharPlusData = this.model.get(this.dataFieldName) || false;
                          }
              
                          if ((!VarcharPlusData || VarcharPlusData.length === 0) && this.model.get(this.name)) {
                               VarcharPlusData = [{
                                  VarcharPlus: this.model.get(this.name),
                                  primary: true,
                                  primary: true,
                                  type: this.defaultType
                              }];
                          }
              
                          return _.extend({
                              VarcharPlusData: VarcharPlusData
                          }, Dep.prototype.data.call(this));
                      },
              
                      events: {
                          'click [data-action="switchvarcharPlusProperty"]': function (e) {
                              var $target = $(e.currentTarget);
                              var $block = $(e.currentTarget).closest('div.VarcharPlus-block');
                              var property = $target.data('property-type');
              
              
                              if (property == 'primary') {
                                  if (!$target.hasClass('active')) {
                                      if ($block.find('input.VarcharPlus').val() != '') {
                                          this.$el.find('button.VarcharPlus-property[data-property-type="primary"]').removeClass('active').children().addClass('text-muted');
                                          $target.addClass('active').children().removeClass('text-muted');
                                      }
                                  }
                              } else {
                                  if ($target.hasClass('active')) {
                                      $target.removeClass('active').children().addClass('text-muted');
                                  } else {
                                      $target.addClass('active').children().removeClass('text-muted');
                                  }
                              }
                              this.trigger('change');
                          },
              
                          'click [data-action="removevarcharPlus"]': function (e) {
                              var $block = $(e.currentTarget).closest('div.VarcharPlus-block');
                              if ($block.parent().children().size() == 1) {
                                  $block.find('input.VarcharPlus').val('');
                              } else {
                                  this.removevarcharPlusBlock($block);
                              }
                              this.trigger('change');
                          },
              
                          'change input.VarcharPlus': function (e) {
                              var $input = $(e.currentTarget);
                              var $block = $input.closest('div.VarcharPlus-block');
              
                              if ($input.val() == '') {
                                  if ($block.parent().children().size() == 1) {
                                      $block.find('input.VarcharPlus').val('');
                                  } else {
                                      this.removevarcharPlusBlock($block);
                                  }
                              }
              
                              this.trigger('change');
              
                              this.manageAddButton();
                          },
              
                          'keypress input.VarcharPlus': function (e) {
                              this.manageAddButton();
                          },
              
                          'paste input.VarcharPlus': function (e) {
                              setTimeout(function () {
                                  this.manageAddButton();
                              }.bind(this), 10);
                          },
              
                          'click [data-action="addvarcharPlus"]': function () {
                              var data = Espo.Utils.cloneDeep(this.fetchvarcharPlusData());
              
                              o = {
                                  VarcharPlus: '',
                                  primary: data.length ? false : true,
                                  type: false
                              };
              
                              data.push(o);
              
                              this.model.set(this.dataFieldName, data, {silent: true});
                              this.render();
                          },
                      },
              
                      afterRender: function () {
                          Dep.prototype.afterRender.call(this);
                          this.manageButtonsVisibility();
                          this.manageAddButton();
                      },
              
                      removevarcharPlusBlock: function ($block) {
                          var changePrimary = false;
                          if ($block.find('button[data-property-type="primary"]').hasClass('active')) {
                              changePrimary = true;
                          }
                          $block.remove();
              
                          if (changePrimary) {
                              this.$el.find('button[data-property-type="primary"]').first().addClass('active').children().removeClass('text-muted');
                          }
              
                          this.manageButtonsVisibility();
                          this.manageAddButton();
                      },
              
                      manageAddButton: function () {
                          var $input = this.$el.find('input.VarcharPlus');
                          c = 0;
                          $input.each(function (i, input) {
                              if (input.value != '') {
                                  c++;
                              }
                          });
              
                          if (c == $input.size()) {
                              this.$el.find('[data-action="addvarcharPlus"]').removeClass('disabled');
                          } else {
                              this.$el.find('[data-action="addvarcharPlus"]').addClass('disabled');
                          }
                      },
              
                      manageButtonsVisibility: function () {
                          var $primary = this.$el.find('button[data-property-type="primary"]');
                          var $remove = this.$el.find('button[data-action="removevarcharPlus"]');
                          if ($primary.size() > 1) {
                              $primary.removeClass('hidden');
                              $remove.removeClass('hidden');
                          } else {
                              $primary.addClass('hidden');
                              $remove.addClass('hidden');
                          }
                      },
              
                      setup: function () {
                          this.dataFieldName = this.name + 'Data';
                          this.defaultType = this.defaultType || this.getMetadata().get('entityDefs.' + this.model.name + '.fields.' + this.name + '.defaultType');
                      },
              
                      fetchvarcharPlusData: function () {
                          var data = [];
              
                          var $list = this.$el.find('div.VarcharPlus-block');
              
                          if ($list.size()) {
                              $list.each(function (i, d) {
                                  var row = {};
                                  var $d = $(d);
                                  row.VarcharPlus = $d.find('input.VarcharPlus').val().trim();
                                  if (row.VarcharPlus == '') {
                                      return;
                                  }
                                  row.primary = $d.find('button[data-property-type="primary"]').hasClass('active');
                                  row.type = $d.find('select[data-property-type="type"]').val();
                                  data.push(row);
                              }.bind(this));
                          }
              
                          return data;
                      },
              
                      fetch: function () {
                          var data = {};
              
                          var adderssData = this.fetchvarcharPlusData() || [];
                          data[this.dataFieldName] = adderssData;
                          data[this.name] = null;
              
                          var primaryIndex = 0;
                          adderssData.forEach(function (item, i) {
                              if (item.primary) {
                                  primaryIndex = i;
                                  return;
                              }
                          });
              
                          if (adderssData.length && primaryIndex > 0) {
                              var t = adderssData[0];
                              adderssData[0] = adderssData[primaryIndex];
                              adderssData[primaryIndex] = t;
                          }
              
                          if (adderssData.length) {
                              data[this.name] = adderssData[0].VarcharPlus;
                          }
              
                          return data;
                      },
              
                      fetchSearch: function () {
                          var value = this.$element.val().trim() || null;
                          if (value) {
                              var data = {
                                  type: 'like',
                                  value: value + '%',
                                  valueText: value
                              };
                              return data;
                          }
                          return false;
                      },
                  });
              
              });

              Comment


              • #8
                AND..

                /client/res/templates/fields/varcharPlus/detail.tpl

                Code:
                {{#if varcharPlusData}}
                    {{#each varcharPlusData}}
                        <div>
                            <a href="name:{{varcharPlus}}" data-varcharPlus="{{varcharPlus}}" data-action="dial">{{varcharPlus}}</a>
                            <span class="text-muted small">({{translateOption type scope=../../scope field=../../name}})</span>
                        </div>
                    {{/each}}
                {{else}}
                        {{#if value}}
                    <a href="name:{{value}}" data-varcharPlus="{{value}}" data-action="dial">{{value}}</a>
                    {{else}}
                        {{translate 'None'}}
                    {{/if}}
                {{/if}}
                /client/res/templates/fields/edit.tpl
                Code:
                <div>
                {{#each varcharPlusData}}
                    <div class="input-group varcharPlus-block">
                        <span class="input-group-btn">
                            <select data-property-type="type" class="form-control">{{options ../params.typeList type scope=../scope field=../name}}</select>        
                        </span>
                        <input type="input" class="form-control varcharPlus" value="{{varcharPlus}}" autocomplete="off">
                        <span class="input-group-btn">
                            <button class="btn btn-default varcharPlus-property{{#if primary}} active{{/if}} hidden" type="button" tabindex="-1" data-action="switchPhoneProperty" data-property-type="primary" data-toggle="tooltip" data-placement="top" title="{{translate 'Primary' scope='VarcharPlus'}}">
                                <span class="glyphicon glyphicon-star{{#unless primary}} text-muted{{/unless}}"></span>
                            </button>
                            <button class="btn btn-link hidden" style="margin-left: 5px;" type="button" tabindex="-1" data-action="removeVarcharPlus" data-property-type="invalid" data-toggle="tooltip" data-placement="top" title="{{translate 'Remove'}}">
                                <span class="glyphicon glyphicon-remove"></span>
                            </button>
                        </span>
                    </div>
                {{/each}}
                </div>
                
                <button class="btn btn-default" type="button" data-action="addVarcharPlus"><span class="glyphicon glyphicon-plus"></span></button>
                /client/res/templates/fields/varcharPlus/list.tpl
                Code:
                <a href="name:{{value}}" data-varcharPlus="{{value}}" data-action="dial" title="{{value}}">{{value}}</a>
                /client/res/templates/fields/varcharPlus/list.tpl
                Code:
                <input type="text" class="main-element form-control input-sm" name="{{name}}" value="{{searchParams.valueText}}" {{#if params.maxLength}} maxlength="{{params.maxLength}}"{{/if}}>
                Last edited by start5623; 10-26-2016, 03:00 PM.

                Comment


                • #9
                  /client/src/views/fields/varchar-plus.js
                  Espo.define('views/fields/varchar-plus', 'views/fields/base', function (Dep) { ..... listTemplate: 'fields/varchar-plus/list', etc.... template folder - varchar-plus

                  you can use linkMultiple as example for case format

                  in templates - you don't need to call on vachar text? )))) dial action and link make a call ))) yout field has no type, like phone number (Office, Home etc), clear this part.... try to understand, what the code has to do, and clear it

                  Comment

                  Working...
                  X