panel notes

application/Espo/Resources/i18n/en_US/LayoutManager.json

@@ -13,7 +13,9 @@
         "dynamicLogicVisible": "Conditions making panel visible",
         "dynamicLogicStyled": "Conditions making style applied",
         "tabLabel": "Tab Label",
-        "tabBreak": "Tab-Break"
+        "tabBreak": "Tab-Break",
+        "noteText": "Note Text",
+        "noteStyle": "Note Style"
     },
     "options": {
         "align": {
@@ -40,6 +42,7 @@
         "fieldsIncompatible": "Fields can't be on the layout together: {fields}."
     },
     "tooltips": {
+        "noteText": "A text to be displayed in the panel. Markdown is supported.",
         "tabBreak": "A separate tab for the panel and all following panels until the next tab-break.",
         "noLabel": "Don't display a column label in the header.",
         "notSortable": "Disables the ability to sort by the column.",

client/res/layout-types/record.tpl

@@ -13,6 +13,10 @@
         <% } %>
         <div class="panel-body panel-body-form">
 
+        <% if (panel.noteText) { %>
+        <div class="alert alert-<%= panel.noteStyle %>"><%= panel.noteText %></div>
+        <% } %>
+
         <% var rows = panel.rows || [] %>
         <% var columns = panel.columns || [] %>
 

client/src/views/admin/layouts/detail.js

@@ -45,6 +45,8 @@ define('views/admin/layouts/detail', ['views/admin/layouts/grid'], function (Dep
             'tabBreak',
             'tabLabel',
             'hidden',
+            'noteText',
+            'noteStyle',
         ],
 
         dataAttributesDefs: {
@@ -81,6 +83,12 @@ define('views/admin/layouts/detail', ['views/admin/layouts/grid'], function (Dep
                     'warning',
                     'info',
                 ],
+                style: {
+                    'info': 'info',
+                    'success': 'success',
+                    'danger': 'danger',
+                    'warning': 'warning',
+                },
                 default: 'default',
                 translation: 'LayoutManager.options.style',
                 tooltip: 'panelStyle',
@@ -105,6 +113,27 @@ define('views/admin/layouts/detail', ['views/admin/layouts/grid'], function (Dep
             tabLabel: {
                 type: 'varchar',
             },
+            noteText: {
+                type: 'text',
+                tooltip: 'noteText',
+            },
+            noteStyle: {
+                type: 'enum',
+                options: [
+                    'info',
+                    'success',
+                    'danger',
+                    'warning',
+                ],
+                style: {
+                    'info': 'info',
+                    'success': 'success',
+                    'danger': 'danger',
+                    'warning': 'warning',
+                },
+                default: 'info',
+                translation: 'LayoutManager.options.style',
+            },
         },
 
         defaultPanelFieldList: [
@@ -137,6 +166,16 @@ define('views/admin/layouts/detail', ['views/admin/layouts/grid'], function (Dep
                         ]
                     }
                 },
+                noteStyle: {
+                    visible: {
+                        conditionGroup: [
+                            {
+                                attribute: 'noteText',
+                                type: 'isNotEmpty',
+                            }
+                        ]
+                    }
+                },
             }
         },
 

client/src/views/record/detail.js

@@ -92,12 +92,14 @@ class DetailRecordView extends BaseRecordView {
      * @property {string} [label] A translatable label.
      * @property {string} [customLabel] A custom label.
      * @property {string} [name] A name. Useful to be able to show/hide by a name.
-     * @property {'default'|'success'|'danger'|'warning'} [style] A style.
+     * @property {'default'|'success'|'danger'|'warning'|'info'} [style] A style.
      * @property {boolean} [tabBreak] Is a tab-break.
      * @property {string} [tabLabel] A tab label. If starts with `$`, a translation
      *   of the `tabs` category is used.
      * @property {module:views/record/detail~rowDefs[]} [rows] Rows.
      * @property {module:views/record/detail~rowDefs[]} [columns] Columns.
+     * @property {string} [noteText] A note text.
+     * @property {'success'|'danger'|'warning'|'info'} [noteStyle] A note style.
      */
 
     /**
@@ -3052,6 +3054,12 @@ class DetailRecordView extends BaseRecordView {
             panel.style = item.style || 'default';
             panel.rows = [];
             panel.tabNumber = tabNumber;
+            panel.noteText = item.noteText;
+            panel.noteStyle = item.noteStyle || 'info';
+
+            if (panel.noteText) {
+                panel.noteText = this.getHelper().transformMarkdownText(panel.noteText);
+            }
 
             this.middlePanelDefs[panel.name] = {
                 name: panel.name,

frontend/less/espo/elements/panel.less

@@ -29,6 +29,10 @@
 .panel > .panel-body.panel-body-form {
     padding-bottom: @panel-padding - @form-group-margin-bottom;
 
+    > .alert {
+        margin-bottom: @form-group-margin-bottom;
+    }
+
     > .button-container {
         padding-bottom: 12px;
     }