DFFS: Installation manual

Last updated: September 21, 2016.

Compatibility

DFFS v4 is compatible with WSS / Moss 2007, SP 2010 and 2013 – both foundation, server and online 365.

The solution is 100% client side, and you can set it up with only “Design” or “Owner” rights to the SharePoint Site.

Upgrading from a previous version

Dynamic Forms for SharePoint is backwards compatibility with DFFS v3.x, but if you are upgrading from an early 3.x version, you should read the change log to see if some of the bug fixes in later 3.x versions may affect how your rules are processed.

You find the change log here

You should always test a new version in a development site or in a copy of the list to ensure it works as expected.

If you decide to test it in a production environment, you must at least back up  the configuration before you start. You can export the setup from the “Misc” tab.

If you have trouble, look at the troubleshooting section at the bottom of this document.

Download DFFS files

  1. Download the DFFS files from here
  2. Create a document library named “SPJS” on the root of the site (or optionally the root of the site collection).
  3. Open the the document library in “Explorer view” and drag-and-drop the files from step 1 over on the root of this document library. Please note that you must unzip the files before adding them to the document library.

When using the new DFFS Installer, it is essential that the document library is named SPJS, and that the DFFS folder is placed in the root of this folder. 

From here you have two different branches: Use the DFFS Installer for SP 2010 and 2013 / Online, or use the manual CEWP installation method on SP 2007.

SharePoint 2010 and 2013 – DFFS Installer

This method is the preferred method to use for SharePoint 2010 and 2013 / Office 365.

DFFS Installer APP

This installer if for SP 2013 and SharePoint Online. If you use SP 2010 you must follow the next step “DFFS installer local version”.

November, 2016
The APP has been submitted for approval but due to the fact that the “DFFS files” are maintained outside the Installer-APP I’m having trouble getting it approved. I’ll see what I can do about that. In the meantime, download the APP from here and manually add it to your APP catalog, or use the “Local version” – see below.

Go to Site contents in the site where you want to set it up, select New > App.

Select SharePoint Store form the quick start menu, and search for “Dynamic forms for SharePoint :: Installer”. Follow the instructions to install the app.

When you have finished the installation and trusted the app, you will see a button in the “Customize” section of the ribbon menu, or directly in the list heading for the “new experience” layout in all lists and libraries.

Please note that the APP is site scoped. This mean you must add it to every site you want to use it.

DFFS installer local version

Add a web part page to the SPJS library where you uploaded the DFFS files. If you have trouble finding the “new web part page” options, you can go to “All site content” and edit the URL like this:

https://yourdomain.com/_layouts/15/SPCF.aspx

Name the new page for example “DFFS_Installer”, and add a Content Editor Web Part to the “Left Column” web part zone. Edit this CEWP and use the “Content link” option to link to the installer file like this:

/Sites/YourSite/SPJS/DFFS/Installer/Installer_CEWP_code.html

Change “/Sites/YourSite” to match your local path.

Reload the page, and select the list you want to set up with DFFS.

The installer will detect any existing JSLink installation, and will let you remove this directly to replace it with the new DFFS Installer.

Please note:
The new DFFS Installer will NOT detect existing CEWPs in the forms and installing on a list that uses the “CEWP installation method” will result in duplicates of the files loaded. This mean  you must manually remove the CEWPs before using the DFFS Installer on this list.

The latest version of the local installer (1.0.1.0 / January 12, 2017) introduces a button you can use to clear all existing Content Editor Web Parts from your list. This means you can use it to uninstall old DFFS versions added with the CEWP installation method.

When you have finished the setup, you enter setup for each form (NewForm, DispForm and EditForm) by hitting the “Enhanced with DFFS” link at the bottom of the form.

Change the location of the SPJS library from site to site collection

The default location for the SPJS library is in the current SITE. You can change this to refer to the SITE COLLECTION root if you change the variable “spjs_scripts_in_current_site” from true to false in the file “/SPJS/DFFS/loader/DFFS_loader.html” and in “/SPJS/DFFS/vLookup_ListView.html”.

