Category Archives: DFFS Plugin

Convert text fields to cascading dropdowns – unlimited number of levels

You find updated documentation here

Change log
August 21, 2015
Changes in v3.524

  • Fixed a bug when using single quote in the items used in the dropdown menu.

July 13, 2015
Changes in v3.523

  • Fixed issue with :multi and hide empty dropdowns not hiding the correct elements.
  • Fixed issue with :multi and autofill single option not properly selecting the items.

May 06, 2015
Changes in v3.520

  • Fixed a bug that prevented the solution from working if you did not have spjs-utility.js loaded in the page where you used the cascading dropdowns.
  • Made some changes to the debug output. The debug is now show directly in the page so there is no need to open the developer console.

April 15, 2015
Changes in v3.510

January 19, 2015
Changes in v3.30

  • Added support for autofilling values when using “Autofill subsequent dropdowns when they contain only one valid option.” in DFFS.
  • Changed the jQuery variable from $ to spjs.$ to fix a bug with SharePoints internal file “assetpicker.js” as this one kills jQuery.

September 4. 2014
Changes in v3.27
Fixed an issue where DFFS triggers on subsequent dropdowns would not trigger when the “Autofill subsequent dropdowns when they contain only one valid option” is checked (and the options are autofilled).

September 3. 2014
Changes in v3.26
Added “lookupListBaseUrl” as option in the argument to the function. This is used to lookup from a list that is not located in the same site (but in the same site collection). If you are using DFFS v4 you must update to this version.

June 10. 2014
Changes in v3.25
Skips the loading of the script if it is loaded in DispForm. This will prevent some errors when using this solution with DFFS and you are cloning settings from NewForm or EditForm.

June 7. 2014
Changes in v3.24
Added autofill of subsequent dropdowns if the field has a default value.

March 1. 2014
Changes in v3.22
Added new switches: “autoselectSingleOption” and “clearInvalidSelection”. See description below.

February 20. 2014
Changes in v3.21
Added autoselect if only one option is found.

August 29. 2013
I had forgotten a console.log in v3.1, Please download it again.
August 28. 2013
Changes in v3.1
Fixed a bug that prevents getting more then 30 items for each dropdown.

This solution lets you convert multiple single line textfields to cascading dropdowns populated by a query into another list that holds the data.

I’m reusing these two images from a previous article in this series to demonstrate the source list configuration and the target list appearance after the solution is initiated:
IMG

From v3.510 you can use multiselect in all the dropdowns.

IMG

I have previously posted two solutions in this series:
Cascading dropdowns
Cascading dropdowns in SharePoint text fields – populated by lookup in another list (version 2)

This is the third revision done mainly for compatibility with the Dynamic Forms for SharePoint solution, but it can also be used as a standalone solution. The earlier solutions had a 5-level limit, but this one in unlimited.

Used with the Dynamic Forms for SharePoint solution

Refer this solution in the CEWP where you set up the DFFS solution like this:

<link type="text/css" href="/Scripts/DFFS/default.css" rel="stylesheet">
<script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/Scripts/spjs-utility/spjs-utility.js"></script>
<script type="text/javascript" src="/Scripts/CascadingDropdowns/SPJS-Casc_min.js"></script>
<script type="text/javascript" src="/Scripts/DFFS/dffs.js"></script>

You will now find the configuration for the solution as a separate tab in the DFFS GUI:
IMG

Please note that you will not find this tab when configuring DispForm, and that this will require version 3.1 or later of the DFFS solution.
Used as a standalone solution

To use this as a standalone solution, you must do the configuration in the CEWP code like this:

<script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/Scripts/CascadingDropdowns/CascadingDropdowns.js"></script>
<script type="text/javascript">
spjs.casc.init({
	lookupList:"Cars",
	lookupListBaseUrl:L_Menu_BaseUrl,
	lookupListFields:["Make","Model"],
	thisListFields:["CarMake","CarModel"],
	dropDownDefaultvalue:"select",
	hideEmptyDropdowns:false,
	autoselectSingleOption:true,
	clearInvalidSelection:true,
	debug:false
});
</script>
Please note that the CEWP must be placed below the list view web part.
Parameters explained

