How to open directly workflow task list edit form in SharePoint task list?

In this SharePoint workflow tutorial, how we can Send Task Form URL inside the Email in SharePoint Designer 2013 Workflow. And also we will discuss we can open directly task list edit form in SharePoint 2013/Online workflow.

We can directly open the SharePoint task list edit form in SharePoint Online/2013 visual studio workflow or designer workflow by using JavaScript code.

We will check the below things here:

  • Open directly workflow task list edit form in SharePoint 2013/Online task list
  • Send Task Form URL inside the Email in SharePoint Designer 2013 Workflow
  • How to hide SharePoint Online content type dropdown in task list edit form using jQuery
  • Hide approve reject workflow approval button from the ribbon in SharePoint online using CSS
  • SharePoint online task list form Approve Reject button disappears Visual Studio workflow

Open directly workflow task list edit form in SharePoint 2013/Online task list

Recently we were working in visual studio 2015 workflow for SharePoint online site. Here we had created a few tasks, and our requirement was that if the user clicks directly from the email from the Approve/Reject link then directly it should open the Edit form of the task.

We were using the below workflow variables to generate the Approve\Reject link.

<a href='%TaskSpecial: TaskUrl%'><b>Approve / Reject</b></a>

The above link will open the display form when any user clicks on the Approve/Reject link.

Let us say our task list display form URL is like below:

https://onlysharepoint2013.sharepoint.com/sites/Bhawana/Lists/MyTasks/DispForm.aspx?ID=1

One solution we can do is we can write the below code inside a script editor web part and put inside the particular task list’s display form.

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

$(document).ready(function () {

var origUrl = window.location.toString();
var editUrl = origUrl.replace(“MyTasks/DispForm”,”MyTasks/EditForm”);
window.location = editUrl;

});
</script>

Or you can also put the below code inside the master page.

<script type=”text/javascript”>
var origUrl = window.location.toString();
var editUrl = origUrl.replace(“MyTasks/DispForm”,”MyTasks/EditForm”);
window.location = editUrl;
</script>

Now, whenever the user clicks on Approve/Reject button from the email body it will open the Edit form directly.

But one problem you will face is even if you try to open the Display form in the task list itself it will also redirect to the Edit form. So the user will not be able to see the Display form ever.

To solve the issue you can pass some query string parameter in the link in the email approve/reject link and then you can check if the above string contains the particular string then only you redirect.

Basically, you can do some string operation to handle that.

Send Task Form URL inside the Email in SharePoint Designer 2013 Workflow

In this SharePoint tutorial, we will discuss how to send task form URL inside the Email in SharePoint designer 2013 workflow in SharePoint Online/2013/2016.

We can add task form URL inside in SharePoint 2013 designer workflow email. In the designer workflow, we wanted to send the task item URL in the email body so that the user can click on that and open the task form.

You can use the below variable in the email body which will generate the task list form URL.

[%Current Task:Form_URN%]

You can also send like below,

<a href="http://Site URL/Lists/Tasks/EditForm.aspx?ID=[Item ID]">Edit item</a>

Once the user approves/rejects, the user will be redirected to the task list. But sometimes you might get the requirement to redirect to the source list instead of the task list.

In those requirements you can append the Source parameter like below:

[%Current Task:Form_URN%]&Source=https://onlysharepoint2013.sharepoint.com/sites/Bhawana/Lists/Announcements/AllItems.aspx

How to hide SharePoint Online content type dropdown in task list edit form using jQuery

This SharePoint tutorial explains, how to hide content type drop-down from SharePoint Online, which comes in edit form inside SharePoint online task list. The same solution will also work for SharePoint 2013 and SharePoint 2016.

Recently we were working in a visual studio workflow, where we have added the various custom content types into the task list.

By default whenever a task got created and a user wants to approve/reject the task from the edit form, the content type dropdown appears like below:

Hide SharePoint online content type in task list edit form using jQuery
Hide SharePoint online content type in task list edit form using jQuery

As per the requirement, we need to hide the content type drop down from the task list edit form.

Hide content type dropdown in SharePoint

We can hide the content type drop-down by using below jQuery code in SharePoint Online/2013/2016.

Either we can put the code inside the Edit form task list or we can also put inside master page.

To put inside the page, Edit the page -> And then add a script editor web part. Inside the script editor web part put the below code. Once you Save the page and refresh it will hide the dropdown.

<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("select[id*='ContentTypeChoice']").closest('tr').hide();
});
</script>

Similarly we can put the code inside a master page. But since when you put the code inside master page, it might hide every list, so I had added one condition like below:

  • First retrieve the browser URL like : var pageURL = $(location).attr(“href”);
  • Then if the URL contains the list URL then only it will hide.
if( pageURL.indexOf('/WorkflowTasks/') >= 0)
{
}

The full code like below:

<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
var pageURL = $(location).attr("href");
if( pageURL.indexOf('/WorkflowTasks/') >= 0){
$("select[id*='ContentTypeChoice']").closest('tr').hide();
}
});
</script>

