Initial Setup Problems with DFFS_Frontend_Overlay

[Scott Branch]

I have just installed DFFS in a new SP 2010 environment. I have followed the installation directions as precisely as possible. At launch of my list form, I see the overlay background image but nothing else ever appears (see attachment). If I remove the CEWP for the Overlay on the form, I do get the DFFS link on the bottom of the form to modify the forms and it does bring me into the setup pages. Any ideas why the overlay page is not completing?

Attachments:

1. 

   DFFSError-JSB.jpg
   

[Alexander Bautz]

Hi,
Could you bring up the developer console (hit F12 > Console) and see if there are any errors there?

Alexander

[AdamP]

I think I’ve seen this recently too – SP2010, and using one of the latest releases of DFFS. The overlay looked similar to the one in the screenshot – not quite fitting the underlying form.
I didn’t have time to investigate at the time so I reverted back to a known good version I was using on a different site.
The DFFS overlay that is working for me is; Version: December 14, 2015
I believe the one I had trouble with is;Version: May 12, 2016 – They appear to be slightly different (both being used with their corresponding versions of DFFS etc)

Old;

<style type=”text/css”>
table.ms-formtable{
visibility:hidden;
}

New;

<style type=”text/css”>
table.ms-formtable{
position:relative;
left:-10000px;
}

[Scott Branch]

That is the version that I am using.

<!–
DFFS overlay for CEWP version
Version: May 12, 2016
–>
<style type=”text/css”>
table.ms-formtable{
position:relative;
left:-10000px;

Thanks for the feedback.

[Scott Branch]

There are lots of errors with and without DFFS. I was unable to make sense of them. I would appreciate your assistance. I captured the first screen for the Disp form with DFFS and totally without DFFS.

Attachments:

1. 

   DebugwDFFSError-JSB.jpg
   

2. 

   DebugNoDFFSError-JSB.jpg
   

[Alexander Bautz]

Hi,
These errors are not related to DFFS, but might be caused by “compatibility mode” applied in Internet Explorer. If you have this activated, try turning it off.

You find some info here: https://support.microsoft.com/en-us/kb/2536204

Alexander

[Scott Branch]

Revelation! I figured out the problem and I have a workaround. It does not appear to be Compatibility mode related. The DFFS_Frontend_Overlay will not launch unless I have already created the DFFS form. I leave the Overlay Web Part off, create my DFFS form and then re-add the Overlay Web Part. It works fine.

[Scott Branch]

Maybe announced victory too soon. Today I am having the issue with the IE “Compatibility View” settings. With it turned on, the DFFS Overlay hangs with “Loading”. With it turned off, the DFFS Overlay works fine. My problem is that the default for my entire environment is that the Compatibility View is turned on.

Is there any way to fix this in the DFFS code?

[Alexander Bautz]

Hi,
Did you try using the overlay code from an older version of DFFS? – also, you could try the latest version from the BETA version as there might be an issue with “addEventListener/removeEventListener” and “attachEvent/detachEvent” in IE 8:

<!-- 
	DFFS overlay for CEWP version
	Version: June 08, 2016
 -->
<style type="text/css">
table.ms-formtable{
	position:relative;
	left:-10000px;
}
#dffs_formTableOverlay, #dffs_loadingOverlay{	
	width:10000px;
	height:10000px;
	overflow:hidden;
	background-color:#f5f5f5;
	position:fixed;
	top:0px;
	cursor:default;
	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAALElEQVQIW2NkwALOnDnznxFdHCRoYmLCiCIBEwQphksgC8Il0AXBEtgEQRIAsDsXagWOqrQAAAAASUVORK5CYII=);
	z-index:8888;
}
#dffs_loadingOverlayInner{
	font-size:18px;
	text-align:center;
	color:#444;
	z-index:9999;
	position:fixed;
	top:100px;
}
</style>

<div id="dffs_formTableOverlay"> </div>

<script type="text/javascript">
// Change this to have your own overlay message - you can use HTML
var dffsLoaderOverlayText = "Loading...";

/******** No changes below this line ********/
if(document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value !== "1"){
	(function(){
		var div = document.createElement('div'), o = document.getElementById("dffs_formTableOverlay"), w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, rHandler;
		div.id = "dffs_loadingOverlay";
		div.innerHTML = "<div id='dffs_loadingOverlayInner' style='width:"+w+"px;'>"+dffsLoaderOverlayText+"</div>";
		document.body.insertBefore(div, document.body.firstChild);
		// Center loader image
		rHandler = function(event){
			w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
			try{
				document.getElementById("dffs_loadingOverlayInner").style.width = w+"px";
			}catch(ignore){
				// Nothing
			}					
		};
		try{			
			window.addEventListener('resize', rHandler);
			setTimeout(function(){
				window.removeEventListener('resize', rHandler);
			},3000);
		}catch(ignore){ // IE8
			window.attachEvent('onresize', rHandler);
			setTimeout(function(){
				window.detachEvent('onresize', rHandler);
			},3000);
		}
		if(o !== null){
			setTimeout(function(){
				o.parentElement.removeChild(o);
			},500);
		}
		setTimeout(function(){
			var oDiv = document.getElementById("dffs_loadingOverlay");
			if(oDiv !== null){
				oDiv.innerHTML = "<div style='font-size:20px;width:"+w+"px;text-align:center;padding-top:100px;'>This took forever!<span style='font-size:12px'><br>Click to close this overlay.</span></div>";
				oDiv.onclick = function(){
		   			this.parentNode.removeChild(this);
				};
			}
		},10000);
	})();
}else{
	var o = document.getElementById("dffs_formTableOverlay");
	if(o !== null){
		o.parentElement.removeChild(o);
	}
	setTimeout(function(){
		document.querySelectorAll("table.ms-formtable")[0].style.position = "static";
	},500);
}
</script>