lookupList: List name or GUID of the list that holds the values to populate the dropdowns.
lookupListBaseUrl: Base URL of the site where the list is located. This is NOT the URL of the list itself.
lookupListFields: The FieldInternalNames of the fields in the above list.
thisListFields: The FieldInternalNames of the fields to convert to dropdowns.
dropDownDefaultvalue: The value to display in the dropdown select when no items has been selected.
hideEmptyDropdowns: Determines whether or not to hide dropdowns with no available options.
autoselectSingleOption: If the next dropdown contains only one option it will be automatically selected.
clearInvalidSelection: If you open a list item in EditForm and the original selection no longer is a valid selection, you can decide whether to clear it or keep it.
debug: Used to troubleshoot the setup. You must have the developer console activated to read the debug information. While this is “true”, the single line of text field will show below the dropdown select.

The length of the arrays “lookupListFields” and “thisListFields” must be the same.

Using multi select

Read this article to learn how to use the multi select option for the fields.

Download code

Get the code for the file “CascadingDropdowns.js” here.

Please support the development of this solution by hitting the “beer button” in the top right corner of this page to buy me a few beers.

Have fun,
Alexander

vLookup for SharePoint 2013 v1.5

Change log
September 3, 2014
Changes in v1.730:
Minor update for compatibility with DFFS v4 “direct to backend script”.

June 27, 2014
Changes in v1.723:
Added check for a function named “vlookupChildViewOrEditCallback” to detect open or edit of a child (in dialog only). Add a function with this name, and it will be called when the dialog closes.

April 29, 2014
Changes in v1.721:

  • Fixed a bug from the previous version when using [URL:Key] in the CAML: NOT supplying the URL parameter generated an error.
  • Changed how the debug also alerts the values set in NewForm of the child item when using ?vLookupDebug=1 in the url

April 27, 2014
Changes in v1.720:

  • Fixed first column width if header row is hidden.
  • png icons in SP2013 and fallback to white icon for file types not recognized.
  • Added icons to show the view state of the groups (when using grouping).
  • Added option to use a URL querystring variable in the CAML. Hover over the help icon for the “Build Query” or the “Write your own CAML-query” to learn how to use it.

April 21, 2014
Changes in v1.710:
If you leave all display names in the viewFields section empty, the header row will be hidden.

April 13, 2014
Changes in v1.700:

Please note that there are a number of changes in this version and there will most likely be a few new bugs. You should test it before adding it to a production environment. Let me know if you find a bug, and I’ll fix it as soon as I can manage.
  • Fixed a compatibility issue with “fixQuirkyLookup” in the function “init_vLookupFields”.
  • Added option for selecting whether or not to open “new child” in a dialog.
  • Added “Show all option” when using “Rowlimit”.
  • Added support for grouping the items.
  • When using “Attachments” as viewField you will now get the paperclip in stead of “Yes” or “No” to indicate that an item has attachments.
Please note that you must index the columns you are querying to prevent errors when you reach a total of 5000 items in the list.

April 13. 2014
Changes in v1.651:
Fixed an issue with IE 11 for SP 2013: L_Menu_BaseUrl is undefined.

February 2. 2014
Changes in v1.65:

  • Changed <View Scope=’Recursive’> to <View Scope=’RecursiveAll’> to fix a bug with discussions (that are in fact folders).
  • Added option to refresh all vLookup columns when one has changed.
  • Added option to open links in the same window, and not in a new dialog.
  • Minified the code.

January 04. 2014
Changes in v1.644:

  • Added L_Menu_BaseUrl and L_Menu_LCID to the script for IE 11 compatibility in SP 2013.
  • Wrapped the table cell values in a div for better handling of “ViewField Special configurations CSS”.
  • The “ViewField Special configurations CSS” will also be applied to empty cells.
  • Fixed missing refresh in list view when a vLookup item is added or edited.

December 06. 2013
Changes in v1.640:

  • A new Action: “Comma separated list” is added. See instructions on the help icon for the “Action” field.
  • Custom style now works for all column types and not only text and note columns.
  • Date format can now be specified in the “In URL” section. See the help icon for details.
  • A few small bugfixes.

November 12. 2013
Changes in v1.631:
Child table max-height: changed overflow:scroll > overflow:auto to hide the scrollbar if it is not needed.

November 3. 2013
Changes in v1.63:

  • Added option to pass an URL parameter to the child list NewForm when adding children. Hover over the help icon for instructions.
  • Added option to set the max-height on the child table to have vertical scrollbars.
  • Changed how the page id is calculated when storing and retrieving the configuration. In some cases it came out wrong.

October 11. 2013
Changes in v1.62:
Added the number formatting support for “Action” sum, average and count.

October 11. 2013
Changes in v1.6:
Updated the number formatting support and added separate setting for “thousandsSeparator”. You can now use one or more of the following settings: “decimals”:2,”thousandsSeparator”:”.”,”decimalSeparator”:”,”}

