drop-down panel

[sandra6012]

It would be great if you could make the panels inside the registers become expandable, so that you are not going to read the field or field or slide until you find the panel.

[blueprint]

I've modified the "client\res\layout-types\record.tpl" template to allow the collapsing/expanding of panels - this definitely helps when you have a long details layout!

If you're interested, I can send you the updated "record.tpl" file however, this change will not be upgrade-proof.

I haven't yet figured out how I can introduce a custom "layout-type" into the "client\custom" folder

[telecastg]

Could you please provide the modified template code ? I would like to try to make it upgrade-proof and if I can I will be happy to share with everyone.

[blueprint]

Here's the modified `record.tpl` file.

Don't forget to change the extension from "txt" to "tpl"!

[telecastg]

Thanks so much, I'll keep you posted !

[blueprint]

telecastg Cool, appreciated. Good luck!

I've found some parts of EspoCRM very difficult to customise (like the site templates) without having to change underlying system files (like app.js, ui.js, etc).

I'm currently working on a re-vamped side menu to include sub-menus with ACL control. It works so-far but its clunky!

[sandra6012]

I've modified the "client\res\layout-types\record.tpl" template to allow the collapsing/expanding of panels - this definitely helps when you have a long details layout!

If you're interested, I can send you the updated "record.tpl" file however, this change will not be upgrade-proof.

I haven't yet figured out how I can introduce a custom "layout-type" into the "client\custom" folder

Thank you very much, I will review it to see if I can implement it.

[telecastg]

Hello everyone,

I found a way to keep the custom template "upgrade safe" as follows:

1) Change template name to "record-accordion.tpl" to avoid conflict with the default "record.tpl" template and store as: client/custom/res/layout-types/record-accordion.tpl

2) Create a custom detail view to substitute the default "views/record/detail" view. (I stored mine as: client/custom/src/views/generic/single-record/body/detail.js) and enter the following code:

Espo.define('custom:views/generic/single-record/body/detail', 'views/record/detail', function (Dep) {

    return Dep.extend({

        // specify a custom (accordion) record panel template
        gridLayoutType: 'custom:record-accordion'

        // put any other custom code as desired

    });
});

