How to Create a Custom sidePanels

[lj4353]

I created an AI page, and I want to embed it into the email sidebar using an iframe. However, I couldn't achieve this by modifying the code below.

①：
/web/EspoCRM-8.0.5/custom/Espo/Custom/Resources/metadata/clientDefs/Email.json

{
"relationshipPanels": {
"parent": {
"layout": null,
"selectPrimaryFilterName": null
}
},
"sidePanels": [
{
"name": "gtpai",
"label": "GTPAI",
"view": "custom:views/side-panels/gtpai",
"aclScope": "Email"
}
]
}

②
/volume1/web/EspoCRM-8.0.5/client/custom/src/views/side-panels/gtpai.js

define('custom:views/side-panels/gtpai', 'views/record/panels/relationship', function (Dep) {
return Dep.extend({

name: 'gtpai',
template: 'custom:record/panels/gtpai',

setup: function () {
this.scope = this.model.name;
this.link = 'gtpai';
},

afterRender: function () {
var iframe = document.createElement('iframe');
iframe.src = 'https://XXXXX.XXXXX.co.jp/openai-XXXX.html'; // 替换为您的GTPAI页面的URL
iframe.style.width = '100%';
iframe.style.height = '600px'; // 您可以根据需要调整高度

this.$el.find('.panel-body').html(iframe);
}
});
});

③
/web/EspoCRM-8.0.5/client/custom/res/templates/panels

<div class="panel-body">
<iframe src="https://XXXXX.XXXXX.co.jp/openai-XXXX.html" style="width: 100%; height: 600px; border: none;"></iframe>
</div>