How to call Portal Web API (GET) within Page_Validator.evaluationfunction ?

[Sahil]

Hi Folks,

I need to place some validations on the Submit button of a basic form based on a lookup field. I am trying to call Portal GET API within the Page_Validator_Evaluation_function on a basic form. The web API call is asynchronous so by the time it returns a value, the control on the Parent function i.e. newvalidator.evaluationfunction() is gone and the returned value can't be accepted by the parent function from the child function (Web API). 

Is there any way that the system/control can wait until the completion of child fucntion that is executing the web api and only proceeds further when a returned value is received from the child function?

Thanks in advance!

[eugenevanstaden]

@Sahil 

You can use this function

		function entityFormClientValidate() {
			// Custom client side validation. Method is called by the submit button's onclick event.
			// Must return true or false. Returning false will prevent the form from submitting.
			return true;
		}			
	

 You can override it in your form or you can change the Submit function from the form with Javascript, eg.

        let nextButton = $("#NextButton");
        if ($(nextButton).length) {
            $(nextButton).hide();
            $(nextButton).before("<button type='button' name='ApiSaveButton' value= 'Save and continue' id = 'ApiSaveButton' class='btn btn-default' nonactionlinkbutton='true'>Save and continue</button>");
        }



$("#ApiSaveButton").mousedown(function (e) {


	//Do your API calls here

	$("#NextButton").trigger("click");

});

[Sahil]

 @eugenevanstaden Thanks for the response. I believe with the first approach, I might end up into the same problem wherein the Web API function would be waiting to execute and meanwhile, the control will exit from entityFormClientValidate.  Let me try both of the suggested approaches and get back with an update.

[eugenevanstaden · Accepted solution]

@Sahil 

The 2nd approach would work then, you basically replace the Submit button with a dummy from which you execute the API call. Once the request is resolved you trigger the submit button. 

[Sahil]

@eugenevanstaden 

I tried to use the second approach, there is 1 issue -  I have a global variable (as shown in the code below) that is either set to true or false based on the result returned by the web API. I have a page validator evaluation function that is executed based on the  submit event of original Submit button and that returns the value of this global variable. For some reason, the default value of the global variable, i.e. true, is always returned. Below is the complete code. How can I return the value of this variable that has been set during the click event of Save and Continue button ?

$(document).ready(function () {
   let isPNNotRequired = true;

	let nextButton = $("#InsertButton");
        if ($(nextButton).length) {
            $(nextButton).hide();
            $(nextButton).before("<button type='button' name='ApiSaveButton' value= 'Save and continue' id = 'ApiSaveButton' class='btn btn-default btn-primary submit-btn' nonactionlinkbutton='true'>Save and continue</button>");
        }
	setPageValidator();

    $("#ApiSaveButton").bind("click", function () {
		
		 webapi.safeAjax({
			type: "GET",
			url: OdataUrl,
			contentType: "application/json",
			async: false,
			success: function (data, textStatus, xhr) {
				console.log(data);
				if (data != null && data["new_location"] == 2) {
					
					if ($("#new_pn").val() == "") {
						isPNNotRequired = false;
					}
					else{
						isPNNotRequired = true;
					}
				}
				$("#InsertButton").trigger("click");
			},
			error: function (jqXHR, textStatus, errorThrown) {
				alert("error");
			}
    });
		});
    
    });
    function setPageValidator() {

        if (typeof (Page_Validators) == 'undefined') return;
    
        // Create new validator
        var newValidator = document.createElement('span');
        newValidator.style.display = "none";
        newValidator.id = "pnValidator";
        newValidator.controltovalidate = "new_pn";
        newValidator.errormessage = "<a href='#new_pn_label'>Please enter pn</a>";
        newValidator.validationGroup = ""; // Set this if you have set ValidationGroup on the form
        newValidator.initialvalue = "";
        
        newValidator.evaluationfunction = function () {
            return isPNNotRequired;
        };
        Page_Validators.push(newValidator);
        $("a[href='#']").on("click", function () { scrollToAndFocus('new_pn_label', 'new_pn'); });
                
    }

[Sahil]

@eugenevanstaden  I found the mistake and removed the default value of variable. It seems to work fine now. Thanks much!

 let isPNNotRequired;

[victorlee1]

Your Ajax code is using:

async: false 

which is deprecated.