Custom Dashlet - WYSIWYG Editor as option field

[shalmaxb]

Hello,
I created a custom dashlet, which I want to use for aleatoric, individually written hints to display on the home page.
When I use the dashlet, everything is in place, but the content from the WYSIWYG field is not displayed. I guess, it is because of wrong code in the custom.tpl, but I cannot find any instruction how to integrate the WYSIWYG field into the template. I´ve already tried {{name of option}} and {{{name of option}}}, but neither works.

[shalmaxb]

As this question, posted one day ago, vanished due to the "weekend purgatory" of this forum, I push it again. Thank you for understanding.

[telecastg]

Hello shalmaxb,

It is not possible to fetch an espo field in a handlebars template script (tpl) the same way that you do when you are using a "template" entity.

I think that the confusion is that the "template" entity is very different from an actual template tpl file.

The "template" entity uses code to fetch "fields" as specified in its body or heading and then converts the output to html for printing.

Espo, which front end is based on Backbone.js, uses handlebars scripts (templates) to render data that has been defined in a view class. This data is passed to the template by the data() method of the view, so the tpl script, only understands the placeholders defined in data() or references to "sub-views" also defined in the view.

If you post the code that you already have developed, I will try to help you come up with a solution

[shalmaxb]

Hello telecastg,

thank you for answering.
I implemented the dashlet accordingly to the manual and it works. The only thing is, that I had to hardcode the HTML content into the tpl-file, what is ok, but a bit uncomfortable to update. So I came up with the idea to put as an option a WYSIWYG-field, what not worked.

Here is my Code. The dashlet has the name "hilfefunktion". A screenshot of the final appearance in the attachment.

in client/custom/res/templates/dashlets/hilfefunktion.tpl (it is all plain HTML/Bootstrap to display buttons linked to articles in the knowledge base, the first button opens an accordion:

<button type="button" class="btn btn-block btn-danger" data-toggle="modal" data-target="#exampleModalCenter">
Hilfefunktionen im Werkverzeichnis
</button>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-dialog modal-md modal-dialog-centered" role="document">
<div class="modal-content rounded-0">
<div class="modal-body py-0">
<h3 class="mb-4">Hilfefunktionen</h3>
<p class="mb-4">


<! -- Here is more HTML, but I cut it to not take too much space here --->


<h3 class="mb-4">Versionshinweis</h3>
<p class="mb-4">
<div class="panel-body"><p><h5>Changelog Werkverzeichnis 3.4.7.1.7 - 5.6.2022</h5><ul style="font-size: 14px;"><li>Update Framework auf Version 7.1.7</li><li>Wissensbasis und Direkthilfe umfangreich erweitert</li></ul></p>
</div>
</div>
</div>
</div></div></div>

in client/custom/src/views/dashlets.js

define('custom:views/dashlets/hilfefunktion', 'views/dashlets/abstract/base', function (Dep) {
return Dep.extend({
name: 'Hilfefunktion',
template: 'custom:dashlets/hilfefunktion',
})
});

in custom/Espo/Custom/Resources/metadata/dashlets.json

{
"view": "custom:views/dashlets/hilfefunktion",
"aclScope": "ArtCollectionWorks",
"options": {
"fields": {
"title": {
"type": "varchar",
"required": true
},
"autorefreshInterval": {
"type": "enumFloat",
"options": [0, 0.5, 1, 2, 5, 10]
}
},
"layout": [
{
"rows": [
[
{"name": "title"},
{"name": "autorefreshInterval"}
]
]
}
]
}
}

Thank you in advance.

[telecastg]

Thanks for the code, unfortunately I can't think of a "simple" way to accomplish what you want, which is to be able to edit "dynamically" static template content.

In my opinion, what you would need to do is to create a "menuItems" entity with fields for "title" and "content" and instantiate one record for each menu item.

You would also need to create a custom view to fetch the collection (list) and a custom template render the results inside the dashlet in the format that you want, instead of using the standard "list" display.

Although I am confident that this could be implemented, I don't have any sample code that would help

If I can think of something else I will certainly will let you know.

Best Regards