Error being returned after programmatic save

abolam · March 31, 2020, 7:49am

I am getting intermittent errors causing my submission form to hang upon Save. Some instances Save however other instances return the following errors in the browser:

[object Error]: {description: "Unable to get property 'offsetHeight' of undefined or null reference", message: "Unable to get property 'offsetHeight' of undefined or null reference", number: -2146823281, stack: "TypeError: Unable to get property 'offsetHeight' of undefined or null reference at Anonymous function (https://forms.plumsail.com/widget/1.0.7/assets/js/564.26103bdbf0c9281593af.js:1:1099) at Anonymous function (https://forms.plumsail.com/widget/1.0.7/spform.js:42:12273) at Ye (https://forms.plumsail.com/widget/1.0.7/spform.js:42:11715) at s (https://forms.plumsail.com/widget/1.0.7/spform.js:93:82870) at Anonymous function (https://forms.plumsail.com/widget/1.0.7/spform.js:93:83017) at c (https://forms.plumsail.com/widget/1.0.7/spform.js:93:95399)"}

Unhandled promise rejection FormValidationError: Form is invalid.

spform.js (93,83229)

[object Error]: {description: "Form is invalid.", message: "Form is invalid.", name: "FormValidationError", stack: "FormValidationError: Form is invalid. at Anonymous function (https://forms.plumsail.com/widget/1.0.7/spform.js:103:27279) at Anonymous function (https://forms.plumsail.com/widget/1.0.7/spform.js:103:21826) at Anonymous function (https://forms.plumsail.com/widget/1.0.7/spform.js:103:21139) at Anonymous function (https://forms.plumsail.com/widget/1.0.7/spform.js:103:20849) at x (https://forms.plumsail.com/widget/1.0.7/spform.js:93:83961) at Q (https://forms.plumsail.com/widget/1.0.7/spform.js:103:20613) at t.prototype.save (https://forms.plumsail.com/widget/1.0.7/spform.js:103:27103) at Anonymous function (Function code:124:29)"}

0: Unable to get property 'defaultView' of undefined or null reference

22.f48c23b1a1607fc9e5e4.js (1,175918)
2. SCRIPT5007: SCRIPT5007: Unable to get property 'defaultView' of undefined or null reference

I'm using a toolbar button to trigger a logic app and then run some logic to close the item:

//add new button
fd.toolbar.buttons.push({		       
    class: 'btn-outline-primary',
    text: 'Send for approval',
    click: function() {
        document.getElementById("overlay").style.display = "block";
        
		//set a today variable
		var today = new Date();
        fd.field('ApprovalStatus').value = 'Awaiting Validation';
		fd.field('SubmissionDate').value = today;
        sp.web.siteGroups.getByName('Validators').users.get().then(function(result){                
            var recipients = "";
            for (var i = 0; i < result.length; i++) {
                if (result.length > 1) {
                    recipients += result[i].Email + ";";
                    fd.field('ValidatorEmails').value = recipients;
                }
                else {recipients = result[i].Email + ";";
                fd.field('ValidatorEmails').value = recipients;}
            }
            
            
            console.log(fd.field('ValidatorEmails').value);
            //logic app will pick up new submissions            
        }).then(function(){
             var item = { "body": "Go" };

            $.ajax({
                url: "(my logic app url",
                type: "POST",
                contentType: "application/json;odata=verbose",
                data: JSON.stringify(item),
                headers: {
                    "Accept": "application/json;odata=verbose",
                    "X-RequestDigest": $("#__REQUESTDIGEST").val()
                },
                success: function (data) {
                    console.log('Success');
                    setTimeout(function(){  
                        document.getElementById("overlay").style.display = "none";                                
                        fd.save();			
                        },1000);
                },
                error: function (data) {
                    console.log('Failed');
                }
            });         
        
        });
        
    }

});

This was working on every submission up to Wednesday last week, since then users have reported issues. Can you advise what might have happened here?

mnikitina · March 31, 2020, 12:03pm

Hello @abolam,

Is that a complete code that you are using?

Please try to comment out the code that you have, to make sure that the error is caused by the code.

abolam · March 31, 2020, 12:56pm

I included my code because the error is sometimes happening AFTER my code has run.

i.e. the issue is intermittent, sometimes I get no errors after the fd.save(); and the form submits and returns to the list view, however sometimes I get the browser errors shown above and the form hangs (it looks like the list item saves) but the form hangs and doesn't return to the list view with the above browser errors. The errors themselves seem to relate to the Forms widget and are not related to my code.

mnikitina · April 1, 2020, 7:49am

Hello @abolam,

Do you have any custom validators in the form? Could you please share the code.

What browser you are using? Please try to clear the browser cache completely and check if you are getting the same error.

abolam · April 7, 2020, 8:59am

Sorry for the late reply.

There are validators on the form, see code below. I've created two toolbar buttons, one runs a logic app then saves the form, the other does additional logic before running a logic app, but ultimately both end up with the form being saved. Seems to be intermittent, sometimes the form saves and the redirects work, other times the form saves but the form hangs.

I'm on Windows 10 using Google Chrome Version 80.0.3987.163 (Official Build) (64-bit).

Full code below:

