Hiding Manage Parent button in Sharepoint online

Question

Dear everyone,

We would like to ask for advice of following customization:

In Sharepoint server 2019, we hid "Manage Parent" button (when modifying permission of site or list item) by inserting a custom script to

C:\Program Files\Common Files\microsoft shared\Web Server Extensions\16\TEMPLATE\LAYOUTS\user.aspx

(doing directy in the server where Sharepoint server was installed).

The script:

<script type="text/javascript">
var error = document.getElementById("Ribbon.Permission.Parent.ManageParent-Large");
if(error) error.style.display = 'none';
</script>

How can we do similarly in Sharepoint 365 (online)?

Thanks in advance.

Answer 1

You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience.

https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/overview-extensions

It looks like you’re trying to use the document.getElementById("Ribbon.Permission.Parent.ManageParent-Large") method within a SharePoint Framework (SPFx) extension. This method is used to access a specific HTML element by its ID. However, in the context of SPFx, there are some considerations to keep in mind:

DOM Manipulation: Directly manipulating the DOM using methods like getElementById is generally discouraged in SPFx. Instead, you should use React or other frameworks that SPFx supports to manage the DOM. This ensures better compatibility and maintainability.

Permissions Ribbon: The ID "Ribbon.Permission.Parent.ManageParent-Large" suggests you’re trying to interact with a specific part of the SharePoint ribbon. Ensure that this element exists on the page when your code runs. You might need to wait for the page to fully load or for the specific element to be rendered.

SPFx Lifecycle: Use the appropriate lifecycle methods in your SPFx extension. For example, you can place your DOM manipulation code inside the onInit or render methods of your extension.

Here’s a basic example of how you might structure your code:

import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import { BaseApplicationCustomizer } from '@microsoft/sp-application-base';

export interface IMyExtensionProperties {
  // Define your properties here
}

export default class MyExtension extends BaseApplicationCustomizer<IMyExtensionProperties> {
  @override
  public onInit(): Promise<void> {
    Log.info('MyExtension', 'Initialized');
    
    // Ensure the DOM is fully loaded
    window.addEventListener('load', () => {
      const element = document.getElementById('Ribbon.Permission.Parent.ManageParent-Large');
      if (element) {
        // Perform your actions here
        console.log('Element found:', element);
      } else {
        console.log('Element not found');
      }
    });

    return Promise.resolve();
  }
}

If there are any misunderstandings, please let me know

Best regards，

Maycon Novaes

If the Answer is helpful, please click "Accept Answer" and upvote it.

Answer 2

You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience

https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/overview-extensions

If there are any misunderstandings, please let me know

Best regards，

Maycon Novaes

If the Answer is helpful, please click "Accept Answer" and upvote it.