Button syntax in EspoCRM 9.1.4

[rouhu]

I have added a button to detail view in file /custom/Espo/Custom/Resources/metadata/clientDefs/Requisitions.json
Its working fine in v8.3.4 but in v9.1.4 the button does nothing. It suppose to popup a window to create a related record (just like pressing the plus-sign in subpanel).

    "menu": {
        "detail": {
            "buttons": [
                "__APPEND__",
                {
                    "html": "CREATE APPROVAL",
                    "name": "approval",
                    "action": "createRelated",
                    "style": "success",
                    "acl": "create",
                    "aclScope": "Approvals",
                    "data": {
                        "panel": "approvals",
                        "link": "approvals"
                    },
                    "hidden": false
                }
            ]
        }
    } 

I wonder if this should work or if the syntax has changed ?

[yuri]

https://forum.espocrm.com/forum/bug-reports/23321-important-bug-report-rules-read-before-posting

[rouhu]

Bug report Q&A:

1. What errors are logged:
   1. in the Espo log in data/logs directory;
   2. in the web server error log;
   3. in the browser console (F12 key).
2. Explicit unambiguous steps for reproducing the issue. As much detail as possible.
3. EspoCRM version number. If your version is not the latest, it's possible that the bug is already fixed.
4. PHP version number.
5. Database platform name (MySQL, MariaDB, PostgreSQL) and version number.

1. There are no errors in any of the log files or browser console
2. Add a new button to detail view that pops out the create related record edit view (same as the relationship panel's plus-sign).
3. 9.1.4
4. PHP 8.3
5. MariaDB 10.5

HTML syntax for the button:
<a role="button" tabindex="0" class="btn btn-success btn-xs-wide main-header-manu-action action" data-name="approval" data-action="createRelated" data-panel="approvals" data-link="approvals">
<span>CREATE APPROVAL</span>
</a>

HTML syntax for the plus-sign:
<button type="button" class="btn btn-default btn-sm panel-action action" data-action="createRelated" data-panel="approvals" data-link="approvals" title="Create" style="color: rgb(128, 128, 128);"><span class="fas fa-plus"></span></button>

[yuri]

Issues reproducible only via coding are encouraged to be investigated by the reporter (developer). The application is for end users first. It takes a lot of my time to handle such reports, most of which are turn out to be not bugs.

In our contribution guidelines: https://github.com/espocrm/espocrm/b...e-level-issues

Maybe the issue in your code is that you have aclScope in plural. Entities are supposed to be named in singular.

[rouhu]

Some investigation reveal that the "click" event listener for the popup to appear has been moved from div#main section to div.bottom section. The header buttons only have the div#main section event listener, so the popup no longer launches in v9.1.4.

The client-side JavaScript code for handling the createRelated button event (which triggers a popup window) is found in these locations:

---

### 1. **client/src/views/modals/related-list.js**

This file contains the event listener for the button with `data-action="createRelated"`:

```javascript
events = {
/** @this RelatedListModalView */
'click button[data-action="createRelated"]': function () {
this.actionCreateRelated();
},
// ...
}
```

The method that handles this action:

```javascript
actionCreateRelated() {
// If the action is 'createRelated', use the helper to process it
const actionName = this.defs.createAction || 'createRelated';

if (actionName === 'createRelated') {
const helper = new CreateRelatedHelper(this);
helper.process(this.model, this.link);
return;
}

// Otherwise, delegate to a method on a parent view if it exists
const methodName = 'action' + Espo.Utils.upperCaseFirst(actionName);
let p = this.getParentView();
let view = null;

while (p) {
if (p[methodName]) {
view = p;
break;
}
p = p.getParentView();
}

p[methodName]({
link: this.link,
scope: this.scope,
});
}
```

---

### 2. **client/src/views/record/panels/bottom.js**

This file defines the bottom panel logic — this is where the event handling was moved:

```javascript
class BottomPanelView extends View {
// ...
'click .action': function (e) {
Espo.Utils.handleAction(this, e.originalEvent, e.currentTarget, {
actionItems: [...this.buttonList, ...this.actionList],
className: 'panel-action',
});
},
// ...
}
```
This means the event listener for `.action` buttons (including `data-action="createRelated"`) is now handled in the `BottomPanelView`, instead of being attached to a higher-level `div#main` or elsewhere.

---

### **Summary**

- The event listener for the `createRelated` button is now set up in `client/src/views/record/panels/bottom.js` within `BottomPanelView`.
- The actual logic for handling the `createRelated` action and opening the popup is defined in `client/src/views/modals/related-list.js` in the `RelatedListModalView` class, specifically in the `actionCreateRelated()` method.

Copilot analyses.