2

I wish to hide the edit items ribbon in one of the webpart pages where i am displaying a list view webpart.

I found the solution in this question, I am able to hide the ribbons.

<script type="text/javascript">
    function hideEdit() {
        var edit = document.getElementById("Ribbon.ListForm.Display.Manage.EditItem-Large");
        edit.style.display = "none";
    }       
    _spBodyOnLoadFunctionNames.push("hideEdit");
</script>

The problem is , i am getting some java-script errors in my console when i use the code

The error details are below

MyPage.aspx:751 Uncaught TypeError: Cannot read property 'style' of null
    at hideEdit (MyPage.aspx:751)
    at eval (eval at ProcessOnLoadFunctionNames (init.js:1), <anonymous>:1:34)
    at ProcessOnLoadFunctionNames (init.js:1)
    at ProcessDefaultOnLoad (init.js:1)
    at NotifyEventAndExecuteWaitingJobs (init.js:1)
    at NotifyScriptLoadedAndExecuteWaitingJobs (init.js:1)
    at $_global_core (core.js:1)
    at core.js:1

I tried to manually locate the element in the console using

document.getElementById("Ribbon.ListForm.Display.Manage.EditItem-Large")

and

$('#Ribbon.ListForm.Display.Manage.EditItem-Large')

both are returning null and undefined. I can't figure out this error and how is the above code working?

  1. Even if i change the id to something else i was able to hide the ribbons. why is it working?
  2. If the above queries are returning null it means the code is incorrect right?
  3. Where to get the proper ids of these ribbons?

  4. Did MS changed the ids in SharePoint-Online?

UPDATE

The above code achieves the desired functionality but i can't comprehend how. because the element is not present in any of my source code or in console.

So, please explain why it works even though element is absent and way to avoid the error.

EDIT: I tried escaping the . using \. but still the element is not present

2

It won't work because the ribbon needs time to be loaded. It's better to use CSS here.

You can add:

<style>#Ribbon\.ListForm\.Display\.Manage\.EditItem-Large { display:none }</style>
  • thanks for the tip using CSS.. somehow even after loading the page, and waiting for minutes and running $('#Ribbon\.ListForm\.Display\.Manage\.EditItem-Large') returns undefined/null.. doesn't that mean the element id is wrong? Did MS change the id in SharePoint Online.. – Abdul Hameed Mar 21 '17 at 9:18
  • Problem in my scenario is it is working but I don't know why.. :( – Abdul Hameed Mar 21 '17 at 9:19
  • You can click right on the Edit icon and select "Inspect element" (in a modern browser) and check what is the id for your element in the web console of your browser. – AymKdn Mar 21 '17 at 13:30
  • for the Item ribbon it was Ribbon.ListItem-title and for Edit Item button it was Ribbon.ListItem.Manage.EditProperties-Large both of which very different from Ribbon.ListForm.Display.Manage.EditItem-Large .. which is why it is confusing why the code works while still throwing the error.. – Abdul Hameed Mar 21 '17 at 13:40
0

Change this line

document.getElementById("Ribbon.ListForm.Display.Manage.EditItem-Large");

to

document.getElementById("Ribbon\.ListForm\.Display\.Manage\.EditItem-Large");

You need to escape the . to make the selector work

  • It is still throwing null :( . I searched for that id in the source code but it is not there.. It is like an invalid id. which generates error and somehow prevent the ribbon.. – Abdul Hameed Mar 20 '17 at 8:01
0

A the error indicates:

MyPage.aspx:751 Uncaught TypeError: Cannot read property 'style' of null
at hideEdit (MyPage.aspx:751)

your hideEdit() function is trying to get the style property in order to do the hiding. Looking at your function code:

<script type="text/javascript">
function hideEdit() {
    var edit = document.getElementById("Ribbon.ListForm.Display.Manage.EditItem-Large");
    edit.style.display = "none";
}    _spBodyOnLoadFunctionNames.push("hideEdit");

We can see that the document.getElementById() function failed to find the object thus returning null. In most cases in JavaScript when this happens, it's because the page load isn't complete. Try encapsulating your action in the $(document).ready() method like this:

<script type="text/javascript">$(document).ready(function() {var edit = document.getElementById("Ribbon.ListForm.Display.Manage.EditItem-Large");
    edit.style.display = "none";
}</script>

This way, your function should only execute after the page has fully loaded.

  • even after the page is fully loaded .. i ran the code on console and i got null. I checked the source code for the page and find that id anywhere. – Abdul Hameed Mar 20 '17 at 8:12
  • I dunno why it is working... eventhough it is throwing error it hides the ribbons except Browse and page – Abdul Hameed Mar 20 '17 at 8:13
  • and _spBodyOnLoadFunctionNames usually executes after DOM is loaded and rendered... so it executes after document.ready. – Abdul Hameed Mar 20 '17 at 9:49
0

To Hide edit item ribbon in SharePoint online

Use the below script :

$('a[id*="Ribbon.Documents.Manage.EditProperties-Large"]').remove();

To Hide delete item ribbon in SharePoint online

$('a[id*="Ribbon.Documents.Manage.Delete-Medium"]').remove();
-1

why are you complicating the basic functionality of a SharePoint page? "Permissions" should be significantly easier to manage and is one of SharePoint's core strengths

Solution

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.