CSS List View customization based on SharePoint Group membership

Forms SharePoint Online
1

Hello.

Is there a way to implement custom CSS in the List View section in Designer (shown in picture) based on SharePoint Group membership?

image
image738×655 26.5 KB

eg. If current user is part of the "Admin" SharePoint Group they will be able to see the details pane button/icon and if they are not they won't be able to see the details pane button/icon?

Is the above possible to achieve somehow?

Thanks
Stormanh

2

Hello @stormanh,

Do you mean the Details in the drop down menu of a document in SharePoint document library?
image

3

Hi @mnikitina

I mean the information details panel at the List View level shown below:
image

Thanks
Stormanh

4

Hello @stormanh,

Thank you for clarification.

Yes, you can hide it using the CSS code in the List View tab. The code is the example:
image

.ms-CommandBarItem-link[data-automationid="detailsPane"] {
    display: none;
}
5

Hi @mnikitina

I'm aware this can be done like this for all users who view the out of the box SharePoint list view. However, my question is whether this CSS can be implemented based on conditions such as hide the details pane only if user is not a member of a "Admin" Sharepoint Group as an example.

Thanks,
stormanh

6

Hello @stormanh,

Oh, sorry!

Currently it is not possible to apply CSS styles to the SHarePoint list depending on the conditions like user permission.

We can add this feature, but that will be a paid support. If you are interested, please email us at support@plumsail.com

7

Hi @mnikitina ,
I got it enabled, but it's still not working :frowning: (SharePoint 2019)

.ms-CommandBarItem-link[data-automationid="detailsPane"] {
display: none !important;
}

image
image568×640 22.5 KB

image
image927×287 22.3 KB

8

Hello @Stepan,

Use this CSS code to hide the details pane button in SharePoint 2019:

.CommandBarItem[aria-label="Details. Open the details pane"] {
    display: none;
}
9

Hello @mnikitina , did not work. unfortunately.

10

@Stepan,

Try out this one:

.CommandBar-sideArea .CommandBarItem.beak-anchor.command.icon-only:last-of-type {
    display:none
}

If that doesn't work either, you can right-click the element and Inspect to find out its CSS class:

image
image883×528 46.2 KB

11

It works, thank you :slight_smile:

1 Like
12

Is there an article or something that describes what the art of the possible is with the CSS List feature?

13

Dear @sphilson,
Unfortunately, no article on that, as far as we're aware, but most things can be hidden or at least adjusted. Getting down to a specific thing requires to inspect the page closely in the browser with dev tools.

If you have any specific questions - let us know, we'll see if it can be done and how.