Side panel issue - espocrm 7

[Tommy Saucey]

Hello,

Since the espocrm update (version 7), i can't relate entity from side panel. The option is not even shown.
I make two screenshots (one version 7, one older version 6.X.X).

As you can see, the arrow had dissapear.. Any idea to solve this issue ?

Thank you a lot.

[Mark G.]

même capture d'écran, deux fois

(same screen shot, twice)

[Tommy Saucey]

Non, la première est en version 7. il n'y pas la petite flèche vers le bas permettant la sélection.
La deuxième est espo 6, il y a la flèche vers le bas permettant la sélection.

Je cherche une solution pour faire revenir cette flèche.



No, the first one is in version 7. there is not the small down arrow allowing the selection. The second is espo 6, there is the down arrow for selection. I am looking for a solution to make this arrow come back.

[yuri]

My guess that the customization is not being compatible.

[Tommy Saucey]

I really need help..
I actually work hard to make all my extension work on Espo7. The only missing fact is that i can't relate entity from a side panel. I can relate from a bottom even if it's the same entity, but i don't have the option on side panel.

[rabii]

based on this https://forum.espocrm.com/forum/anno...7455#post77455

i guess you just need to customise view of the sidepanel (relationships) and just add necessary action.

[Tommy Saucey]

That's typically the problem. They're nothing on the DOC about actions for a sidePanel.

[rabii]

Hi Tommy Saucey