If you opt to add the source files in the root of the site collection, you can now add the installer in a web part page in a subsite – linking to the “Installer_CEWP_code.html” file from the “/SPJS/DFFS/installer” folder in the root site.

Override the default overlay timeout

The loading overlay has the default max time before “This tool forever” shows set to 15000 (15 seconds).

You can now override this loading overlay timeout entirely (if you know your form uses longer than 15 seconds to load) by adding this to the custom js in each DFFS enabled form:

clearTimeout(dffs_overlay_timeout);

Old JSLink installation option

September 19, 2016:
The video tutorial for the JSLink version can be found below, but it is no longer the preferred installation method. I will post a new video guide describing the DFFS Installer as soon as I can manage.

SharePoint 2007 manual CEWP installation

This is the method where you add code using Content Editor Web Parts in NewForm, DispForm and EditForm to link to the script files.

When you choose this approach, you must edit the files in the “/Sites/YourSite/SPJS/DFFS/CEWP” folder.

You must edit the <script> src and the <link> href to point to the files from the “css” and “js” folders in “/Sites/YourSite/SPJS/DFFS/”.

Add a web part page to the SPJS library where you uploaded the DFFS files. If you have trouble finding the “new web part page” options, you can go to “All site content” and edit the URL like this:

https://yourdomain.com/Sites/YourSite/_layouts/SPCF.aspx

Name the new page for example “DFFS_Backend”, and add a Content Editor Web Part to the “Left Column” web part zone. Edit this CEWP and use the “Content link” option to link to the backend file like this:

/Sites/YourSite/SPJS/DFFS/CEWP/DFFS_backend_CEWP.html

When this is done, you will see a orange box with an error message – this is OK. Copy the URL to the WebPartPage from the URL field in the browser, and add it to the file “DFFS_frontend_CEWP.html” like this:

var spjs_dffs_backend = "/Sites/YourSite/SPJS/DFFS_Backend.aspx";

You are now finished with the configuration and can start adding the CEWP’s to the forms.

Add “DFFS_frontend_overlay.html” above and “DFFS_frontend_CEWP.html” below the form web part in NewForm, DispForm and EditForm using a CEWP and the content link option.

When you have finished the setup, you enter setup for each form (NewForm, DispForm and EditForm) by hitting the “Enhanced with DFFS” link at the bottom of the form.

See more details below, or see this video tutorial:

In depth step-by-step guide: part 1

Download the files

Download the DFFS files from here

Create a document library

Create a document library named “SPJS” on the root of the site (or optionally the root of the site collection).

Upload files

Open the folder where you downloaded the files in your local computer using Windows Explorer (or equivalent), and unzip the files.

Open the document library in Windows Explorer from the “Actions” menu in SP 2007.

With the two Windows Explorer windows side-by-side, drag the downloaded files and folders over to the “SPJS” document library.

If opening in Windows Explorer is not available, you can create the folders manually, and upload one and one file.

Optionally you can use SharePoint designer to drag-and-drop the files to the document library.

In depth step-by-step guide: part 2 for SP 2007 – CEWP setup

This part applies to the CEWP setup option only. See previous section for the SharePoint 2010 and 2013 DFFS Installer option.

Correct links and add backend page

You must edit the files “DFFS_backend_CEWP.html” and “DFFS_frontend_CEWP.html” from the “CEWP” folder in “/Sites/YourSite/SPJS/DFFS/”.

The best method is to edit the downloaded files on your local computer and upload them again when you have changed them.

You must edit the <script> src and the <link> href to point to the files from the “css” and “js” folders in “/Sites/YourSite/SPJS/DFFS/”.

Add the variable to the CEWP like this:

<script type="text/javascript">
_spPageContextInfo = {"pageListId":"{CE2C4401-0C2F-446B-944B-C28922BD0B42}"}
</script>

