Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    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:

    Click image for larger version  Name:	Stream in Side Panel.png Views:	12 Size:	80.1 KB ID:	61005​​

    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
    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.

    Click image for larger version  Name:	Work Order Side Layout.PNG Views:	8 Size:	39.2 KB ID:	61006
    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.
    Last edited by telecastg; 07-28-2020, 04:58 AM.

  • #2
    Awesome!

    Comment


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

      Comment


      • #4
        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!

        Comment


        • telecastg
          telecastg commented
          Editing a comment
          You're very welcome :-) thanks for sharing the tip about having both panels visible at the same time

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

        Comment


        • espcrm
          espcrm commented
          Editing a comment
          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.

      • #6
        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

        Comment


        • #7
          Hi item

          Try removing the line
          Code:
          "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
          Last edited by telecastg; 07-31-2020, 12:03 AM.

          Comment


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

          • telecastg
            telecastg commented
            Editing a comment
            I'm glad that it worked :-) Best Regards

        • #8
          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

          Comment


          • telecastg
            telecastg commented
            Editing a comment
            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.

        • #9
          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
          Code:
          handleFollowButton: function () {
              if (this.model.get('isFollowed')) {
                  this.addUnfollowButtonToMenu();
              } else {
                  if (this.getAcl().checkModel(this.model, 'stream')) {
                      this.addFollowButtonToMenu();
                  }
              }
          },

          Comment


          • item
            item commented
            Editing a comment
            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

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

          Comment

          Working...
          X