none
Validation on Task Form for Approved and Rejected buttons seperately RRS feed

  • Question

  • Hello

    We are running SharePoint Online and want to have validation on Workflow Tasks Edit Form. The requirement is that if the user clicks on Approved we need to check a particular field value for validation while if the user clicks on Rejected there is a different field that will be checked. However we are not able to capture which button was clicked.

    The solution mentioned everywhere has event passed from the click function which doesn't apply to the scenario in our case. We tried event.target but of course the console.log shows reference error event is not defined.

    How can we capture which button was clicked and hence run the validation in PreSaveAction appropriately.

    Thank you

    Tanzim


    Tanzim Akhtar


    • Edited by Tanzim Monday, February 6, 2017 8:49 AM
    Sunday, February 5, 2017 2:41 PM

Answers

  • Alhamdulillaah, solved.

    Following is the snippet in case someone faces similar issue:

    <script language="javascript">
    $(function()
      {
        var butApproved = $("input[value='Approved']");
        var butRejected = $("input[value='Rejected']");
        var butSaveName = $("input[value='Save']").attr("name");
        var optionResult = "";
            
        butApproved.attr("onclick", "");
        butRejected.attr("onclick", "");
        
        butApproved.attr("onclick", "optionResult='Approved'; if (!PreSaveItem()) return false;if (SPClientForms.ClientFormManager.SubmitClientForm('WPQ2')) return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions('" + butSaveName + "', '', true, '', '', false, true))");
        butRejected.attr("onclick", "optionResult='Rejected'; if (!PreSaveItem()) return false;if (SPClientForms.ClientFormManager.SubmitClientForm('WPQ2')) return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions('" + butSaveName + "', '', true, '', '', false, true))");
      
      });
    
      function PreSaveAction()
      {
        if (optionResult == "Approved")
        {
          alert("Approved clicked");
          return false;
        }
        else if (optionResult == "Rejected")
        {
          alert("Rejected clicked");
          return false;
        }
        else
        {
          alert("Something else happened");
        }
        return true;
      }
    </script>


    Tanzim Akhtar


    • Edited by Tanzim Tuesday, February 7, 2017 3:49 PM
    • Proposed as answer by Dennis GuoModerator Wednesday, February 8, 2017 1:13 AM
    • Marked as answer by Tanzim Wednesday, February 8, 2017 5:46 AM
    Tuesday, February 7, 2017 3:42 PM

