UI Builder - Control visibility of 'Side navigation' Pages

[SN_Learn]

In this article, we will see how to restrict the visibility of Side navigation in Workspace:

The name of the Side navigation pages are:

Requirement(s):

• Home should be visible to all.
• List should be visible to users either with 'itil' or 'admin' roles.
• Priority Action should be visible to users with both 'admin' and 'itil'

Setup:

• Navigate to 'Now Experience Framework' > Experiences
• Search for workspace in name field
• Open the record and go to related list > UX Page Properties > chrome_toolbar

Initial JSON: 

[
    {
        "id": "home",
        "label": {
            "translatable": true,
            "message": "Home"
        },
        "icon": "home-outline",
        "routeInfo": {
            "route": "home"
        },
        "group": "top",
        "order": 100,
        "badge": {},
        "presence": {},
        "availability": {},
        "viewportInfo": {}
    },
    {
        "id": "record-list",
        "label": {
            "translatable": true,
            "message": "List"
        },
        "icon": "list-marker-fill",
        "routeInfo": {
            "route": "record-list"
        },
        "group": "top",
        "order": 100,
        "badge": {},
        "presence": {},
        "availability": {},
        "viewportInfo": {}
    },
    {
        "id": "priority-actions",
        "label": {
            "translatable": true,
            "message": "Priority Actions"
        },
        "icon": "journal-list-fill",
        "routeInfo": {
            "route": "priority-actions"
        },
        "group": "top",
        "order": 200,
        "badge": {},
        "presence": {},
        "availability": {},
        "viewportInfo": {}
    }
]

For 1st Case, No Changes required.

For 2nd Case, The changes in the JSON will be as below:

  {
    "id": "record-list",
    "label": {
      "translatable": true,
      "message": "List"
    },
    "icon": "list-marker-fill",
    "routeInfo": {
      "route": "record-list"
    },
    "group": "top",
    "order": 100,
    "badge": {},
    "presence": {},
    "availability": {
  "roles": [
        "itil,admin"
      ]
},
    "viewportInfo": {}
  },

If either of role is present then the side navigation page will be visible.

"roles": [
        "itil,admin"
      ]

For the 3rd Requirement, updated JSON:

  {
    "id": "priority-actions",
    "label": {
      "translatable": true,
      "message": "Priority Actions"
    },
    "icon": "journal-list-fill",
    "routeInfo": {
      "route": "priority-actions"
    },
    "group": "top",
    "order": 200,
    "badge": {},
    "presence": {},
    "availability": {
  "roles": [
        "itil","admin"
      ]
},
    "viewportInfo": {}
  }

User should have both the roles in order to view the side navigation page:

"roles": [
        "itil","admin"
      ]

Final JSON of chrome_toolbar:

[
    {
        "id": "home",
        "label": {
            "translatable": true,
            "message": "Home"
        },
        "icon": "home-outline",
        "routeInfo": {
            "route": "home"
        },
        "group": "top",
        "order": 100,
        "badge": {},
        "presence": {},
        "availability": {
 "roles": [
    "itil,admin"
      ]
},
        "viewportInfo": {}
    },
    {
        "id": "record-list",
        "label": {
            "translatable": true,
            "message": "List"
        },
        "icon": "list-marker-fill",
        "routeInfo": {
            "route": "record-list"
        },
        "group": "top",
        "order": 100,
        "badge": {},
        "presence": {},
        "availability": {},
        "viewportInfo": {}
    },
    {
        "id": "priority-actions",
        "label": {
            "translatable": true,
            "message": "Priority Actions"
        },
        "icon": "journal-list-fill",
        "routeInfo": {
            "route": "priority-actions"
        },
        "group": "top",
        "order": 200,
        "badge": {},
        "presence": {},
        "availability": {
 "roles": [
    "itil","admin"
      ]
},
        "viewportInfo": {}
    }
]

ITIL users are not able to view the Priority Action as both the roles condition is not satisfied.

_____________________________________

That's it for this article, Hope it helps!

[GoutamC]

Hi

I have requirement where I want to "List" to be visible for users with "ITL" role. But restrict "ITIL " users with who has role "ABC". 

Example:

User A: Role "ITIL" - Allow

User B: Roles "ITIL" & "ABC" - Restrict

Thanks in advance

[gwen]

This doesn't work for me at all.  The button in the sidebar remains visible for all users even though I had added "roles" : ["admin"] to the availability.
Also, there is no difference as far I can see between your list and priority action??

[SN_Learn]

Hi @GoutamC ,

One of the approaches could be to create a new role and assign it to a new group and add all the required users to that group so that they can inherit this new custom role.

Now you can utilize the 3rd use case from above:

"roles": [
        "itil","<your_custom_role>"
      ]

Would love to hear any other ideas around it.

[SN_Learn]

Hi @gwen ,

I have updated the chrome_toolbar of SOW just to test it again and updated the 'Dashboard'  as below:

OOB it is set to 'ITIL'  but I have updated to admin for testing purpose.

Result:

Impersonated with Bow(non admin user) and Dashboard is not visible as below:

Checking the same with 'System admin' it is showing as below:

Also, thank you for pointing out the issue with the list and priority action script, I have modified them in the article.

Summary:

Visible to all

"availability": {},

If either of role is present then the side navigation page will be visible.

"roles": [
        "itil,admin"
      ]

User should have both the roles in order to view the side navigation page:

"roles": [
        "itil","admin"
      ]

Thanks!