ESPO CRM user help

[peterberlin]

Hello,

to support (inform) the users in using ESPO CRM , we use the tooltips. This works very well.
But for complex entities this is not a solution.
It would be good to link to a help system (e.g. mkdocs) or just to a txt or HTML file.
But this linking cannot be done with a URL field.

Maybe there are other ideas?

peter

[shalmaxb]

I do that with the Knowledge Base in the following form:

Wherever I need a more thorough description on what to do in a special part of my application I create a Bootstrap Link Button with the help of the WYSIWYG Field (or alternatively with the Labels Field by eblasoft: https://www.eblasoft.com.tr/).
The button is linked to the respective article in the knowledgebase and formatted in a way, that that article is displayed as a modal, that slides in from the right side, as usual in espoCRM.
As espoCRM uses Bootstrap it is quite easy to manage.

[peterberlin]

Hello
I like the solution approach very much.
I understand what you mean about the bootstrap link button.
But how this can work with a WYSIWYG field, I don't understand. It is empty in every new record.
How can the info be displayed modally?

[shalmaxb]

I had this idea to describe the main functions of an entity. So I created a WYSIWYG field with a default content (configured in the entity manager, so the content will be the same for every record).

In this field I put this code (here with dummy text):

<div class="container content">
<div class="row align-items-center content">
<div class="col-12 text-center">
<button type="button" class="btn btn-secondary px-4 py-3" data-toggle="modal" data-target="#exampleModalCenter">
Instructions
</button>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<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">How to use this function</h3>
<p class="mb-4">Requirements
EspoCRM can run on most hosting providers. Requirements are the following:
PHP 7.4 and later,
MySQL 5.7 (and later) or MariaDB 10.1 (and later).
See server configuration article for more information.

1. Download EspoCRM installation package
To get the latest version of EspoCRM, follow the download page link.

2. Upload EspoCRM files to your server
Once the download is complete, upload the package to your web server. To upload it, you can use SSH, FTP or the hosting administration panel. Extract the archive to your public web server directory (e.g. public_html, www).

Note: If you have only FTP access, you need to extract the archive before uploading to your web server.</p>

</div>
</div>
</div>
</div>

In my case I placed the instruction button into the side panel.

Here the button (first one is created with WYSYWIG field, the second one with the mentioned extension "Rich Text Label" by Eblasoft):


The advantage of the Eblasoft label is, that there is no field title (in this case "Modal").

The modal looks this way:



It is possible also to use images and other HTML elements. The idea with linking to the knowledgebase does not seem to be possible. So you will have to insert the content for the modal into the code of the WYSIWYG field.

Edit: It is possible to link from the modal to the Knowledgebase, see post #8

[shalmaxb]

Hello
I like the solution approach very much.
I understand what you mean about the bootstrap link button.
But how this can work with a WYSIWYG field, I don't understand. It is empty in every new record.
How can the info be displayed modally?

I tried to realize the link to the knowledge base, but that did not work within this method.

Edit: It is possible to link from the modal to the Knowledgebase, see post #8

[peterberlin]

Many thanks for the extensive help.

I also had the idea with the sidepanel.
Now I will try a few things.
I'm sure this topic is also interesting for other users here in the forum.

[shalmaxb]

The HTML code for the button and modal is some aletoric code, I found in the internet. There maybe better examples, but the approach is given by Bootstrap.

[shalmaxb]

Meanwhile I had the time to get this idea to a better result:

My aim was to provide an help-button associated to the current entity for more thorough explanations and instructions using that entity. The button should be placed in the side panel.
When hitting the button, a modal (as usual in espoCRM e.g. for large view of images) should open with a list of help topics.
As espoCRM uses Bootstrap (version 3.3.7), I used the possibilities already implemented.



The Help Button spreading over the width of the parent container




The modal with heading and an accordion, when button is clicked, all panels closed




The modal with one accordion panel open

Inside the modal it is possible to use normal HTML and I placed there a link to the Knowledgbase, becaus I have some really extent articles, that I would not place entirely into the accordion. The link to the Knowledgebase opens in a separate window to not interrupt working in the entity.

I attach the code for this example here. To realize the button and the modal you may use the WYSIWYG field or the Rich Text Label from Eblasoft - Eymen Elkum, if you don`t want to have a field caption.

<!-- espoCRM uses Bootstrap 3.3.7 - accordingly the code of that version is used - you may find it here: https://getbootstrap.com/docs/3.3/ -->

<!-- create button according to Bootstrap - This button spreads over the width of the parent container, in my case the with of the side panel -->

<button type="button" class="btn btn-block btn-danger" data-toggle="modal" data-target="#exampleModalCenter">
Hilfe
</button>

<!-- starting the modal, which opens as usual in espoCRM from the top right position -->

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-md modal-dialog-centered" role="document">
<div class="modal-content rounded-0">
<div class="modal-body py-0">

<!-- place a heading for the modal here -->

<h3 class="mb-4">HEADING</h3>

<!-- start the accordion - all panels are closed, when the modal opens, but you can change that to your liking -->

<p class="mb-4"></p><div id="accordion" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseOne" data-parent="#accordion" data-toggle="collapse">
<span class="glyphicon glyphicon-menu-right text-success"></span> Accordion Panel Title 1
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapseOne">
<div class="panel-body"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a</p><br><p><a href="LINK TO THE KNOWLEDGEBASE" rel="noopener noreferrer" target="_blank">LINK TO THE KNOWLEDGEBASE</a></p></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseTwo" data-parent="#accordion" data-toggle="collapse">
<span class="glyphicon glyphicon-menu-right text-info"></span> Accordion Panel Title 2
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapseTwo">
<div class="panel-body"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a</p><a href="LINK TO THE KNOWLEDGEBASE" rel="noopener noreferrer" target="_blank">LINK TO THE KNOWLEDGEBASE</a></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseThree" data-parent="#accordion" data-toggle="collapse">
<span class="glyphicon glyphicon-menu-right text-info"></span> Accordion Panel Title 3
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapseThree">
<div class="panel-body"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a</p><br><p><a href="LINK TO THE KNOWLEDGEBASE" rel="noopener noreferrer" target="_blank">LINK TO THE KNOWLEDGEBASE</a></p>

</div>
</div>
</div>

</div>
</div>
</div>
</div></div>

[peterberlin]

The accordion effect looks good.
After thinking about it for a while, I decided on a solution.
Your first answer inspired me. I will now use the "Labels Cells" from Eymen, insert a bootstrap button and link to a new entity "Help".
I also thought about using the knowledge base. However, I have created a new entity because I have "boosted" our knowledge base and the mask has to be adapted again for the help.
I have not managed to position the modal display in the centre of the window. That is why I decided against it.

[shalmaxb]

Placing the link to the knowledgebase has the advantage, that there normally already is written something, but your approach with the Help-Entity is very attractive, as it provides a better editing of help topics.

I think I will try that option.

The position of the modal is coded in the css of the theme, which you could change by custom css, but this would cause to center all modals. I guess, you could create a new class for the help modal and declare it !important. But I did not test that, as I don`t need it.