October 06. 2013
Changes in v1.59:

  • Fixed set multichoice column from URL.
  • Added automatic refresh of the vLookup table when editing a child.

September 16. 2013
Changes in v1.56: Fixed a bug regarding showing documents located in sub folders in a document library.

September 10. 2013
Changes in v1.55:

  • Fixed a bug regarding multi choice people pickers.
  • Changed the available “events” you can use.

Interaction / events (put code in the CEWP)

// If defined, this function is called when clicking on "add new child". This function must return true to allow for children, or false to disallow.
function vlookupAddChildPreCheck(fin){
	if(fin==="vLookup_Your_FieldInternalName"){
		// check something and return false if conditions are not met
	}
	return true;
}

// If defined, this function is called for each of the fields set in the child from the "In URL" setting.
function vLookupPresetFromUrlDone(fin){
	if(fin==="FieldInternalName_you_are_setting"){
		// do something
	}
}

// If defined, this function is called when a vLookup column is rendered complete.
function vLookupIsLoadedCallback(fin){
	if(fin==="vLookup_Your_FieldInternalName"){
		// do something
	}
}

// If defined, this function is called when a child is added and you close the dialog with "OK".
function vlookupChildAddedCallback(){
	// Do something
}

// If defined, this function is called when you click "add new child", but close the dialog without saving.
function vlookupChildNotAddedCallback(){
	// Do something
}

August 28. 2013
Changes in v1.53:

  • Fixed bug in multiselect viewfields (checkboxes, multilookup and multiuser)
  • Added rowlimit setting for the query.
  • Changed some ids and variable names in the code.

This solution lets you create relationships between two or more lists based on for example a lookup column connection. You can list all children in the parent element (the children has a lookup column targeting the parent). This is not possible out of the box in SharePoint.

You can also have any kind of dynamic query based on values in the current form. You can for example pull in information from a list based on a selection in a choice column. Please note that this last example will not pull in this information on the fly when changing the selection, but when the form is loaded in DispForm, EditForm or in a list view.

This solution also lets you create new children from the parent (both DispForm, EditForm and in list views), and lets you auto-populate the “connection” to the parent element to ensure a connection.

Image from the GUI
IMG
I have previously posted two articles in this series:
vLookup for SharePoint 2010
vLookup now supports SharePoint 2013

This one is done mainly for compatibility with the Dynamic Forms for SharePoint solution, but I have redone the code and also fixes a few bugs and adds some new features:

  • The creation of the configuration list is now triggered when you first enter the setup. This is done to prevent some rare bugs where the list is not detected onload, thus asking to create it despite it already exists.
  • The heading for number columns are now aligned right (as the values)
  • Fixed bug where exiting the setup did not load the form with its item-ID.
  • Added custom css for the viewFields. Hover over the help icon to the right of the “ViewFields” section for details.
  • Added option to enter a license code to remove the PayPal-logo in the top of the GUI
Used with the Dynamic Forms for SharePoint solution

Refer this solution in the CEWP where you set up the DFFS solution (DispForm and EditForm) like this:

<link type="text/css" href="/Scripts/DFFS/default.css" rel="stylesheet">
<script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/Scripts/spjs-utility/spjs-utility.js"></script>
<script type="text/javascript" src="/Scripts/vLookup/vLookup.js"></script>
<script type="text/javascript" src="/Scripts/DFFS/dffs.js"></script>
Used as a standalone solution in forms or list views

To use this as a standalone solution, you must do the configuration in the CEWP code like this:

<script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/Scripts/spjs-utility/spjs-utility.js"></script>
<script type="text/javascript" src="/Scripts/vLookup/vLookup.js"></script>
</script>
First setup

Please note that the setup must be MANUALLY triggered the first time. Set up the scripts, create the vLookup column and then – in DispForm – add this to the URL to create the list:
/Lists/mylist/DispForm.aspx?ID=[an existing ID in your list]&vLookupSetup=1

Refer the previous articles in this series for further details on the setup process.

Download code

Get the code for the file “vLookup.js” here.

How to remove the PayPal-logo / Unlicensed version from the GUI?

In this version I have added support for providing a license code for removing the PayPal-logo and displaying a “Registered to” text in stead. To obtain a license code, go to this page, scroll down to “Dynamic Forms for SharePoint / vLookup for SP201X” and follow the instructions.

As this is JavaScript, there is of course no problem to bypass this license code and manually remove the logo, but please remember that I put in a lot of hours developing these solutions, and I appreciate a few beers now and then.

Please post any bugs or comments below.
Alexander