christopheraucq

How to hide buttons in SharePoint form ?

Blog Post created by christopheraucq Champion on Feb 26, 2016

This is a generic title to solve a specific issue in a Workflow Task list on SharePoint online.

Apparently, there is still a open issue in a Workflow Task list with people whom can edit and save Task even they are not the assignee.

On February 2015, I posted this question:

"Is it possible to let people who needs to Approve/Reject to give only editable access to their Workflow Tasks in O365 (Assign Item Permissions in Assign a Task is not available ... yet). It seems from what I have read from different sources, that they need to have at least Contributor access.

But I cannot find a way to avoid them to be able to edit/read the other Workflow Task in the list.

I have tried also to update permissions after/while task is created but if I try after, this is not possible a the workflow is blocked until Task is completed. I have also tried parallel but it seems that I cannot get the stored Task ID in the parellel branch as it is empty and I suppose out of context."

This question was never answered except by me but I never had the time to explain the full solution and the same question appears again this month without answer.

So I decide to explain what I developed.

In the Workflow Task List, I am adding Javascript to the Default Edit Form to hide buttons that allows to Edit, Save, Submit and Delete the Task if the current user is not the Assignee. Please be aware that this is not a security feature.

1. How to Edit the Default Edit Form

In the List Ribbon, in the Customize List group, click Form Web Parts and click Default Edit Form

2. How to add Javascript code to the Form

A. Click Add a Web Part

B. Select Media and Content and then Script Editor and click Add on the right

C. Click Edit Snippet

 

3. Here is the JavaScript

Do not copy the code form here but download the text file HiddeButtons.txt and copy it from there.

Before you copy the code, pay attention to the following.

Assigned To is the column name containing the name of the Assignee

Under //Hide buttons if user is not the assignee, there are two different parts

- //SharePoint buttons for standard SharePoint buttons

Ribbon.ListForm.Edit.Commit.Publish-Large is for the Save & Close button

Ribbon.ListForm.Edit.Actions.DeleteItem-Large is for the Delete Item button

- //Customized Buttons is for buttons your customized Content Type may contains

In my case, I have added a Submit To Manager and a Save buttons

Please note that as there is already a standard SharePoint SaveItem button, I need to reference it with [1].

If you do not add customized buttons, you can remove this part.

 

<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function() {
  var context = new SP.ClientContext.get_current();
  var web = context.get_web();
  var user = web.get_currentUser(); //must load this to access info.
  context.load(user);
  context.executeQueryAsync(function() {
    var strAssignedTo = "";
    var strControlAssignedTo = "Assigned To";
    var ppDiv = $("[id$='ClientPeoplePicker'][title='" + strControlAssignedTo + "']");
    var spPP = SPClientPeoplePicker.SPClientPeoplePickerDict[ppDiv[0].id];
    spPP.AddUnresolvedUserFromEditor(true);
    if (!spPP.HasInputError) {
      var userKeys = spPP.GetAllUserInfo();
      var myUser = userKeys[0];
    }

    //Hide buttons if user is not the assignee
    if (myUser.Key != user.get_loginName()) {
      //SharePoint buttons
      document.getElementById("Ribbon.ListForm.Edit.Commit.Publish-Large").style.display = "none";
      document.getElementById("Ribbon.ListForm.Edit.Actions.DeleteItem-Large").style.display = "none";
      //Customized Buttons
      var submitDiv = $("*[id$='Submit to Manager']");
      submitDiv[0].style.display = "none";
      var saveDiv = $("*[id$='SaveItem']");
      saveDiv[1].style.display = "none";
    }
  }, function() {
    alert(":(");
  });
});

</script>

 

Click Insert and Stop Editing to Save the form.

 

Some explanations about the Javascript

It gets the information of the current user

     var context = new SP.ClientContext.get_current();
     var web = context.get_web();

     var user = web.get_currentUser(); //must load this to access info.
     context.load(user);

Then gets the information of the Assignee

    var strAssignedTo = "";
    var strControlAssignedTo = "Assigned To";
    var ppDiv = $("[id$='ClientPeoplePicker'][title='" + strControlAssignedTo + "']");
    var spPP = SPClientPeoplePicker.SPClientPeoplePickerDict[ppDiv[0].id];
    spPP.AddUnresolvedUserFromEditor(true);
    if (!spPP.HasInputError) {
      var userKeys = spPP.GetAllUserInfo();
      var myUser = userKeys[0];
    }

To compare themn and

     if (myUser.Key != user.get_loginName())

To decide if the buttons need to be hidden or not.

 

Nothing specific to Nintex here but it can help Workflows in O365 for sure.

Christophe Raucq

Attachments

Outcomes