All replies

  • I think is the click event.

    use jquery or other js to add the button event.

    in the event do your logic.


    顺其自然地勇往直前!—Justin Liu

    Monday, February 6, 2017 12:28 AM
  • Hi Tanzim,

    The following code for your reference, add the code into a content editor web part in the task edit form.

    <script src="//code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    function PreSaveItem(){
    	var startDate=$("input[title='Start Date']").val();
    	if(startDate==""){
    		alert("please select start date.");
    		return false;
    	}else{
    		return true;
    	}
    }
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Monday, February 6, 2017 6:23 AM
    Moderator
  • Thank you Justin,

    I am using jquery but not able to capture the click event.

    If I add a click event in PreSaveAction then it won't fire since the button has been already clicked and the user as to click on it again to fire the event.


    Tanzim Akhtar

    Monday, February 6, 2017 8:44 AM
  • Thank you Dennis,

    The requirement is to have different fields to be validated on different buttons. So if the user click Approved, then it should validate whether a people picker has been assigned value and if he clicks on Rejected, then it should validate whether the comments box has been filled.

    Currently, I am not able to check which button did the user clicked.

    Best regards


    Tanzim Akhtar

    Monday, February 6, 2017 8:47 AM
  • Hi Tanzim,

    We can use the following code to achieve it.

    <script src="//code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    	var approvedBtn=$("input[name$='_Approved']");
    	approvedBtn.attr("onclick","if(!ApprovedValidate()) return false;"+approvedBtn.attr("onclick"));
    	var rejectedBtn=$("input[name$='_Rejected']");
    	rejectedBtn.attr("onclick","if(!RejectedValidate()) return false;"+rejectedBtn.attr("onclick"));
    });
    function ApprovedValidate(){
    	//code
    	alert("Approved button click");
    	return false;
    }
    function RejectedValidate(){
    	//code
    	alert("Rejected button click");
    	return false;
    }
    </script>

    Please modify the code and achieve the ApprovedValidate() and RejectedValidate() methods.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Monday, February 6, 2017 9:03 AM
    Moderator
  • Yes Dennis, I will be able to achieve the onclick events on the buttons. However the problem is that when I use my custom onclick event, I am not able to fire the approval/rejection of workflow.

    The original button onclick has the following code:

    if (!PreSaveItem()) return false;
    if (SPClientForms.ClientFormManager.SubmitClientForm('WPQ2')) return false;
    WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl34$g_c787a6e1_0aac_4259_aaa9_1ed77297a7ee$ctl00$toolBarTbl$RightRptControls$ctl00$ctl00$diidIOSaveItem", "", true, "", "", false, true))

    I tried putting the code in the functions but it doesn't fire. Hence I took PreSaveAction approach.

    How can I capture which button was clicked in PreSaveAction function?

    Best regards


    Tanzim Akhtar

    Monday, February 6, 2017 9:36 AM
  • The buttons has optionid properties. Approved button has optionid="0" and Rejected button has optionid="1". These are the values passed to the workflow when the user clicks on either of the buttons and hence moving the workflow forward.

    Now, I don't know whether we can get the above optionid for the button that was clicked in the PreSaveAction function. If we can, then we can check these options for validation.


    Tanzim Akhtar

    Monday, February 6, 2017 6:38 PM
  • Alhamdulillaah, solved.

    Following is the snippet in case someone faces similar issue:

    <script language="javascript">
    $(function()
      {
        var butApproved = $("input[value='Approved']");
        var butRejected = $("input[value='Rejected']");
        var butSaveName = $("input[value='Save']").attr("name");
        var optionResult = "";
            
        butApproved.attr("onclick", "");
        butRejected.attr("onclick", "");
        
        butApproved.attr("onclick", "optionResult='Approved'; if (!PreSaveItem()) return false;if (SPClientForms.ClientFormManager.SubmitClientForm('WPQ2')) return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions('" + butSaveName + "', '', true, '', '', false, true))");
        butRejected.attr("onclick", "optionResult='Rejected'; if (!PreSaveItem()) return false;if (SPClientForms.ClientFormManager.SubmitClientForm('WPQ2')) return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions('" + butSaveName + "', '', true, '', '', false, true))");
      
      });
    
      function PreSaveAction()
      {
        if (optionResult == "Approved")
        {
          alert("Approved clicked");
          return false;
        }
        else if (optionResult == "Rejected")
        {
          alert("Rejected clicked");
          return false;
        }
        else
        {
          alert("Something else happened");
        }
        return true;
      }
    </script>


    Tanzim Akhtar


    • Edited by Tanzim Tuesday, February 7, 2017 3:49 PM
    • Proposed as answer by Dennis GuoModerator Wednesday, February 8, 2017 1:13 AM
    • Marked as answer by Tanzim Wednesday, February 8, 2017 5:46 AM
    Tuesday, February 7, 2017 3:42 PM
  • Hi Tanzim,

    Thanks for sharing the code, It will help others who suck with the problem!

    You can mark the reply as answer, it will make others who stuck with the similar issue easier to search for valid solutions in this forum.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Wednesday, February 8, 2017 1:13 AM
    Moderator
  • Hi Tanzim,

    I'm using the script provided by you. It does the validation fine however it doesn't close the task out unlike the default buttons without custom script.

    I see you mentioned you were not able to submit either. Could you please let me know what you did so that the click on approve or reject (post validation) the task gets 100% complete.

    A quick reply will be much appreciated.

    Regards,

    Pritesh.


    Monday, August 21, 2017 11:49 AM
  • Hello Pritesh,

    Sorry for replying late.

    Following is the script that I wrote. I have included the Save button in order to push the page.

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script language="javascript">
    $(function()
      {
        var butApproved = $("input[value='Approved']");
        var butRejected = $("input[value='Rejected']");
        var butSave = $("input[value='Save']");
        var butSaveName = $("input[value='Save']").attr("name");
        var optionResult = "";
        var spanResolvedListText = "";
        var eleContents = "";
            
        butApproved.attr("onclick", "");
        butRejected.attr("onclick", "");
        butSave.attr("onclick", "");
        
        butApproved.attr("onclick", "optionResult='Approved'; if (!PreSaveItem()) return false;if (SPClientForms.ClientFormManager.SubmitClientForm('WPQ2')) return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions('" + butSaveName + "', '', true, '', '', false, true))");
        butRejected.attr("onclick", "optionResult='Rejected'; if (!PreSaveItem()) return false;if (SPClientForms.ClientFormManager.SubmitClientForm('WPQ2')) return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions('" + butSaveName + "', '', true, '', '', false, true))");
        butSave.attr("onclick", "optionResult='Save'; if (!PreSaveItem()) return false;if (SPClientForms.ClientFormManager.SubmitClientForm('WPQ2')) return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions('" + butSaveName + "', '', true, '', '', false, true))");
      });
    
      function PreSaveAction()
      {
        if (optionResult == "Approved")
        {
          spanResolvedListText = $("span[id][id^='PMO_x0020_Manager'][id$='ClientPeoplePicker_ResolvedList']").text();
          
          if(spanResolvedListText.charCodeAt(0) == 8203)
          {
            spanResolvedListText = spanResolvedListText.replace(/\u200B/g,'');
          }
          
          spanResolvedListText = $.trim(spanResolvedListText);
          
          if (spanResolvedListText=="")
          {
            alert("Please assign a PMO Manager");
            return false;
          }
          else
          {
            $("input[title='\\% Complete']").val("100");
            return true;
          }
          
          optionResult = "";
        }
        
        if (optionResult == "Rejected")
        {
          eleContents = $(".ms-rtestate-write[id^='Comments_x0020_by_x0020_Approver']").text();
          
          if(eleContents.charCodeAt(0) == 8203)
          {
            eleContents = eleContents.replace(/\u200B/g,'');
          }
          
          eleContents = $.trim(eleContents);
          
          if(eleContents=="")
          {
            alert("Please fill in the Comments by Approver field");
          }
          else
          {
            $("input[title='\\% Complete']").val("100");
            return true;
          }
          
          optionResult = "";
        }
        
        return true;
      }
    </script>

    Regards


    Tanzim Akhtar

    Thursday, August 24, 2017 4:00 PM
  • Perfect, I see you setting Complete to 100%. Thanks for the tip!!

    Regards,

    Pritesh.

    Thursday, August 24, 2017 6:29 PM
  • You are welcome. I am glad that it helped.

    Tanzim Akhtar

    Friday, August 25, 2017 10:13 AM
  • Salaam-Alaikum Tanzim,

    Thanks for your work but when i try this code, taskResult workflow variable not changing. So please check your workflow and inform us about the result. After workflow completion workflow assumes that, the task approved.

    Tuesday, December 12, 2017 6:35 PM
  • After hours, i solved the problem. When the user click the reject button, the hidden select object must change. The name of the select starts with "TaskOutcome_" . With jquery; after approve/reject button clicked, you must change the value of select element as Rejected or approved.
    Tuesday, December 12, 2017 10:42 PM
  • Hi Hasan,

    Please provible the smaple code to update the TaskOutcome 

    Wednesday, February 21, 2018 8:51 PM
  • I created a new custom form for Task Display with SharePoint Designer.
    $(function(){
            var optionResult="";
            var btnApprove = $("input#approve");
            var btnReject = $("input#reject");
            var btnSave = $("input[value='Save']");
            var btnSaveName = btnSave.attr("name");
            var onClickEvent = "CheckFormEdit('"+btnSaveName+"');"
            btnApprove.attr("onclick", "");
            btnReject.attr("onclick", "");
            btnApprove.attr("onclick", "optionResult='Approved';"+onClickEvent);
            btnReject.attr("onclick", "optionResult='Rejected';"+onClickEvent);
            $("div[id$='TextField_inplacerte']").html("");
    });
    
    function CheckFormEdit(btnSaveName) {
        if (optionResult == "Rejected") {
            var length = $("div[id$='TextField_inplacerte']").html().length;
            if (length < 30) {
                alert("Please write a reject reason with minimum 30 character.\n\nYou typed " + uzunluk + " character");
                return false;
            }
        }
        $("select[title='Task Outcome']").val(optionResult);
        $("input[title='Task Status']").val("Completed");
        $("input[title='Completed \\%']").val("100");
        WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(btnSaveName, '', true, '', '', false, true));
    }

    Thursday, February 22, 2018 5:52 PM