christopheraucq

Hide Edit Item button if user is not allowed to edit using

Blog Post created by christopheraucq Champion on May 4, 2015

In this Article, you will learn

  • How to set a Calculated Value when the form is loaded
  • How to develop JavaScript to get SharePoint Context Properties and Methods
  • How to wait the loading of a JavaScript Library
  • How you can hide Buttons or Controls based on user permissions

 

In a Nintex Form in O365, even the user has only Read permissions, the Edit Item button is visible.

Without Control.JPG

If the user clicks Edit Item, then the Save button is visible

Without Control Save.JPG

And if the user clicks Save, then (s)he receives this message

Without Control Save Access Denied.JPG

To avoid this situation, I propose to hide the Edit Item button if the user is NOT allowed to Edit List Items.

For that, we need to know what are the user roles in the context of the List Items when the form is loaded.

Nintex Form let's you add JavaScript in the Custom JavaScript section of the Form Settings

Custom Javascript.JPG

Here is to how to develop JavaScript to get SharePoint Context Properties and Methods.

The SharePoint Client Context provides features to program against a SharePoint site using JavaScript.

It helps to access methods and properties that SharePoint provides.

For example, you can access a List of your SharePoint site and create an new item.

But in our case, we need to get the user roles.

As we can maybe re-use the returned value, let's add a Calculated Control on the Form.

Here is the Control Settings. Note the Name and CSS Class.

Control Setting.JPG

 

The JavaScript begins by getting the SharePoint Context

var contextClient = new SP.ClientContext.get_current();

var web = clientContext.get_web();

Then get the permissions of the current user

var ob = new SP.BasePermissions();

What is important in the next line is the editListItems that gives the information we need.

ob.set(SP.PermissionKind.editListItems);

Then we want to know if the user has permission to Edit the item

var per = web.doesUserHavePermissions(ob);

Now we execute the Query asynchronously

clientContext.executeQueryAsync(function () {

Here is how to set a Calculated Value when the form is loaded

Let's store the returned value as text in the Calculated Control ('true' or 'false') using the CSS Class.

      NWF$(".nf-IsAllowedToEdit label.nf-calculation-control").text(per.get_value());

Let's test if it is 'false' and in that case, hide the Edit button in the Ribbon. Same for the Save button in the Ribbon and Save button in the Form.

Here is how you can hide Buttons based on user permissions

      if(NWF$(".nf-IsAllowedToEdit label.nf-calculation-control").text() == 'false') {

                 NWF$("#RibbonEditButton").hide(); 

                 NWF$("#RibbonSaveButton").hide();

                 NWF$(".nf-save-button").hide();

             }

}

But you need to know that if you put this code like this in the Custom Javascript, it will not run because the JavaScript Library containing the code that helps you to build this, is not loaded yet.

Here is how to wait that a JavaScript Library is loaded

Thanks to Jason Cleveland whom develops the necessary JavaScript code, we can now wait before executing our script.

 

var pollSP;

NWF.FormFiller.Events.RegisterAfterReady(function () {

    pollSP = setInterval(checkSPLoad, 500);

});

function checkSPLoad() {

    if (clientContext) {

        window.clearInterval(pollSP);

        onSPLoad();

    }

}

function onSPLoad() {

     //Our code must come here

}

 

The full script is available in the Attached Form.

 

You can find all permissions that are used to define user roles in this document: SP.PermissionKind Enumeration

 

Did you know? If there is no Save button on the form, there is no save button in ribbon.

 

Quiz: As I hide the Edit Item button, the user should never see the Save button. So why do I hide also the Save button?

Attachments

Outcomes