I have previously posted a solution for preventing double booking of resources. This is a remake of the resource management solution that is more lightweight, and can be used with DFFS. It can also be used as a standalone solution.

Add a reference to SPJSRM_min.js from the CEWP or HTML Form Web Part where you include the DFFS solution. When using this with DFFS (v3.344 or above) you find the configuration in a separate tab like this:

If you have an older version of DFFS you can activate it by adding this code to the Custom JS section in the Misc tab:

var spjsRmArgs = {
"resourceField":"MeetingRoom",
"dateFrom":"StartDate",
"dateTo":"EndDate",
"timeFormat":24,
"bookableTimeRangeActive":false
};
spjs.rm.init(spjsRmArgs);

You must include spjs-utility.js and add the code to the bottom of the form web part like this:

<script type="text/javascript" src="/Scripts/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/Scripts/spjs-utility/spjs-utility.js"></script>
<script type="text/javascript" src="/Scripts/SPJSRM/SPJSRM.js"></script>
<script type="text/javascript">

var spjsRmArgs = {
"resourceField":"MeetingRoom",
"dateFrom":"StartDate",
"dateTo":"EndDate",
"timeFormat":24,
"bookableTimeRangeActive":false
};
spjs.rm.init(spjsRmArgs);
</script>

• resourceField: This is the FieldInternalName of the field you have the “resource” in. This can be a lookup column (single choice), a people picker (single choice) or any other single choice field present in the form.
• dateFrom and dateTo: This is the FieldInternalName of the date fields. This solution will NOT handle recurring events.
• timeFormat: This is either 12 or 24 and is for displaying the time ranges in the overlap message in the correct format.
• bookableTimeRangeActive: true or false to control whether or not to use a separate list to restrict the bookable time range for the resources. See below.

When this is used as a standalone solution you must “manually” create the list to hold the bookable time range settings. This is done by calling a function like this:

// Use this to set up the "SPJS-RM-BookableTimeRange" list.
spjs.rm.verifyTimeRangeList();

When this is done you find the list in “All site contents”. Do not let this code persist after the list is initially created as it will slow things down due to an unnecessary request.

If you are using SP2007 you must provide the list GUID or DisplayName in the argument like this:

var spjsRmArgs = {
"listName":"TheListGuidOfThisList",
"resourceField":"MeetingRoom",
...

Get spjsrm.js here (ensure you use v2.2 or above) and spjs-utility.js here.

To localize the text in the various messages from this solution, add this object to the CEWP alongside the function call:

spjs.rm.text = {
	"overlapMsg":"{0} has already been booked by {1} between {2} and {3}.",
	"endBeforeStartMsg":"End time cannot be less than or equal to start time.",
	"empty":"{0} cannot be left empty!",
	"wrongDateFormat":"Please use this date format: {0}",
	"notInTimeRange":["{0} can be booked from {1} on a {2}.","{0} can be booked to {1} on a {2}."],
	"notInDateRange":["{0} cannot be booked before {1}.","{0} cannot be booked after {1}."],
	"bookableDateRange":"The bookable date ranges for {0} are:
{1}",
	"dayNumObj":{0:"Sunday",1:"Monday",2:"Tuesday",3:"Wednesday",4:"Thursday",5:"Friday",6:"Saturday"}
};

Translate the text as you like, but keep the {placeholders}.

The configuration list in v2.2 looks like this (please note that v2.35 has removed the time selector from the dates):

This list is created automatically for you by the script the first time you set up the solution, but to upgrade you must check “manually” like this:

Click the “Check for updates to the configuration list” text:

Add this function call to the CEWP below where you have loaded the file SPJSRM.js:

spjs.rm.verifyTimeRangeList();

Please note that this code must be commented out when the update is done.

I hope you enjoy the solution. Please post any bugs below.

Alexander

You find updated documentation here

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:

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.

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:

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>

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.

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

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