Add text dashlets

[tess15sep]

Hi! I am working on an espo instance with users having a different homepage. For clarity I would like to add a dashlet with text in the homedashboard which is shown directly, next to other dashlets. Something with for example some instructions for the users. I couldn't find a way to do this, could someone help me out? Thanks a lot!

[shalmaxb]

Hi, if you like to see, how I do it, follow this link (login data is in the login screen). I hope you don`t mind, it is in german, but you see the result of my approach: https://datenbank.arbeitskreis-werkverzeichnis.de/

If you want, I can put a little tutorial here, how to realize something like this.

[esforim]

Hey this is quite neat shal, hope you have time to post guide.

[shalmaxb]

Ok, here it comes, how I realized the dashlet you see here: https://datenbank.arbeitskreis-werkverzeichnis.de/
I created a database to compare softwares about artwork catalogues. This database has more than 100 software variants from more than 60 suppliers and is used to help users find an apropriate software for their purposes.

I made this dashlet on the home page to give a quick information about core functions of the database. All text and labels are in German, so if you need it in your language, merely change the terms and the content in the template.

To create this, it helps a lot, that espoCRM uses Bootstrap, as there are many code examples available in the web and espoCRM already incorporated a lot of the Bootstrap functionality, like Modals.
In my example you will see, that I changed the position of the modal centered, because I liked it more for my purpose. I also integrated a close x-button, although this is not necessary, as the modal also closes by clicking into the backdrop.
In the modal itself (via template) you may use HTML including images, videos or what you like.
You do not need a lot of coding and it is quite easy.

1. Create a file in client/custom/res/templates/dashlets/about.tpl (here we put all the bootstrap functionality and the HTML)

<!-- important to name the first modal with a number --><!-- Type and color of the button you configure by reference of Bootstrap -->
<button type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#exampleModalCenter1">
<!-- Put here the first button label -->Name of Button
</button>
<!-- Here you see, that the modal name appears again with the same index-->
<div class="modal fade" id="exampleModalCenter1" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<!-- These are all Bootstrap classes -->
<div class="modal-dialog modal-xl">
<div class="modal-dialog modal-md modal-dialog-centered" role="document">
<div class="modal-content rounded-0">
<!-- Here starts the content of the modal, beginning with the close button and the logo image -->
<div class="modal-body py-0">
<div align="right">
<button align="right" type="button" class="btn-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>
<img src="/client/custom/img/logo_gross_akwvz.png" height="50" width="auto">
<!-- The text content of the modal -->
<h3 class="mb-4">Über diese Datenbank</h3>
<p class="mb-4">
<div class="panel-body">
<h3>Heading</h3>
<p>HTML text block</p>
</div>
</div>
</div>
</div></div></div>
<br>
<! second button. Be aware of the index, which now has to be 2 -->
<button type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#exampleModalCenter2">
Button 2 Label
</button>
<! again the index number 2 appears here, followed by the same structure as in button 1 -->
<div class="modal fade" id="exampleModalCenter2" 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">
<div align="right">
<button align="right" type="button" class="btn-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>
<img src="/client/custom/img/logo_gross_akwvz.png" height="50" width="auto">
<p class="mb-4">
<div class="panel-body">
<h3>Heading</h3>
<p>HTML text content or what you need</p>
<p><br></p>
</div>
</div>
</div>
</div></div></div>
<br>
<!-- button 3, all the same as before -->
<button type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#exampleModalCenter3">
Button 3 Label
</button>
<div class="modal fade" id="exampleModalCenter3" 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">
<div align="right">
<button align="right" type="button" class="btn-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>
<img src="/client/custom/img/logo_gross_akwvz.png" height="50" width="auto">
<p class="mb-4">
<div class="panel-body">
<h3>Heading</h3>
<p>HTML content</p>
<p><br>
</p><h4><br></h4>
</div>
</div>
</div>
</div></div></div>

<br>
<!-- and one more button 4 -->
<button type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#exampleModalCenter4">
Button 4 Label
</button>
<div class="modal fade" id="exampleModalCenter4" 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">
<div align="right">
<button align="right" type="button" class="btn-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>
<img src="/client/custom/img/logo_gross_akwvz.png" height="50" width="auto">
<h3 class="mb-4">Datensätze ausdrucken</h3>
<p class="mb-4">
<div class="panel-body">
<h3>Heading</h3>

<p>HTML content</p>

</div>
</div>
</div>
</div></div></div>
<br>
<!-- Here some links for my purpose -->
<p>Link 1</a></span><br>

<span style="font-size: 14px;">Link 2</a></span><br>

<span style="font-size: 14px;">Link 3</a></span></p>

Create a file in client/custom/src/views/dashlets/about.js

define('custom:views/dashlets/about', 'views/dashlets/abstract/base', function (Dep) {
return Dep.extend({
name: 'Über die Vergleichsdatenbank zu Werkverzeichnis-Software', //the title of the dashlet
template: 'custom:dashlets/about',
})
});

create a file in custom/Espo/Custom/Resources/metadata/dashlets/About.json

{
"view": "custom:views/dashlets/about", [COLOR=#e67e22]//dashlet name[/COLOR]
"aclScope": "Software", [COLOR=#e67e22]//your entity[/COLOR]
"options": {
"fields": {
"title": {
"type": "varchar",
"required": true
},
"autorefreshInterval": {
"type": "enumFloat",
"options": [0, 0.5, 1, 2, 5, 10]
}
},
"layout": [
{
"rows": [
[
{"name": "title"},
{"name": "autorefreshInterval"}
]
]
}
]
}
}

Thats it. Remember, when copying code from the forum, the browser may put extra tags, which could make, that the code not works. Delete these added parts.