Sub Panels or Tabs Help

[linedadelas]

Hi guys

New here and been playing with this amazing system, can i ask if it's possible to create sub panels or tabs for contacts? I have created many fields in contacts for example to cover personal information, training competencies and investigation data but when i open a contact i spend a lot of time scrolling down. Just wondered if there is a way of maybe expanding on each section either by sub panel or side panel to look directly at the section needed rather than heavy scrolling until you see the section you want?

Thanks guys and great work
Andy

[telecastg]

Hi,

It is possible to implement drop-down panels (accordion) through some custom coding so you can divide the record into panels (sections) and have each section be expandable.

This is a step by step guide on how to implement drop-down for the Contact entity, and it is based on the original work kindly contributed by blueprint in this thread:
https://forum.espocrm.com/forum/feat...rop-down-panel

INSTRUCTIONS:

1) Create a new metadata clientDefs file for Contact, which will instruct the system to use a custom view script to render the record in detail display instead of the standard view script::
custom/Espo/Custom/Resources/metadata/clientDefs/Contact.json

{
    "recordViews": {
        "detail": "custom:views/record/accordion-detail"
    }
}

2) Create the custom view script which will extend the standard view script but will specify a custom panel template (with the accordion capabilities) to render the Contact record panels in detail view:
client/custom/src/views/record/accordion-detail.js

Espo.define('custom:views/record/accordion-detail', ['views/record/detail'], function (Dep) {

    return Dep.extend({

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

    });
});

3) Create custom template that includes the accordion capabilities:
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>
<% }); %>

4) Go to Administration > Layout Manager > Contacts > Detail and group the fields that you wish to display in panels.

5) Go to Administration > Rebuild to clear cache and rebuild the application.

[eymen-elkum]

https://www.eblasoft.com.tr/product-page/layout-pro