Costum List View

[rem4332]

Good morning,

I would like to create a list view in which the columns are swapped with the rows.
Does anyone of you have an approach for me how to do this.
Possibly also in an existing list.

Thanks in advance
Bye
Reinhard

[rem4332]

I will give an example, between the RED lines we can see the fields from the Entity, right? I want to put the fields between the yellow lines.
And use the content between the yellow lines at the between the red lines. could I express myself well enough ? Thanks

[shalmaxb]

Perhaps this helps: https://dbushell.com/2016/03/04/css-...onsive-tables/

or this: https://siongui.github.io/2017/04/16...se-html-table/

But don`t ask me, how to implement this in espoCRM......

[telecastg]

Excellent hint shalmaxb , I was able to implement it and created a post in this thread for other users that might also be interested.

https://forum.espocrm.com/forum/developer-help/61108-reference-espo-gui-script-map-guide-where-can-i-change-something?p=78723#post78723

[shalmaxb]

I guess this could be interesting also for the problem regarding mobile view, where in wide list views you would have to scroll a lot.

[rem4332]

Hy Guys thanks a lot shalmaxb for the hint very nice, telecastg i lack the words you are the madness, many thanks for the example, i will test it today immediately with me

[rem4332]

I have implemented the code now, but unfortunately the dropdown does not show up for me. Does anyone have a tip for me? Thanks here is my code.

Espo.define('crm-plus:views/fields/link-multiple-form/inline-list', 'views/record/list', function (Dep) {

return Dep.extend({

dropdownItemList: [
{
name: 'transposeColumnsToRows',
label: 'Transpose Columns to Rows'
},
{
name: 'resetTransposition',
label: 'Reset Transposition'
}
],

actionTransposeColumnsToRows: function () {
$('tr.list-row').css("display","block");
$('tr.list-row').css("float","left");
$('td.cell').css("display","block");
$('th').css("display","none");
},

actionResetTransposition: function () {
$('tr.list-row').css("display","");
$('tr.list-row').css("float","");
$('td.cell').css("display","");
$('th').css("display","");
},

The clientdefs

{
"controller": "controllers/record",
"boolFilterList": [
"onlyMy"
],
"gridLayoutType": "grid",
"isWide": true,
"recordViews": {
"list": "crm-plus:views/fields/link-multiple-form/inline-list"
}
}

[rabii]

you should replace crm-plus with the correct custom folder you are using for your entity, try to place the code within the custom folder for the desired entity you wish to apply this to. e.g under client/src/views/fields/link-multiple-form/inline-list this should be the correct folder structure.

1) Create a custom list view class to render the target entity's list display: your-entity-name

client/custom/views/your-entity-name/record/list.js

Espo.define('custom:views/your-entity-name/record/list', 'views/record/list', function (Dep) {

return Dep.extend({

dropdownItemList: [
{
name: 'transposeColumnsToRows',
label: 'Transpose Columns to Rows'
},
{
name: 'resetTransposition',
label: 'Reset Transposition'
}
],

actionTransposeColumnsToRows: function () {
$('tr.list-row').css("display","block");
$('tr.list-row').css("float","left");
$('td.cell').css("display","block");
$('th').css("display","none");
},

actionResetTransposition: function () {
$('tr.list-row').css("display","");
$('tr.list-row').css("float","");
$('td.cell').css("display","");
$('th').css("display","");
},

2) Create custom clientDefs file to let Espo know that the above view class should be invoked when rendering a list of your entity

custom/Espo/Custom/Resources/metadata/clientDefs/your-entity-name.json

{
"recordViews": {
"list": "custom:views/your-entity-name/record/list"
}
}

This this post to understand how it works : https://forum.espocrm.com/forum/deve...8723#post78723

Good luck

[rem4332]

rabii thanks for the hint but i cant replace crm-plus, this is my modul for inline edit.

[shalmaxb]

To get a better insight:

- did you rebuilt?
- cleared cache (also browser cache)?
- anything in your logfile (data/logs)?

And it seems, you did not put the right code in here, like provided under https://forum.espocrm.com/forum/deve...8723#post78723

[rem4332]

Good Morning, thanks for answer,

yes i do rebuilt
yes cache all clear

logfile i will check.

Okay i found the problem, i cant use this nice feature at inline Edit tabel

[rem4332]

When i use it at the Standard Entity is all okay.

Another Idea was add the Inline Tabel the overflow option to vertically scrollable
but Espo scale too much and display not all fields.

Original


with CCS overflow



The Fields



We can see the Fieldlist is longer than the listview, Ideas ?

Thanks a lot

[shalmaxb]

My first guess: I think you should use an multi enum field for so many values. Depending on the Layout of your list view, you could have the values in one wide column.

Or multi checkbox field.

[telecastg]

Check this post https://forum.espocrm.com/forum/deve...8772#post78772 implementing the transposing function by clicking on a button at the top of the list display, similar to the kanban button.

Using this example, modify the script in step 1 to extend the class from your extension view class "crm-plus:views/fields/link-multiple-form/inline-list" instead of extending from "views/record/list" as in the example, to preserve all current functionality in your extension and see if that works.