Forum Discussion

MaverickCS5's avatar
MaverickCS5
Copper Contributor
Apr 12, 2024

Remove Read Only icon from list

Hi, I'm currently using an embeded list to display some status messages so it updates in real time, however it will show read-only icons for public users (which due to permissions it will).

 

Is there anyway to remove this using CSS code or anything?

  • BarryGoblon's avatar
    BarryGoblon
    Iron Contributor

    MaverickCS5 The approach I would recommend is to leverage the conditional formatting capabilities of the JSON formatting. By checking the `Editor` field of the list item, you can determine whether the current user has edit permissions or is a public user, and then show or hide the read-only icon accordingly. To implement this, you'll navigate to the list column you want to format, click on the "Column settings," and select "Format this column."

     

    In the JSON formatting editor, you can then add the code snippet I provided earlier, which will handle the logic of displaying or hiding the read-only icon based on the user's permissions. The beauty of this solution is that it's entirely self-contained within the list column configuration, without the need for any custom CSS or the deployment of a complex SPFx solution. This makes it a straightforward and efficient way to address your requirement, while aligning with Microsoft's recommended practices for customizing the user experience in modern SharePoint environments.

  • Rob_Elliott's avatar
    Rob_Elliott
    Bronze Contributor

    MaverickCS5 you can't just add CSS to a modern SharePoint page as this has been locked down by Microsoft. To do so you would either need to use the modern script editor webpart or build something in SPFx.

     

    Rob
    Los Gallardos
    Microsoft Power Automate Community Super User.
    Principal Consultant, SharePoint and Power Platform WSP Global (and classic 1967 Morris Traveller driver)

     

     

  • Aishamustaq340's avatar
    Aishamustaq340
    Copper Contributor
    To hide the read-only icons for public users in your embedded list, you can use CSS code to target and hide those icons specifically. Here's an example of how you can do it: ```css /* Hide read-only icons */ .public-user .read-only-icon { display: none; } ``` In this code: - `.public-user` is the class name you can use to target elements specific to public users. - `.read-only-icon` is the class name of the icons you want to hide. By setting `display: none;`, you're instructing the browser not to display those icons for public users. Make sure to replace `.public-user` with the actual class name or selector that identifies public users in your HTML markup. For more help use https://wasuppgb.com/

Resources