How to create custom list related?

[Ananya K]

Hey,

I am trying to create a custom Bottom relationship panel under Contact entity Details view.

• I want to add a button instead of just a value in that list.
• Also, I should be able to edit the field in that bottom relationship panel.

I was just trying around but didn't work in any way.

Is it possible? If possible, Can anyone help me with how to do it?

[telecastg]

Hi,

It is possible but requires coding and two steps:

1) Define a custom bottom list display with the fields that you want or to add buttons
2) Make the fields displayed "inline-editable" just like its done in detail display when you hover over a field and the "pencil" icon shows up.

For the first step:

Basically a bottom relationship panel renders a "list" display of the "many" entity.

The script that controls the bottom relationship panel is: https://github.com/espocrm/espocrm/b...elationship.js and there you can choose the fields (layout) that will be used to retrieve the collection from the database. By default the layout used is "listSmall".

In order to keep everything "upgrade safe" you will need to create a custom view class for example: client/custom/src/views/record/panels/relationship.js extended from the core script and customized as desired.

Then you will need to specify that script at the "One" entity's clientDefs as the class to use for rendering the button panel. For example, we have a "Property" entity which has a one-to-many relationship with a "ServiceTicket" entity, so to specify a custom script like the above we would have this code at the Property.json clientDefs script:

"relationshipPanels": {
    "serviceTickets": {
        "recordListView": "custom:views/record/panels/relationship",
        "layout": "listSmall"
    }
},

For the second step:

After you have defined the fields that will be displayed, in order to make a field "inline editable" you will have to create a custom field type to add this capability. You can check this post for instructions on how you can do that (the code is a few years old but it should work) https://forum.espocrm.com/forum/feat...ields-in-lists

Once you have managed to implement your solution, it will be greatly appreciated if you can post it here as always

[Ananya K]

telecastg

Hey,

• Here the field is varchar/text which extends the 'views/fields/base'. In my case, the field is foreign for Entity A.
• And, Entity A : Entity A there is 1 : M relationship.
• Now, I am displaying field X (from Entity B) in list Small under Entity A.
• Entity A : Entity B there is 1 : 1 relationship.
• Now, field X view is extended from 'views/fields/varchar' -> 'views/fields/foreign-varchar'.
• Similarly another field Y is of type Date under Entity B, So, 'views/fields/date' -> 'views/fields/foreign-date'.

Now how can I use 'custom:views/fields/inline-base' for 'views/fields/foreign-varchar' and 'views/fields/foreign-date' ?

[telecastg]

Hi,

Try this:

client/custom/src/views/fields/foreign-varchar.js

Espo.define('custom:views/fields/foreign-varchar', ['views/fields/foreign-varchar','custom:views/fields/inline-base'], function (Dep,ListInlineEdit) {

    return Dep.extend({

        listInlineEditBase: null,

        init: function(){
            Dep.prototype.init.call(this);
            this.listInlineEditBase = new ListInlineEdit(this);
            this.listInlineEditBase.init();
        }

    });
});

client/custom/src/views/fields/foreign-date.js

Espo.define('custom:views/fields/foreign-date', ['views/fields/foreign-date','custom:views/fields/inline-base'], function (Dep,ListInlineEdit) {

    return Dep.extend({

        listInlineEditBase: null,

        init: function(){
            Dep.prototype.init.call(this);
            this.listInlineEditBase = new ListInlineEdit(this);
            this.listInlineEditBase.init();
        }

    });
});

[Ananya K]

telecastg

Hey, I am able to manage to do this with in custom:views/fields/foreign-date.

Espo.define('custom:views/fields/foreign-varchar', 'custom:views/fields/inline-base', function (Dep) {
return Dep.extend({

Now able to edit the field in the list small view. Also, my customization in detail view is also working fine.

Thank you very much. This helped me a lot.

[telecastg]

You're welcome