DFFS: Installation manual

Last updated: March 12, 2016.

Compatibility

DFFS v4 is compatible with WSS / Moss 2007, SP 2010, 2013 and 2016 – 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.

Install DFFS

You find a video installation guide below the step-by-step guide.

Step-by-step

  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 first.

If you want to use the installer APP (SP 2013 / 2016 / Online) you can skip to this section.

If you use SP 2007 you must use the manual CEWP installation method.

Set up the “Local installer”

  1. Create a WebPartPage in the DFFS folder created in step 3 above. To get to the “create new web part page” form, go to “All site contents” and change the URL from:
    /_layouts/15/viewlsts.aspx

    to

    /_layouts/15/spcf.aspx
  2. In this new page, add a ContentEditorWebPart (CEWP). In the “Content link” option in the CEWP, insert a link to the file “/SPJS/DFFS/installer/Installer_CEWP_code.html”.
  3. Reload the page and select the list you want to install DFFS in from the dropdown.
  4. When you have added DFFS to a list, go to this list and click the “Enhanced with DFFS” link below the form (NewForm, DispForm and EditForm) to start configuring DFFS.

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

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.

Video installation guide

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. 

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.

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

SharePoint 2007 manual CEWP installation

The recommended method is method #1.

Method #1

Add one Content Editor Web Part (CEWP) above each form, and one CEWP below.

Start by adding the one below the form, and insert a link to the file “/SPJS/DFFS/loader/DFFS_loader.html” in the “Content link” field.

Then do the same with the CEWP above the form but use the link to “/SPJS/DFFS/loader/DFFS_loader_overlay.html”.

Thats it, exit edit mode and start configuring DFFS by clicking the “Enhanced with DFFS” link below the form.

Method #2

This is the old method and requires a bit more manual setup. Use this if you have specific reasons for doing it.

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 for SP 2007 – CEWP setup

The recommended installation method in SP 2007 is described here. The below instructions are the old method of installing DFFS in SP 2007 and involves a bit more manual configuration.

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

How is the license code validated?

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.

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.

License code challenge for site or site collection

This step in used only for site or site collection scoped licenses. If you have a Company license of any sort, this step is not used and you can paste the license code you got when you purchased DFFS directly in the “License code” textarea.

When you have installed DFFS, go to one of the DFFS enabled forms and open the “License” tab. There you will find a button named “Click this button to generate the challenge code”.

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

What is the challenge code created from?

This code is a “hash” of the unique site or site collection GUID and doesn’t reveal any information about your site – it is a string with random numbers and characters like this example:

{2ffe3700-2831-4fb9-a029-9616b9f79b82}

Why is this necessary?

This challenge-response-routine is used to ensure this license is not used in more than one site or site collection (depending on the license type).

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

When you have receive the license code, you paste it in this textarea and hit “Save license code”.

Upgrade an existing license

If you have an existing license code that fails to validate in a new version of DFFS you can gen it updated if you send me the old license code. Please note that a site or site collection license is bound to the site or site collection it was originally associated with. This means you cannot change the challenge code used to generate the code.

If you have an older license, please contact me to see what kind of update options you have.

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

Developer license

If you buy a site collection license or better you can request a developer license for use in a DEV or UAT environment. This license is fully functional, but has a banner below the form showing that it’s not for production use.

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.