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

[start5623]

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

[tanya]

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)

[start5623]

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

[tanya]

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

[start5623]

Hello,

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

[tanya]

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

[start5623]

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

{
   "params":[
      {
         "name":"required",
         "type":"bool",
         "default":false
      },
   ],
   "notActualFields":[
      "data"
   ],
   "notCreatable": true,
   "filter": true,
   "fieldDefs":{
      "type":"jsonArray"
   },
   "translatedOptions": true
}

/client/src/views/fields/varcharPlus.js

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;
        },
    });

});

[start5623]

AND..

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

{{#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

<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

<a href="name:{{value}}" data-varcharPlus="{{value}}" data-action="dial" title="{{value}}">{{value}}</a>

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

<input type="text" class="main-element form-control input-sm" name="{{name}}" value="{{searchParams.valueText}}" {{#if params.maxLength}} maxlength="{{params.maxLength}}"{{/if}}>

[tanya]

/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