Disable "like, views and save for later" elements

David Delcò AMUT 0 Reputation points
2023-07-19T14:05:15.4033333+00:00

Hi,

as suggested by a Microsoft Community Moderator, I post my request here.

When building modern SharePoint pages, at the bottom of the page you can turn off comments.

However, the "like", "views" and "save for later" elements can also disturb depending on the type of site. In my case they serve absolutely no purpose and, even if small, they are disturbing.

It would be interesting if the developers would provide buttons to enable or disable them at will.

Thank you very much.

Good work to everyone.

David

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
11,173 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. ChengFeng - MSFT 5,045 Reputation points Microsoft Vendor
    2023-07-20T08:54:59.96+00:00

    Hi @David Delcò AMUT

    From a developer's point of view, it is possible to use SPFX to create a new Web part, and then modify the properties of elements through click events.

    User's image

        pointer-events: none;
    

    User's image

    In spfx, the operation on the element is realized by calling the element class name.

    User's image

    Here is code:

    Button CSS:

    .styled {
      border: 0;
      line-height: 2.5;
      padding: 0 20px;
      font-size: 1rem;
      text-align: center;
      color: #fff;
      text-shadow: 1px 1px 1px #000;
      border-radius: 10px;
      background-color: rgba(220, 0, 0, 1);
      background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
      box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
    }
    
    .styled:hover {
      background-color: rgba(255, 0, 0, 1);
    }
    
    .styled:active {
      box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
    }
    
    

    User's image

    Here is code:

    User's image

    
    import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
    
    
    import styles from './HelloWorldWebPart.module.scss';
    
    
    export interface IHelloWorldWebPartProps {
      description: string;
    }
    
    export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
    
      
    
      public render(): void {
        this.domElement.innerHTML = `
          <button id="rArrow" class="${styles.styled}"
            type="button " onClick="swap()">
        Add to favorites
          </button>
    
          
    
        </section>`;
        let clickEvent= document.getElementById('rArrow');
        clickEvent.addEventListener("click", (e: Event) => this.swap());
      }
      
      swap() {
    
        const element = document.querySelector(".a_ai_ada2ac09 ") as HTMLElement;
        if (element) {
          element.setAttribute("style", "pointer-events: none;"); // set  style  "pointer-events: none;"
        }
    
      }
    
    
    
    
    
      
    }
    
    

    Here is result:

    User's image

    User's image


    How to create SPFX Web part and upload it to sharepoint, please refer to the link below:

    https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page

    User's image


    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best Regards

    Cheng Feng

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.