fd.spRendered(function(vue){
	
	//show validator comments if status is Amend
	if (fd.field('ApprovalStatus').value === 'Awaiting Amendment'){
		$('.amend').show();
        fd.container('Wizard1').widget.changeTab(0,2);
	} else { 
        $('.amend').hide();
    }
	
	//validators	
	fd.validators.push({
    name: 'Department',
    error: "You must select a Department to proceed",
    validate: function(value) {
        if (!fd.field('SubmittorDepartment').value)
            return false;
        return true;
	    }
	});
	
	fd.validators.push({
    name: 'Request Subject',
    error: "You must provide a Subject for the request",
    validate: function(value) {
        if (!fd.field('RequestSubject').value)
            return false;
        return true;
	    }
	});
		
	fd.validators.push({
    name: 'Request Summary',
    error: "You must provide a Summary for the request",
    validate: function(value) {
        if (!fd.field('RequestSummary').value)
            return false;
        return true;
	    }
	});
	
	//change save button to Save for later
    fd.toolbar.buttons[0].style = "display: none;";
	fd.toolbar.buttons[1].text = "Cancel";
	
	//create extra save draft button
	//add new button
    
    fd.toolbar.buttons.push({		       
        class: 'btn-outline-primary',
        text: 'Save draft',
        click: function(){
			//set a today variable
			var today = new Date();
            fd.field('ApprovalStatus').value = 'Draft';           
            var item = { "body": "Go" };

                $.ajax({
                    url: "<logicappurltrigger>",
                    type: "POST",
                    contentType: "application/json;odata=verbose",
                    data: JSON.stringify(item),
                    headers: {
                        "Accept": "application/json;odata=verbose",
                        "X-RequestDigest": $("#__REQUESTDIGEST").val()
                    },
                    success: function (data) {
                        console.log('Success');
                        setTimeout(function(){
                            fd.save();			
                            },1000);
                    },
                    error: function (data) {
                        console.log('Failed');
                    }
                });         
            
            }

    });
    
	
	//create extra save and submit button
	//add new button
    fd.toolbar.buttons.push({		       
        class: 'btn-outline-primary',
        text: 'Send for approval',
        click: function() {
            
			//set a today variable
			var today = new Date();
            fd.field('ApprovalStatus').value = 'Awaiting Validation';
			fd.field('SubmissionDate').value = today;
            sp.web.siteGroups.getByName('Validators').users.get().then(function(result){                
                var recipients = "";
                for (var i = 0; i < result.length; i++) {
                    if (result.length > 1) {
                        recipients += result[i].Email + ";";
                        fd.field('ValidatorEmails').value = recipients;
                    }
                    else {recipients = result[i].Email + ";";
                    fd.field('ValidatorEmails').value = recipients;}
                }                
                                
                var submissionNo = fd.field('Title').value;
                var author = fd.field('Author').value.displayName;
                var itemId = fd.field('ID').value;
                var linkToItem = "<linktoitemurl>?item=" + itemId;                  
                var messageBody = '<p>This is an automated message from the Approval system.</p><p>Item ' + submissionNo + ' has been submitted by ' + author + ' for Validation.</p><p>Please click <a href=' + linkToItem + '>here</a> to edit the item, or <a href="<redirecturl>">here</a> to view the Validator dashboard.</p>';

                var item = {
                    "itemID": itemId,
                    "email": recipients,
                    "body": messageBody,
                    "ccemail": ''
                };
                
                $.ajax({
                    url: "<logicapptriggerurl>",
                    type: "POST",
                    contentType: "application/json;odata=verbose",
                    data: JSON.stringify(item),
                    headers: {
                        "Accept": "application/json;odata=verbose",
                        "X-RequestDigest": $("#__REQUESTDIGEST").val()
                    },
                    success: function (data) {
                        console.log('Success');
                        setTimeout(function(){
                            fd.save();			
                            },1000);
                    },
                    error: function (data) {
                        console.log('Failed');
                    }
                });         
            
            });
            
        }

    });
	
});

fd.spSaved(function(result) {
    //simply replace this URL with yours:
    result.RedirectUrl =
        "<mysitepageforredirect>";
});

fd.spClosed(function() {
	fd.source="<mysitepageforredirect>";
});

mnikitina · April 7, 2020, 2:49pm

Hello @abolam,

I see some strange parts in your code. Maybe they are causing the error, but I can't be 100% sure.
This part:

            sp.web.siteGroups.getByName('Validators').users.get().then(function(result){                
                var recipients = "";
                for (var i = 0; i < result.length; i++) {
                    if (result.length > 1) {
                        recipients += result[i].Email + ";";
                        fd.field('ValidatorEmails').value = recipients;
                    }
                    else {recipients = result[i].Email + ";";
                    fd.field('ValidatorEmails').value = recipients;}
                }
});

People Picker field that allows multiple values store values as the array. So you need to push all values to the array, and then set People Picker field value.

sp.web.siteGroups.getByName('Validators').users.get().then(function(result){                
    var recipients = [];
    for (var i = 0; i < result.length; i++) {
        recipients.push(result[i].Email);
    }
    fd.field('ValidatorEmails').value = recipients;

});

And this part:

                var submissionNo = fd.field('Title').value;
                var author = fd.field('Author').value.displayName;
                var itemId = fd.field('ID').value;
                var linkToItem = "<linktoitemurl>?item=" + itemId;

Are you getting the value of the custom field with this line fd.field('ID').value, or do you want to get the current item ID?

If you need a current item id, you need to use this code instead:

fd.itemId

Please update the code and check if you have the same error.

If the error still exists, please try to comment out all custom validators and track which button exactly leads to the error.