3) Modify all clientDefs json files for entities which you wish to view using the accordion template (for example, I have a "tenancy" entity thus I modified file 'custom/Espo/Custom/Resources/metadata/clientDefs/Tenancy.json' as follows:

    "recordViews": {
        "detail": "custom:views/generic/single-record/body/detail"
    },

I am also working on a way to pre-load the record-accordion template as Espo does with the default templates to make it faster. Will update any progress.

Saludos !

[blueprint]

telecastg This is great, thanks for posting the instructions.

Regarding the pre-loading, can you not just add the template to the `client/cfg/pre-load.json` file?

[telecastg]

telecastg This is great, thanks for posting the instructions.

Regarding the pre-loading, can you not just add the template to the `client/cfg/pre-load.json` file?

blueprint You're welcome, thank you for sharing the template.

I want to avoid modifying the client/cfg/pre-load.json file because it wouldn't be upgrade proof. I would like to add the new custom template to chache without modifying any system scripts.

[blueprint]

telecastg Ah yes, of course it wouldn't be upgrade proof. I wasn't thinking.

It's a shame the `pre-load.json` file can't be appended in a `client/custom/cfg` folder. Maybe a feature request?

[shalmaxb]

Hello,
as I would like to have this feature, I tried the code following the instructions. But I did not get it to work so far.
I try to open the detail view from the link in the list view. On first click, nothing happens. On second click a blank page opens.
Any hint, what could be the problem?
I am using the most recent version of ESPOcrm

[telecastg]

Hi, this is an old posting and one of the upgrades (don't remember which) made some changes that required to modify the record-accordion template, here's the updated code, it is working fine in our application and we are using EspoCRM 5.9.3

client/custom/res/layout-types/record-accordion.tpl

<% _.each(layout, function (panel, columnNumber) { %>
<div class="accordion" id="accordion_<%= columnNumber %>">
<div class="panel panel-<%= panel.style %><% if (panel.name) { %>{{#if hiddenPanels.<%= panel.name %>}} hidden{{/if}}<% } %>"<% if (panel.name) print(' data-name="'+panel.name+'"') %>>
<%
var panelLabelString = null;
if ('customLabel' in panel) {
if (panel.customLabel) {
panelLabelString = panel.customLabel;
}
} else {
if (panel.label) {
panelLabelString = "{{translate \"" + panel.label + "\" scope=\""+model.name+"\"}}";
}
}
%>
<% if (panelLabelString) { %>
<div class="panel-heading"><a data-toggle="collapse" data-parent="accordion_<%= columnNumber %>" href="#collapse_<%= columnNumber %>"><h4 class="panel-title"><%= panelLabelString %></h4></a></div>
<% } %>
<div id="collapse_<%= columnNumber %>" class="collapse in">
<div class="panel-body panel-body-form">

<% var rows = panel.rows || [] %>
<% var columns = panel.columns || [] %>

<% _.each(rows, function (row, rowNumber) { %>
<div class="row">
<% var columnCount = row.length; %>
<% _.each(row, function (cell, cellNumber) { %>

<%
var spanClassBase;
if (columnCount === 1) {
spanClassBase = 'col-sm-12';
} else if (columnCount === 2) {
spanClassBase = 'col-sm-6';
} else if (columnCount === 3) {
spanClassBase = 'col-sm-4';
} else if (columnCount === 4) {
spanClassBase = 'col-md-3 col-sm-6';
} else {
spanClass = 'col-sm-12';
}
%>
<% if (cell != false) { %>
<%
var spanClass;
if (columnCount === 1 || cell.fullWidth) {
spanClass = 'col-sm-12';
} else if (columnCount === 2) {
if (cell.span === 2) {
spanClass = 'col-sm-12';
} else {
spanClass = 'col-sm-6';
}
} else if (columnCount === 3) {
if (cell.span === 2) {
spanClass = 'col-sm-8';
} else if (cell.span === 3) {
spanClass = 'col-sm-12';
} else {
spanClass = 'col-sm-4';
}
} else if (columnCount === 4) {
if (cell.span === 2) {
spanClass = 'col-sm-6';
} else if (cell.span === 3) {
spanClass = 'col-sm-9';
} else if (cell.span === 4) {
spanClass = 'col-sm-12';
} else {
spanClass = 'col-md-3 col-sm-6';
}
} else {
spanClass = 'col-sm-12';
}
%>
<div class="cell <%= spanClass %> form-group<% if (cell.field) { %>{{#if hiddenFields.<%= cell.field %>}} hidden-cell{{/if}}<% } %>" data-name="<%= cell.field %>">
<% if (!cell.noLabel) { %><label class="control-label<% if (cell.field) { %>{{#if hiddenFields.<%= cell.field %>}} hidden{{/if}}<% } %>" data-name="<%= cell.field %>"><span class="label-text"><%
if ('customLabel' in cell) {
print (cell.customLabel);
} else {
print ("{{translate \""+cell.field+"\" scope=\""+model.name+"\" category='fields'}}");
}
%></span></label><% } %>
<div class="field<% if (cell.field) { %>{{#if hiddenFields.<%= cell.field %>}} hidden{{/if}}<% } %>" data-name="<%= cell.field %>"><%
if ('customCode' in cell) {
print (cell.customCode);
} else {
print ("{{{this."+cell.name+"}}}");
}
%></div>
</div>
<% } else { %>
<div class="<%= spanClassBase %>"></div>
<% } %>
<% }); %>
</div>
<% }); %>
</div>
</div>
</div>
</div>
<% }); %>

[shalmaxb]

Hi, thank you very much. Competent and fast as always. It works now. When I open the detail view all panels are open and it is possible to toggle them closed. I would prefer only the first open by default, the rest collapsed. I already got all collapsed by default, but not with the first open. Do you have an idea how to realize that?

[telecastg]

Hi, you're welcome. I'm afraid I don't know how to do that at the template level or with a simple change.

You might want to use jquery to modify the DOM in the afterRender event and write a function to make some panels collapsed and other expanded by changing classes, but I don't have any sample code of how to do that.

If it helps, here is the HTML output when a panel is expanded (notice that the <a> element has no class defined and the <div id="collapse_0"> has class="collapse in"


and when it is collapsed (notice that the <a> element has class="collapsed" and the <div id="collapse_0"> has class="collapse"


and here is a code snippet from client/src/views/admin/layouts/index.js (line #87) that uses the collapse function in a view

'click a.accordion-toggle': function (e) {
e.preventDefault();

var $target = $(e.currentTarget);
var scope = $target.data('scope');

var $collapse = $('.collapse[data-scope="'+scope+'"]');

if ($collapse.hasClass('in')) {
$collapse.collapse('hide');
} else {
$collapse.collapse('show');
}
},

[shalmaxb]

Hello,
thank you again. I also saw the changing of collapse classes depending on the number of the panel (the first one is 0), but as the class "collapse" or "collapse in" is attached to the id "collapse_<% columnNumber %>", it will change the state of all panels, as there is no difference between the first and the others.
Unfortunately to change that is beyond my skills.

Perhaps anybody might have a solution?

[telecastg]

Check the discussion about partial collapse in this link: https://stackoverflow.com/questions/...-div-at-a-time and this tutorial regarding Bootstrap accordions https://www.tutorialrepublic.com/twi...-accordion.php maybe that will help, and if you do figure it out, please post the solution here