Alexander

[Scott Branch]

I tried a previous version and the Beta version of the Overlay. Both worked fine if I turned off Compatibility view but neither worked with Compatibility view turned on. BTW. I am using Windows 10 with IE 11.

[Alexander Bautz]

Hi,
Sorry for the delay. If you have the same errors both with and without DFFS loaded, I would suggest that you disable the “modal dialog” in the list (list settings > advanced settings) – I have a hunch it will work if you do that.

Alexander

[avala]

I’m facing a similar problem with the Overlay not reaching a fail state (Jslink or CEWP setup) or if I remove the Overlay CEWP, DFFS forms fails to load. I’ve tracked the issue down to a new Console error in our Corp Comm’s custom Masterpage code. Old versions of DFFS (4.272 and the old green version) work fine, but the most recent versions (at least May 19th on) fail to load.

Do you have a workaround I can implement on the DFFS side until our developers fix the Masterpage? Rolling back our forms can help us limp along, but we lose some functionality and formatting we need for reporting.

[Alexander Bautz]

Sorry for the late reply. What is the error you see in the console?
Are you using on prem SharePoint, and is it 2010 or 2013?

Alexander

[Phil Meacham]

I’m getting this issue also. I just can’t get the overlay to load.

I have SP 2010 on prem. I’ve tried with ie11, firefox and chrome but always the same.

I load the NewForm to add an item, I get the Loading… Message then the This took forever! I click to close the message and the form doesn’t have any fields for me see, like it’s hidden everything and I can’t edit the form.

I’ve tried to look at the configuration list but there’s nothing in there.

In developer mode I get the error messages that have been reported earlier.

I’ve tried using the overlay code from Dec 2014 and also the code posted above but it’s still the same.

I’m expecting this to be a permission issue somewhere but I am the administrator of the site so I’m not sure how.

Is there any information or anything you want me to post to help find the issue? I’ve spent quite a bit of time on this but I just can’t seem to get it working.

Attachments:

1. 

   DFFS-No-Fields.png
   

[Phil Meacham]

I found the issue! Well I found what was wrong with my installation.

If you look at the July download, the DFFS_frontend_CEWP.html file line 16 refers to /SPJS/DFFS/js/DFFS_frontend_min_old.js but the actual file in the folder is NOT _old!!

Remove the _old from here and it’s working now!

[Alexander Bautz]

I’m glad you figured it out. I’ll fix the wrong file name in the DFFS_frontend_CEWP.html tonight.

Sorry for the inconvenience.

Best regards,
Alexander

[Dharmendra Chaudhary]

Hi Alex.
I am getting overlay error while opening the List New Item form.
Can you please help me out. Also attaching the snap of developer console for that error.

I am using SharePoint online (office 365).

Attachments:

1. 

   DFFS-error.png
   

[Alexander Bautz]

Sorry, but I don’t recognize this code snippet. Could it be some other custom code that interferes?

Which version of DFFS are you using?

Alexander

[Dharmendra Chaudhary]

Hi Alex,

Thanks for your response.

we are using DFFS Backend v4.356|4.10|spjs-utility version: 1.252.
The overlay issue comes while opening the “LIST NEW FORM” and when click on “overlay”, the overlay issue is disappear and working fine.
so how we can remove it.

I am attaching the snap of overlay issue.

Attachments:

1. 

   overlay-issue-.jpg
   

[Alexander Bautz]

Hi,
If the error message is the one you posted above I’m not sure it is from DFFS. Are you using any custom code in DFFS Custom JS textarea?

Could you try updating to the latest version of DFFS to see if it might behave better?

Alexander

[Dharmendra Chaudhary]

Hi Alex,

I am using some custom code in DFFS CustomJS textarea. I have removed all custom code in DFFS CustomJS and try again but same overlay issue occur.

[Dharmendra Chaudhary]

Hi Alex,

one thing that i have seen in my DFFS enabled list new form, I have written some alert in CUSTOM JS text area for testing purpose but the alert is also not firing. only overlay issue (This took forever) message comes on page.

can you please help me out for the same.

Thanks Alex.

[Alexander Bautz]

I’m sorry for not replying earlier – your comment kind of drowned in my inbox…

Are you able to use DFFS in another list in this site?
Is this list a unmodified list or have you been modifying the forms in SharePoint Designer? – if so, DFFS will unfortunately not work.

Could you try updating DFFS to the latest version and user the local installer to install it in the list?

Alexander

[Dharmendra Chaudhary]

Thanks Alax,

I have updated the DFFS version with Dec 07 2016 released. after update it’s working fine.
Is this necessary to copy the DFFS folder on Site and Sub site if Site Collection already have DFFS folder?

—
Regards,
Dharmendra

[Alexander Bautz]

If you have the SPJS document library in the root site and you have set the location in the loader file like described here you don’t need to have the SPJS/DFFS folder in the subsites.

Alexander

[Author]

Posts