Tweet
Edited because of more enhancement:
1. made layout responsive
2. first column in transposed table is now sticky
3. If a field content is large, the content would be cut. Enhancement for that cas, I made the cell with scroll-bar.
4. Whole table is overflow-auto, so nothing will be cut/hidden on wide tables, which get off the screen. Disadvantage: horizontal scroll.
Hello,
this had been discussed a time ago and recently it was necessary for me, to achieve this: Transpose the list view rows and columns. I remembered the thread, which a time ago telecastg had posted and I refer to this thread and the code: https://forum.espocrm.com/forum/deve...8723#post78723
So the majority of the work had been done by telecastg. Thank you for that.
In my case I had to solve a problem, as I wanted to have the header row (th) on the left side (1st column) of the column view, which wasn`t part of the code by telecastg.
Putting together the header row as column with the data rows (as columns) is not so easy, because the header normally only has one word or at least only one line of text. If you have field contents in the data rows, the resulting table would not match line wise because of the different heigths of th versus tr-list. It took me a few hours to find the solution, with which I would like to extend the code of telecastg.
Beforehand I can confirm, that this solution still works in version 8.x (my version is 8.06).
You will need only a few files to achieve this:
1) Create a custom list view class to render the target entity's list display: (In this example the entity is YourEntity)
client/custom/src/views/your_entity/record/list.js
2) Create custom clientDefs file to let Espo know that the above view class should be invoked when rendering a list of service Techs
custom/Espo/Custom/Resources/metadata/clientDefs/YourEntity.json
I am not a programmer, but with this example I learnt to understand the code. Important is the part with the min and max height, as it guarantees, that the table cells and rows will fit together with the header row as the values are identical. It is not predictable, what values you will put here, because it depends on your data tables. In my case I have some fields with multi enum values, which take a bit more space, like two or three lines, so the row must be high enough to display three lines. The max-width I put here to limit the width, to be able to display six ore more records in one column-table. If you ned to display more columns, you could consider to put overflow.scroll to the table. In that case you could scroll horizontal.
The values are a bit to experiment, but it is easy and the result is rewarding. espoCRM and its community did not make me happy for the first time!
Obs.: This solution is now responsive!
1. made layout responsive
2. first column in transposed table is now sticky
3. If a field content is large, the content would be cut. Enhancement for that cas, I made the cell with scroll-bar.
4. Whole table is overflow-auto, so nothing will be cut/hidden on wide tables, which get off the screen. Disadvantage: horizontal scroll.
Hello,
this had been discussed a time ago and recently it was necessary for me, to achieve this: Transpose the list view rows and columns. I remembered the thread, which a time ago telecastg had posted and I refer to this thread and the code: https://forum.espocrm.com/forum/deve...8723#post78723
So the majority of the work had been done by telecastg. Thank you for that.
In my case I had to solve a problem, as I wanted to have the header row (th) on the left side (1st column) of the column view, which wasn`t part of the code by telecastg.
Putting together the header row as column with the data rows (as columns) is not so easy, because the header normally only has one word or at least only one line of text. If you have field contents in the data rows, the resulting table would not match line wise because of the different heigths of th versus tr-list. It took me a few hours to find the solution, with which I would like to extend the code of telecastg.
Beforehand I can confirm, that this solution still works in version 8.x (my version is 8.06).
You will need only a few files to achieve this:
1) Create a custom list view class to render the target entity's list display: (In this example the entity is YourEntity)
client/custom/src/views/your_entity/record/list.js
Code:
define('custom:views/software/record/list', 'views/record/list', function (Dep) {
return Dep.extend({
dropdownItemList: [
{
name: 'transposeColumnsToRows',
label: 'Column View'
},
{
name: 'resetTransposition',
label: 'Row View'
}
],
//here comes the part, where you will make some modifications
actionTransposeColumnsToRows: function () {
//thead is the block of the header row, which we put on the left side
$('thead').css("float","left")
$('thead').css("overflow-x","auto");
//in the header row we put the tr also to the left
$('tr').css("display","block");
$('tr').css("float","left");
//this code adds inline css to the header cells
$('th').css("display","block");
$('th').css("max-height","60px");
$('th').css("min-height","60px");
$('th').css("max-width","200px");
$('th').css("min-width","200px");
$('th').css("line-height","1.2");
$('th').css("font-weight","bold");
$('th').css("border-right","thin solid rgb(225, 221, 221)");
//here we set the data table to the left side next to the header column
$('tbody').css("display","flex");
$('tbody').css("margin-top","-1px");
$('tbody').css("overflow-x","auto");
//tr.list-row are the data rows, also put to the left
$('tr.list-row').css("display","block");
$('tr.list-row').css("float","left");
//td.cell are the data cells of the table, which will have the sam max and min heights and width
$('td.cell').css("display","block");
$('td.cell').css("max-height","60px");
$('td.cell').css("min-height","60px");
$('td.cell').css("max-width","200px");
$('td.cell').css("line-height","1.2");
$('td.cell').css("overflow-y","visible");
},
//this part sets all back to the default list view
actionResetTransposition: function () {
$('thead').css("float","");
$('tr').css("display","");
$('tr').css("float","");
$('tr.list-row').css("display","");
$('tr.list-row').css("float","");
$('td.cell').css("display","");
$('td.cell').css("max-height","");
$('td.cell').css("min-height","");
$('td.cell').css("max-width","");
$('td.cell').css("line-height","1.2");
$('td.cell').css("overflow-y","");
$('th').css("display","");
$('th').css("max-width","");
$('th').css("display","");
$('th').css("font-weight","bold");
$('th').css("max-height","");
$('th').css("min-height","");
$('th').css("line-height","1.2");
$('th').css("min-width","");
$('th').css("overflow-x","");
$('th').css("border-right","");
$('tbody').css("float","");
$('tbody').css("margin-top","");
}
});
});
custom/Espo/Custom/Resources/metadata/clientDefs/YourEntity.json
Code:
{
"recordViews": {
"list": "custom:views/service-tech/record/list"
}
}
I am not a programmer, but with this example I learnt to understand the code. Important is the part with the min and max height, as it guarantees, that the table cells and rows will fit together with the header row as the values are identical. It is not predictable, what values you will put here, because it depends on your data tables. In my case I have some fields with multi enum values, which take a bit more space, like two or three lines, so the row must be high enough to display three lines. The max-width I put here to limit the width, to be able to display six ore more records in one column-table. If you ned to display more columns, you could consider to put overflow.scroll to the table. In that case you could scroll horizontal.
The values are a bit to experiment, but it is easy and the result is rewarding. espoCRM and its community did not make me happy for the first time!
Obs.: This solution is now responsive!