How to find the correct list GUID

Go to a list view of the list. Right click and select “view source”. Search for “ctx.listName” and you will find it like this:

ctx.listName = "{CE2C4401-0C2F-446B-944B-C28922BD0B42}";

Then you must add a WebPartPage to the SPJS document library – for example named “DFFS_Backend”. When this page is added, go into edit mode, add a CEWP and link to the file “/Sites/YourSite/SPJS/DFFS/CEWP/DFFS_backend_CEWP.html” using the “Content link” option.

 

When this is done, you will see a orange box with an error message – this is OK. Copy the URL to the WebPartPage from the URL field in the browser, and add it to the file “DFFS_frontend_CEWP.html” like this:

var spjs_dffs_backend = "/Sites/YourSite/SPJS/DFFS_Backend.aspx";

Add CEWP’s to the forms

Add “DFFS_frontend_overlay.html” above and “DFFS_frontend_CEWP.html” below the form web part in NewForm, DispForm and EditForm using a CEWP and the content link option.

Follow these instructions to set up the first form. Then go to the “Save the DFFS web parts as templates” section to make it easier to set up the solution for additional forms (not for SP2007).

Enter edit mode

Go to the form you want to add the solution to, and modify the URL like this:

/Sites/MySite/Lists/MyList/NewForm.aspx?toolpaneview=2
/Sites/MySite/Lists/MyList/DispForm.aspx?toolpaneview=2
/Sites/MySite/Lists/MyList/EditForm.aspx?toolpaneview=2

Manually set the location of the configuration list

Please note that this options have not been properly tested with the new DFFS Installer. I’ll try to get then checked out, but in the meantime you might want to keep the existing installation method if you use some of these “ovrride variables”.

By default, the configuration for the forms you activate DFFS for is stored in a list named “SPJS-DynamicFormsForSharePoint” on the same site as you set up the DFFS_frontend. When you enter the backend, the baseUrl of the frontend site is passed as a parameter in the URL. This way you can have the backend in a centralized location, but still save the configuration for your forms in a list in the site where the current form is located.

If you want set a fixed location of the configuration list in for example a sub site or the root site, you must add a variable to both the “DFFS_frontend_CEWP.html” and the “DFFS_backend_CEWP.html” files like this:

 var dffs_configListBaseUrl = "/SubsiteForDFFSConfig";

“SubsiteForDFFSConfig” is the relative URL to the site where the configuration is located. If you want to use the root site (and you are not on a managed path), the variable would be an empty string like this:

 var dffs_configListBaseUrl = "";

This will force all lists using this current backend location to share a configuration list.
Ensure all users have read access to this location.

Why would you want to do this?

You can use this option if you have DFFS configured for a list that is part of a site template, and you want all the new sites created from this template to share the configuration for the lists.

Pros

You can manage the DFFS configuration for all sites created from this template in one location.

Cons

You cannot add site-specific modifications to a list.

License code

Validating the license

There is no “phone home” to validate any of the license types. This is done locally (in the DFFS script itself).

This is true also for the site collection scoped license where the validation is performed based on the unique Site Collection ID.

License code challenge for site or site collection

This step in used only for site or site collection scoped licenses.

This challenge-response-routine is used to ensure this license type is not applied to more than one site collection.

Buy the license first

If you don’t already have a valid license you want to upgrade, you must buy a license first. Then generate and send the challenge codes to the address you find in the page where you generate the code.

PS: You must install the latest version of DFFS (v4.350 or above) to be able to generate the challenge code.

Generate the challenge code

For the JSLink setup option you find the “Challenge code” generation in the “Setup” page you created in the SPJS library.

For the CEWP setup option you find a “License” tab in the backend or DFFS.

Ensure you click the button to generate the challenge code from within the site or site collection where you intend to use the solution.

You must send both the SITE and SITE COLLECTION challenge codes.

