Tutorial - How to move the Stream to a side panel without js coding

[telecastg]

Use Case:
Move the Stream panel from the bottom of the detail view to a side panel for a given entity as shown below without having to write any javascript:



Step 1:
Prevent the Stream from displaying at the bottom section (default behavior) :
Go to Administration > Entity Manager > Work Order (or your entity) > Edit and un-check the box "Stream"

Step 2:
Create a custom clientDefs metadata file for your entity. In this case: custom/Espo/Custom/Resources/metadata/clientDefs/WorkOrder.json and enter the following code

{
    "sidePanels": {
        "detail": [
            "__APPEND__",
            {
                "name": "stream",
                "label": "Stream",
                "view": "views/stream/panel",
                "aclScope": "Stream"
            }
        ]
    }
}

Step 3:
Clear cache and rebuild.
The Stream will display on a side panel, below other side panels, but now Stream will be available in the Layout Manager to move as you wish.


In this example, I moved the panel to the top going to Administration > Layout Manager > Work Orders > Side Panel (Detail) and moved Stream above the default side panel.
If you do this also, then you will need to clear cache and rebuild again.

[esforim]

Awesome!

[Redwood]

Wow, this is awesome!! thank you telecastg. You are a Rock Star!

[Redwood]

Looks like you can turn stream back on in the entity once you have completed the added view. I wanted to have it in the side view and the bottom view and it seems to work fine. Thanks again!

[telecastg]

You're very welcome :-) thanks for sharing the tip about having both panels visible at the same time

[item]

telecastg waouwww many thanks man.. make a pull to document on github for this great job.

[esforim]

Yes, start pulling those commit. But I remember telecastg said he no good with Git. So someone might have to "steal" his code and pull on his behalf.

PS. I'm bad too, dunno Git that well.

[item]

Hello telecastg
no luck .. there was a little "issue".
your solution work for "admin" (no role defined).. but we have some "role".. and users with roles (like in attachment) see nothing.
for me is a little change to do somewhere ...

Regards

[telecastg]

Hi item

Try removing the line

"aclScope": "Stream"

from the custom clientDefs metadata file

The custom code should not affect Roles and their access rights. It only tells Espo to display the Stream panel on the side of a record detail view (WorkOrder in the example), so you can add the panel by modifying the layout, but if you have Roles that can not see the stream it is probably an issue with their permissions to access Stream for Contact, your target entity.

If that doesn't work, try changing Stream access to "All" instead of "Team", after all, granting access to Stream "All" won't change the fact that only Contacts in the same Team are visible anyway so you are not granting anything additional.

Regards

[item]

Hello @telecastg,
remove the "aclScope": "Stream" then it's ok. stream are visible for user with role.
Thanks man

[telecastg]

I'm glad that it worked :-) Best Regards

[item]

Hello telecastg
have you this issue (i have not search in deaph ..later certainly) :
i have 2 entity i have moved de stream to side panel and all 2 entity in detail view, i have loose "Follow" button on top right corner.


Regards

[telecastg]

Hello item, we don't use the "Follow" feature because we also don't use Stream but I will look into it and provide feedback.

[telecastg]

It looks like is something related with permissions also. I think that the particular user needs to have "Stream" access for the type of "Entity.

Here's the code that governs when a "Follow" button is created at the right top of the record's detail view:
client/src/views/detail.js

handleFollowButton: function () {
    if (this.model.get('isFollowed')) {
        this.addUnfollowButtonToMenu();
    } else {
        if (this.getAcl().checkModel(this.model, 'stream')) {
            this.addFollowButtonToMenu();
        }
    }
},

[item]

Hello telecastg,

i think we have found all requirement for make this as "feature request" ..
what i propose is :
create a checkBox in entityManager just near "stream:true/false" ...add... "streamIsSidePanel:true/false"
in entityDefs exist this : stream:true/false. .. add "StreamIsSidePanel:true/false"
and modify some js file like what you have posted... and it's done i think

Regards

[emillod]

Great tutorial
That's fantastic when user without dev knowledge can change something like that!