Initial Setup Problems with DFFS_Frontend_Overlay

Forums Dynamic Forms for SharePoint Initial Setup Problems with DFFS_Frontend_Overlay

This topic contains 20 replies, has 6 voices, and was last updated by  Dharmendra Chaudhary 5 hours, 54 minutes ago.

  • Author
    Posts
  • #12059

    Scott Branch
    Participant

    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:
  • #12062

    Alexander Bautz
    Keymaster

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

    Alexander

    • #12073

      AdamP
      Participant

      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;
      }

    • #12075

      Scott Branch
      Participant

      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.

  • #12064

    Scott Branch
    Participant

    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.

  • #12077

    Alexander Bautz
    Keymaster

    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

  • #12079

    Scott Branch
    Participant

    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.

  • #12096

    Scott Branch
    Participant

    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?

  • #12151

    Alexander Bautz
    Keymaster

    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

  • #12181

    Scott Branch
    Participant

    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.

  • #12253

    Alexander Bautz
    Keymaster

    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

    • #12331

      avala
      Participant

      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.

  • #12385

    Alexander Bautz
    Keymaster

    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

  • #12804

    Phil Meacham
    Participant

    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:
  • #12807

    Phil Meacham
    Participant

    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!

  • #12809

    Alexander Bautz
    Keymaster

    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

  • #18143

    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:
  • #18152

    Alexander Bautz
    Keymaster

    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

  • #18235

    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:
  • #18243

    Alexander Bautz
    Keymaster

    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

  • #18249

    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.

You must be logged in to reply to this topic.