I understand and i think there is enough on documentation about how to manage custom views but it will very difficult to include all use cases, best way to learn espocrm is simply dive into the existing crm modules and you can understand how they work, i am happy to share with you an example code of an existing use case in my application, mainly i have a relationship account has many accounts (parent account # subsidiaries) this allow me to manage groups in my application.

1- I have created a custom view for my subsidiaries relationship panel, under custom\Espo\Custom\Resources\metadata\clientDefs\A ccount.json i have added this code:

"sidePanels": {
"detail": [
"__APPEND__",
{
"name": "subsidiaries",
"label": "Subsidiaries",
"view": "custom:views/account/record/panels/subsidiaries",
"aclScope": "Account"
}
]
},

2 - Create the custom view for my subsidiaries relationship panel under client\custom\src\views\account\record\panels\subs idiaries.js - below code for my custom view:

Espo.define('custom:views/account/record/panels/subsidiaries', 'views/record/panels/relationship', function (Dep) {

return Dep.extend({

name: 'subsidiaries',

scope: 'Account',

filterList: ['all'],

defaultTab: 'all',

orderBy: 'createdAt',

orderDirection: 'desc',

buttonList: [
{
action: 'createSubsidiary',
title: 'Create Subsidiary',
acl: 'create',
aclScope: 'Account',
html: '<span class="fas fa-plus"></span>',
}
],

// Here is the actionList for viewing related entities or selecting (linking other entities) 
actionList: [
{
label: 'View List',
action: 'viewRelatedList'
},
{
label: 'Select',
action: 'selectRelated'
}
],

listLayout: {
rows: [
[
{
name: 'ico',
view: 'crm:views/fields/ico',
},
{
name: 'name',
link: true,
},
],
[
{name: 'assignedUser'},
{name: 'phoneNumber'},
{name: 'type'},
]
]
},

// Set up function for the view
setup: function () {

this.scope = this.model.name;
this.link = 'subsidiaries';

this.panelName = 'subsidiariesSide';

this.defs.create = true;

this.url = this.model.name + '/' + this.model.id + '/' + this.link;

this.setupSorting();

if (this.filterList && this.filterList.length) {
this.filter = this.getStoredFilter();
}

this.setupFilterActions();

this.setupTitle();

this.wait(true);

this.getCollectionFactory().create('Account', function (collection) {
this.collection = collection;
collection.seeds = this.seeds;
collection.url = this.url;
collection.orderBy = this.defaultOrderBy;
collection.order = this.defaultOrder;
collection.maxSize = this.getConfig().get('recordsPerPageSmall') || 5;

this.setFilter(this.filter);

this.wait(false);
}, this);

this.once('show', function () {
if (!this.isRendered() && !this.isBeingRendered())
this.collection.fetch();
}, this);
},

afterRender: function () {
this.createView('list', 'views/record/list-expanded', {
el: this.getSelector() + ' > .list-container',
pagination: false,
type: 'listRelationship',
rowActionsView: this.defs.rowActionsView || this.rowActionsView,
checkboxes: false,
collection: this.collection,
listLayout: this.listLayout,
skipBuildRows: true
}, function (view) {
view.getSelectAttributeList(function (selectAttributeList) {
if (selectAttributeList) {
this.collection.data.select = selectAttributeList.join(',');
}

if (!this.disabled) {
this.collection.fetch();
} else {
this.once('show', function () {
this.collection.fetch();
}, this);
}
}.bind(this));
});
},

// Action to create a subsidiary for current active account
actionCreateRelated: function () {
this.actionCreateSubsidiary();
},

// This the create function called above
actionCreateSubsidiary: function (data) {
var self = this;
var link = 'subsidiaries';
var scope = 'Account';
var foreignLink = this.model.defs['links'][link].foreign;

this.notify('Loading...');

var viewName = this.getMetadata().get('clientDefs.' + scope + '.modalViews.edit') || 'views/modals/edit';

this.createView('quickCreate', viewName, {
scope: scope,
relate: {
model: this.model,
link: foreignLink,
}
}, function (view) {
view.render();
view.notify(false);
this.listenToOnce(view, 'after:save', function () {
this.collection.fetch();
this.model.trigger('after:relate');
}, this);
});

},

// Action to select (link other accounts as subsidiaries to current active account)
actionSelectRelated: function () {
var p = this.getParentView();

var view = null;

while (p) {
if (p.actionSelectRelated) {
view = p;

break;
}

p = p.getParentView();
}

p.actionSelectRelated({
link: this.link,
primaryFilterName: this.defs.selectPrimaryFilterName,
boolFilterList: this.defs.selectBoolFilterList,
massSelect: this.defs.massSelect,
});
},

actionRefresh: function () {
this.collection.fetch();
},

actionViewRelatedList: function (data) {
data.viewOptions = data.viewOptions || {};
data.viewOptions.massUnlinkDisabled = true;

Dep.prototype.actionViewRelatedList.call(this, data);
}

});
});

Please note that you could find more about all these methods in the inherited view (views/record/panels/relationship). see attached screenshot

I hope this helps.

Cheers

[Mark G.]

Rabii,

Thank you for posting this working example! These are very useful for cloning and adaptation and they work much better than typical documentation examples, which are usually not shown in context.

In your application, you are essentially taking the Accounts table and linking it back to itself, to handle Subsidiary companies/Accounts?
Could you possibly post a screen shot of the relationship page from Entity Manager?

It does seem to be the way/standard that these modern applications are written, but all the parentheses, brackets, ellipses, etc. on separate lines make it harder for some to clearly understand, especially me as an "old-school computer programmer".

Just to show my thought process, as an example, I took this chunk of code from what you provided and re-styled it into something that just makes more sense, visually, to me:


// Here is the actionList for viewing related entities or selecting (linking other entities)

actionList: [
{
label: 'View List',
action: 'viewRelatedList'
},
{
label: 'Select',
action: 'selectRelated'
}
],

listLayout: {
rows: [
[
{
name: 'ico',
view: 'crm:views/fields/ico',
},
{
name: 'name',
link: true,
},
],
[
{name: 'assignedUser'},
{name: 'phoneNumber'},
{name: 'type'},
]
]
},

__________________________________________________ _________________

MY INTERPRETATION:

//Here is the actionList for viewing related entities or selecting (linking other entities)

actionList: [
{label: 'View List', action: 'viewRelatedList'},
{label: 'Select', action: 'selectRelated'}
],

listLayout: {
rows: [
[ {name:'ico',view:'crm:views/fields/ico',}, {name:'name',link:true,}, ]
,
[ {name:'assignedUser'}, {name:'phoneNumber'}, {name:'type'}, ]
]
},


Thank you again for posting!

[rabii]

Hi Mark G.

You are welcome, i hope it helped. Mainly i have only created one relationship in account (Account One-to-Many Accounts) (accountParent One-to-Many subsidiaries) then you will have a two way relationship one you account entity one link field represents parent company field and another multiple link field represents subsidiaries. please see attached screenshot.

In terms of code it will be quite difficult to put it all in one line as it will be complex for reading but i have tried to reduce these arrays into one line, see new code below, by the way some functions has a long callback closure and will be difficult to break into one line.

Espo.define('custom:views/account/record/panels/subsidiaries', 'views/record/panels/relationship', function (Dep) {

return Dep.extend({

name: 'subsidiaries',

scope: 'Account',

filterList: ['all'],

defaultTab: 'all',

orderBy: 'createdAt',

orderDirection: 'desc',

buttonList: [
{ action: 'createSubsidiary', title: 'Create Subsidiary', acl: 'create', aclScope: 'Account', html: '<span class="fas fa-plus"></span>', }
],

// Here is the actionList for viewing related entities or selecting (linking other entities)
actionList: [
{label: 'View List', action: 'viewRelatedList'},
{label: 'Select', action: 'selectRelated'}
],

listLayout: {
rows: [[{ name: 'ico', view: 'crm:views/fields/ico', }, { name: 'name', link: true, },], [ {name: 'assignedUser'}, {name: 'phoneNumber'}, {name: 'type'},]]
},

// Set up function for the view
setup: function () {
this.scope = this.model.name;
this.link = 'subsidiaries';

this.panelName = 'subsidiariesSide';

this.defs.create = true;

this.url = this.model.name + '/' + this.model.id + '/' + this.link;

this.setupSorting();

if (this.filterList && this.filterList.length) {
this.filter = this.getStoredFilter();
}

this.setupFilterActions();

this.setupTitle();

this.wait(true);

this.getCollectionFactory().create('Account', function (collection) {
this.collection = collection;
collection.seeds = this.seeds;
collection.url = this.url;
collection.orderBy = this.defaultOrderBy;
collection.order = this.defaultOrder;
collection.maxSize = this.getConfig().get('recordsPerPageSmall') || 5;

this.setFilter(this.filter);

this.wait(false);
}, this);

this.once('show', function () {
if (!this.isRendered() && !this.isBeingRendered())
this.collection.fetch();
}, this);
},

afterRender: function () {
this.createView('list', 'views/record/list-expanded', {
el: this.getSelector() + ' > .list-container',
pagination: false,
type: 'listRelationship',
rowActionsView: this.defs.rowActionsView || this.rowActionsView,
checkboxes: false,
collection: this.collection,
listLayout: this.listLayout,
skipBuildRows: true
}, function (view) {
view.getSelectAttributeList(function (selectAttributeList) {
if (selectAttributeList) {
this.collection.data.select = selectAttributeList.join(',');
}

if (!this.disabled) {
this.collection.fetch();
} else {
this.once('show', function () {
this.collection.fetch();
}, this);
}
}.bind(this));
});
},

// Action to create a subsidiary for current active account
actionCreateRelated: function () {
this.actionCreateSubsidiary();
},

// This the create function called above
actionCreateSubsidiary: function (data) {
var self = this;
var link = 'subsidiaries';
var scope = 'Account';
var foreignLink = this.model.defs['links'][link].foreign;

this.notify('Loading...');

var viewName = this.getMetadata().get('clientDefs.' + scope + '.modalViews.edit') || 'views/modals/edit';

this.createView('quickCreate', viewName, {
scope: scope,
relate: {
model: this.model,
link: foreignLink,
}
}, function (view) {
view.render();
view.notify(false);
this.listenToOnce(view, 'after:save', function () {
this.collection.fetch();
this.model.trigger('after:relate');
}, this);
});

},

// Action to select (link other accounts as subsidiaries to current active account)
actionSelectRelated: function () {
var p = this.getParentView();

var view = null;

while (p) {
if (p.actionSelectRelated) {
view = p;

break;
}

p = p.getParentView();
}

p.actionSelectRelated({
link: this.link,
primaryFilterName: this.defs.selectPrimaryFilterName,
boolFilterList: this.defs.selectBoolFilterList,
massSelect: this.defs.massSelect,
});
},

actionRefresh: function () {
this.collection.fetch();
},

actionViewRelatedList: function (data) {
data.viewOptions = data.viewOptions || {};
data.viewOptions.massUnlinkDisabled = true;

Dep.prototype.actionViewRelatedList.call(this, data);
}

});
});

[Mark G.]

Cela a-t-il résolu votre problème, Tommy?

(did this fix your problem?)

[Tommy Saucey]

Not at all. :/
I know how to code specific view, that's not the problem. Just get this option dissapear since espo7

[fincherdavid]

Looks like you can turn stream back on in the entity once you have completed the added view. wanted to have it in the side view and the bottom view and it seems to work fine. Thanks again.

[Tommy Saucey]

Problem solved. I had to change this {{{var ../actionsViewKey ../../this}}} to this {{{var actionsViewKey ../this}}} on side.tpl
I have to overwrite this btw, but i restored my button to relate entities from side panel.