SharePoint 2007

This platform does not support this validation method. When you buy a license for a SharePoint 2007 site collection you must inform me that you intend to use it in SP 2007, and I’ll generate a “dummy” challenge code.

This will let you use the license in SharePoint 2007, but it will fail to validate in SharePoint 2010 and 2013.

License code textarea

Paste the license code you got when purchasing DFFS. If you already have a DFFS v4 license code you must request an updated license code to use with this version of DFFS. If the existing license is site collection scoped (Site collection or Corporate user) you must perform the “License code challenge for site collection” step above.

Manage the license code centrally

This option should NOT be used with a site license.

If you are using the new DFFS Loader and have the source files located in the root of your site collection, you can manage the license code centrally by entering the license code in this variable in the DFFS_loader.html file:

var dffs_master_licensecode = "Put your license code here";

Troubleshooting

Problem Solution
I have updated from a previous version and the configuration will not load. Hit F12 in the browser to bring up the developer console. Select “Console” and reload the web page to look for errors.

Report any errors to the email address found in the “File a bug reports” section below.

When you have filed the bug report, roll back to the previous version of the script while waiting for my response.

If you have saved the configuration already, look at the next “problem” below.

I have saved the configuration, but now it is corrupted. The “last good configuration” is automatically preserved. You can roll back like this:

  • Go to the configuration list in all site contents.
  • Locate the correct form.
  • Edit the list item and copy from “lastGoodConfig” to “blob”.
  • Reload the form to verify that it is OK.
I have an InfoPath form, or a form customized in SharePoint Designer and I cannot get DFFS to work. Sorry, but DFFS is designed for out of the box SharePoint forms and although you might get it working for a customized form, I cannot help you with it.
Nothing happens, or the overlay shows “This took forever”. Ensure you have referred all the scripts correctly. Try the script src or the css href link in the URL field of the browser to verify it is correct.

Hit F12 in the browser to bring up the developer console. Select “Console” and reload the web page to look for errors.

If you see ‘$’ is undefined you are missing a reference to jQuery.

If you receive another error message that you do not know how to handle, please send it to the email address found in the “File a bug reports” section below.

It works for me, but not for the other users. Ensure all users have read access to the library where you uploaded the *.js and *.css files.
All the scripts are OK, the overlay flashes and disappears, but the button to enter the setup does not show. Ensure you have added the DFFS Frontend CEWP below the form web part.
The tabs appear as bulleted lists. The CSS file is not loaded. Verify the href to the CSS file in the CEWP.
The form flashes “unformatted” before DFFS kicks in. You are missing the “DFFS Overlay” web part, or you have placed it below and not above the form.
I try to save the configuration in the DFFS Backend, but receive “ERROR: JSON.stringify is not supported in your browser!” You are using an older version of Internet Explorer. Either update the browser, or use a modern browser like Firefox or Chrome to configure the DFFS solution.

If you are using SP2007 and your Internet Explorer version is above version 8, you can hit F12 and change the Document mode and User agent string to 9 or 10.

You must switch this back when you have saved the configuration, as SP2007 does not behave well if the Document mode is not set to “Quirks”.

The frontend of DFFS is not affected.

Other issues? Search the forum for a solution, or post a new topic.

You find the forum here.

 

File a bug reports

To file a bug report, send the following:

  • A detailed description of your problem.
  • Any error messaged from the developer console (hit F12 and select “Console”. Refresh the page and look for error messages).
  • Information about your SharePoint version.
  • Information about your browser version.
  • Other information that may be relevant.

Use the forum for general request and “small bugs”. You find the forum here.

Priority support

For priority support, please include the name of the person that holds the license to DFFS.

Use the subject “Bug”, and send to alexander.bautz@[put domain her].com.

To prevent SPAM you must manually piece together the address with domain “gmail”.

Are you missing something?

Please let me know if you have trouble following this guide. Let me know which part I need to elaborate.