Once you put the above code inside the master page, it will hide the content type.

Hide content type dropdown in task list edit form using jQuery SharePoint 2013
SharePoint 2013 Hide content type dropdown in task list edit form using jQuery

I hope this SharePoint tutorial explains, how to hide SharePoint Online/2013/2016 content type dropdown in task list edit form using jQuery.

Tags: SharePoint hide content type, SharePoint hide content type in the edit form, SharePoint 2013 hide content type in edit form, SharePoint 2013 hide content type field in the edit form, SharePoint online hide content type in task list edit form.

Hide approve reject workflow approval button from the ribbon in SharePoint online using CSS

Now, we will see, how we can hide Approve/Reject workflow ribbon button in SharePoint online using CSS.

Recently we were developing few workflows using visual studio as a SharePoint hosted add-in using SharePoint online.

For those custom development, we have custom Approve and Reject button and we have added some approval logic inside it. We do not want business users to click on the Approve/Reject button which presented inside the ribbon.

This ribbon button is presented inside lists, document libraries, task forms ribbons. And based on the window size, the button also changed.

hide approve reject workflow approval button from ribbon sharepoint
hide approve reject workflow approval button from ribbon

We can hide the ribbon button using CSS, for this we need an id and we can retrieve using any developer tool.

Below are few button ids like below for different list, libraries or task forms.

Ribbon.Tasks.Workflow.Moderate-Large
Ribbon.ListItem.Workflow.Moderate-Small
Ribbon.ListItem.Workflow.Moderate-Large
Ribbon.ListItem.Workflow.Moderate-Medium
Ribbon.Documents.Workflow.Moderate-Small
Ribbon.Documents.Workflow.Moderate-Large
Ribbon.Documents.Workflow.Moderate-Medium
Ribbon.ListForm.Display.Manage.ApproveReject-Small
Ribbon.ListForm.Display.Manage.ApproveReject-Medium
Ribbon.ListForm.Display.Manage.ApproveReject-Large

Now to hide the buttons, we have to write css file. We can edit the page and add a script editor web part or a content editor web part and you can write the below code.

<style type="text/css">
a[id="Ribbon.Tasks.Workflow.Moderate-Large"]
{
display:none;
}
</style>

Based on the list or library, you can change the above id.

Also, you can add the CSS in a different file and refer it inside the master page.

After this, the ribbon button will be hidden.

I hope this will be helpful to hide approve reject workflow approval button from the ribbon in SharePoint online using CSS.

SharePoint online task list form Approve Reject button disappears Visual Studio workflow

SharePoint Approved and Rejected buttons not appearing in task form in Visual Studio 2015 workflow. This SharePoint workflow tutorial explains how to solve SharePoint task list approve and reject button disappears issue.

By using SharePoint workflows we can automate various business processes. SharePoint workflows are designed to save you time and effort and to bring consistency and efficiency to tasks that you perform on a regular basis. You can automate fully your daily repeated tasks using workflows.

SharePoint 2013 workflow platform is based on Windows Workflow Foundation 4 (WF). Unlike SharePoint 2010, in SharePoint 2013 or SharePoint Online, the workflow execution engine now lives outside of Office 365 and SharePoint Server 2013, in Microsoft Azure.

We can develop workflows using out of box feature, using SharePoint 2013 Designer or by using Visual Studio 2015.

Recently we were working in a visual studio 2015 workflow for SharePoint online sites. The workflow we have developed as a SharePoint hosted add-in. In that workflow, we have added a custom task content type which was inherited from Workflow Task (SharePoint 2013) parent content type.

After the workflow deployment, we were checking to approve or reject few tasks, but we noticed the Approved and Rejected buttons are not appearing in the Edit task form. So we were not able to approve or reject the tasks. We can only see Save and Cancel button like below:

approve reject button sharepoint 2013
SharePoint Approve Reject Button

SharePoint online task list form Approve Reject button disappears

When we do an analysis we found out that, for one of our requirement we were making the “% Complete” column as hidden. Ideally it is advised that “% Complete” and “Task Status” columns should not be hidden. So we make the “% Complete” column as Optional like below:

approve/reject is disabled in sharepoint 2013
Approve Reject button SharePoint 2013

After this we were able to see the “Approve” and “Reject” button properly like below:

sharepoint approve reject button greyed out
sharepoint approve reject button greyed out

This will help you to fix, SharePoint online task list form Approve Reject button disappears issue.

You may like following SharePoint designer workflow tutorials:

Hope this will be helpful to send Edit Task Form URL inside the Email in SharePoint Designer 2013 Workflow.

We checked the below things here:

  • Open directly workflow task list edit form in SharePoint 2013/Online task list
  • Send Task Form URL inside the Email in SharePoint Designer 2013 Workflow
  • How to hide SharePoint Online content type dropdown in task list edit form using jQuery
  • Hide approve reject workflow approval button from the ribbon in SharePoint online using CSS
  • SharePoint online task list form Approve Reject button disappears Visual Studio workflow
>