Category Archives: Form modification

DFFS v4.250 released

This release has multiple changes and additions from the previous production release (v4.200). You find the complete changelog her: https://spjsblog.com/dffs/dffs-change-log/

I will show you one enhancement in particular – the new options for side-by-side headings and labels:
IMG

This layout is achieved with this configuration
In the “Tabs” tab I have added this configuration:

IMG
Please note how the headers are moved to the side-by-side column using the “Header ID”.

In the Side-by-side tab I have added these labels:

IMG

In the Custom CSS section in the Misc tab I have added this code:
.dffs-vertical-text{
text-align:center;
transform: rotate(-90deg);
font-size:22px;
}
td.sbs_tdIndex_1, td.sbs_tdIndex_2, td.sbs_tdIndex_3, td.sbs_tdIndex_4{
	width:350px !important;
}
td.sbs_Field input.ms-long, td.sbs_Field div.sp-peoplepicker-topLevel{
	width:250px !important;
}
Comments and feedback

Please add any comments, questions or feedback in the forum: https://spjsblog.com/forums/forum/dynamic-forms-for-sharepoint/

Alexander

SPJS-Lookup: Convert a single line textfield to a dropdown select based on a query

Change log

You find the latest change log here: https://spjsblog.com/dffs/dffs-change-log/

v1.11 (August 17, 2015):
Fixed an error resulting in existing values not validating when loadign an item in EditForm.

v1.10 (February 28, 2015):
If you want to have the same list of choices in multiple fields, you can now populate an unlimited number of fields from one single query. All you have to do is to use an array of fields in the parameter “fieldToConvertToDropdown”. See code example below for details.

v1.05 (February 12, 2015):
Added option to specify a folder in the query. The custom CAML or query will search only in the specified folder. Please note that you must update spjs-utility.js to v1.205 or later.

v1.04:
Removed a border around an image that occurred in SP 2010.

v1.03:
Fix for “addToExternalList” when using the solution for multiple fields in a form, and more than one targetted the same lookup list. The callback would refresh the bottom SPJS-Lookup field as the “argument object” was not uniquely identified.

January 21, 2015
v1.02:
Fixed a bug where I had mistakenly used the display name and not the FieldInternalName as identifier for the fields.

This is a remake of a solution I posted in 2009. It does mostly the same as the old one, but the code is overhauled, and it is now compatible with DFFS.

What does it do?

This solution is used to convert a single line of text field into a dropdown select. The options for this select is the result of a query you build in the function call. You can use it to query any list within the same site collection. You have an option to add new values to the “lookup list” on the fly, or to enter a value free hand.

This solution is compatible with SP2007, SP 2010 and SP2013.

DFFS plugin

This is compatible with DFFS, but you will not find a dedicated “tab” in DFFS to set it up. You must therefore use the same code for both DFFS and standalone use. With DFFS you have the option to put the function call in the Custom JS section in the Misc tab.

The code

If you use it as a standalone solution, you must refer jQuery and SPJS-utility.js in addition to SPJS-lookup.js.

In a standalone setup it will look something like this
<script type="text/javascript" src="/code/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/code/spjs-utility.js"></script>
<script type="text/javascript" src="/code/spjs-lookup.js"></script>
<script type="text/javascript">
// Put the contents from the code block below here.
</script>

If you use it with DFFS, the only extra script you need is this (in the DFFS_frontend CEWP) – put it below the reference to spjs-utility.js:

<script type="text/javascript" src="/code/spjs-lookup.js"></script>
The function call
spjs.lookup.init({
	"fieldToConvertToDropdown":["MyTextField"],	
	"listName":"Tasks",
	"listBaseUrl":"/Sites/MySite",
	"optTextFieldInternalName":"Title",
	"sortFieldName":"Title",
	"filterObj":{
		"on":true,
		"folder":"", // Leave empty to search in all folders
		"CAML":null, // If used, the rest of the filterObj settings are disregarded
		"fin":"Completed",
		"isLookup":false,
		"operator":"Neq",
		"filterVal":"1"
	},
	"dropDownDefaultvalue":"...",
	"addYouOwnValue":{
		"on":true,
		"linkText":"Write your own value"
	},
	"addToExternalList":{
		"on":false,
		"customFunction":null, // Function name as a string. If a function name is supplied, this will be used in stead of the default function. The function will be passed the argument object as a parameter.
		"linkText":"Add new item",
		"saveNewItemText":"Save new item"
	},
	"debug":false
});
Parameter details
  • fieldToConvertToDropdown: This is an array or FieldInternalNames of the fields in the current list that you want to convert to a dropdown. Specify multiple fields like this: [“FirstField”,”SecondField”] to have all server the same options based on one single query.
  • listName: This is the display name or the list GUID of the list you read the options from.
  • listBaseUrl: This is the base URL of the list you read the options from. If the list is on the root site of your domain, the value will be an empty string like this “”. If it is on a managed path, it will be something like this: “/Sites/MySite”
  • optTextFieldInternalName: This is the FieldInternalName of the field that represents the options you want to show in the dropdown select.
  • sortFieldName: This is the FieldInternalName of the field you want to sort the options by. Most likely the same as “optTextFieldInternalName”.
  • filterObj
    • on: true or false to tell if the options should be filtered. If false, all options will be shown.
    • folder: Here you can provide a relative URL to a folder like this: /Sites/MySite/Lists/MyList/MyFolder/MySubFolder
    • CAML: Here you can provide the full CAML query to filter by. If this is left as null, the other options below will take effect.
    • fin: The FieldInternal name you want to filter on.
    • isLookup: true or false. If you filter by a text value, use false. If you filter by an ID in a lookup field, set it as true.
    • operator: Use anu valid CAML operator like “Eq”, “Neq”, “BeginsWith” or “Contains”.
    • filterVal: This is the value you want to filter by.
  • dropDownDefaultvalue: This is the default value in the dropdown when it has not been selected.
  • addYouOwnValue
    • on: true or false. This controls whether or not to show a link to “kill” the dropdown and show the underlaying text field.
    • linkText: This is text on the link.
  • addToExternalList
    • on: true or false. This controls whether or not to show a link to add an item to the list you are pulling the options from.
    • customFunction: If you want to override the built “addToExternalList” function, add your custom function name here like this: “myAddListItemFunc”. The function itself must be present in the page, and it will get the full “argObj” passed to it as a parameter.
    • linkText: The link text that initiates the “addToExternalList” function.
    • saveNewItemText: The text on the “save” link.
  • debug: true or false. If true, the underlaying text field will not be hidden, and you will see a yellow information panel in the top of the page.
Setting a value in a field with this solution activated

To set the value of a field when using this solution, use code like this:

spjs.lookup.setValue("FieldInternalName_of_your_field","The value you want to set");

This will also work with DFFS and will trigger any rule currently configured for the underlaying text field (by triggering the blur-event).

Questions or feedback

Please use the forum for all questions related to this solution.

Alexander

DFFS v4.210 BETA

BETA 2 of DFFS frontend released January 19, 2015
Please note that this version is BETA and is NOT intended for a production environment.

I have released a new BETA version (v4.210 BETA) of DFFS, but I need help testing it as I have made some fundamental changes to how “initial values” are retrieved, and to how read only fields are “styled” to maintain the correct width of the field. There are also a quite a few bugfixes and other changes that I would like your feedback on.

The full change log is as follows
Changes and new features
  • Changed how read only fields are “styled” when using side-by-side to try to maintain the width of the field. This change needs testing – let me know how it works in your setup.
  • Changed how initial value is retrieved when the form loads. Previously DFFS read the values from the fields using the function “getFieldValue”, but now it uses a web service call to get the current item metadata from the DB. This is done to try to overcome the problems some have been experiencing with people pickers not being ready when set to readonly when the form loads. This change needs testing – let me know how it works in your setup.
  • Changed how you reorder fields in tabs in the backend.
  • Boolean values will be displayed as checkboxes in DispForm.
  • New: Changed tab color on hover to a slightly lighter color (update CSS file for the frontend).
  • Added class “dffs-accordion-activePanel” to active accordion panel. You can use this class for your “custom code”.
  • New: Added support for comparing dates with hours and minutes. Please note that you cannot use hour and minute when comparing dates in DispForm.
  • New: Added “between” operator.
  • New: You can now add a new field to the list from the Misc tab (SP 2010 and 2013 only).
Bugfixes
  • When no configuration has been created for a form, the overlay would time out with “This took forever”.
  • When using side-by-side and hidden label you could got a linefeed after the star that indicates that the field is required.
  • Selected tab index trigger: added “change event” as this trigger only fired on load and not on change of tab.
  • Only the first rule using the trigger “Selected tab index” could be used in “and these rules are true”.
  • The rule debug output was missing “run these functions”.
  • Date pickers: In some cases, errors would appear in the developer console in SP2013 when operating date pickers.
  • Date pickers: The “blur” event was not triggered on the “master” datepicker when using “linked” datepickers and modifying the “slave”.
  • When a field was configured in DFFS, but it was not in the current content type, you could in some cases get an error like “unable to get the property “hidden” of undefined or null reference” in the developer console.
  • The Attachement field will no longer trigger the “orphans” tab.
  • In the frontend I have changed from referring jQuery as $ to use spjs.$ due to an error in SharePoint when using rich text fields and “Insert > Link > From SharePoint” as the file “assetpicker.js” will “kill” jQuery by overriding the global $ variable. This would result in a complete halt in all the functionality in DFFS (and other plugins using jQuery). Please note that other plugins must also be updated. Look at the change log for each one to see which one have been updated.
  • Scroll to first input will no longer make the form scroll down. If the first input is off the visisble sceen, it will not get focus.
  • BETA 2: Fixed bug occurring when you for some reason had duplicates of the configuration in the configuration list. Now only the first “match” will be used, and you will no longer see duplication of rules and tabs.
  • BETA 2: Fixed a bug where “rule messages” did not show for readonly fields.
  • BETA 2: Fixed a bug in setting field value for a date only field when this is read only. It will now show date only and not date and time. Please note: You must also update spjs-utility.js to v1.200 or later.
Get the BETA version here

Follow this link, and ensure you get the latest version. PS: The files are uncompressed, therefore the files are bigger than the production release.

Give feedback in the forum

Please post any findings or questions regarding the 4.210 BETA in this topic in the forums.

Unfortunately I have not been able to test this as thoroughly as I wanted, but I could not wait any longer to make it available. Post any findings to the forum, and I will fix the issues as soon as I can manage.

The more of you that gives feedback, the faster the production version will be released!

Best regards,
Alexander

Resource management: Now compatible with DFFS

Change log
July 13, 2015
Changes in v2.42:
Added option to use {currentsite} in baseUrl variable.March 15, 2015
Changes in v2.37:
Fixed a bug where booked time range was missing the minutes – displayed as :00 – when using AM / PM time format.

August 20, 2014
Changes in v2.36:
Fixed bug where the validation messages did not show when the resource field was set to read only.

June 07, 2014
Changes in v2.35:

  • Fixed a bug in the field xml when creating or updating the list as the choices for the hours could not be set in datasheet view due to wrong case on the CHOICES tag. Update the list to fix this issue.
  • Added support for multiple ranges of bookable dates. A big thanks to Rudolf Vehring for extensive testing on this feature!

Please note that you must update the configuration list to the latest version. You find the instructions in the article below.

May 15, 2014
Changes in v2.2:
I have added back the missing features from v1.3. related to restricting bookable time range individually for each weekday. If you are upgrading form v2.1 you must look at the details below as you will have to update the configuration list with new fields (this is done automatically by the script when you trigger the update).

Please note that you must have the latest version of spjs-utility.js. If you use it with DFFS you must have v3.344 or later of dffs_min.js.

May 8, 2014
Changes in v2.1:
Added an option to configure bookable time ranges in a separate list. See detail below.

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

Please note:
This solution is made for unmodified SharePoint forms.
How to set it up with DFFS

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:
IMG

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);
Use it as a standalone solution

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>
Setup
  • 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.
Bookable time range

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.

SharePoint 2007

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

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

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

Localization

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

Update from a previous version

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

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:

With DFFS

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

Standalone

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

Autocomplete for text and people picker fields

You find updated documentation here

Change log
Always test a new version to see that it works as expected before adding it to a production environment.

You find the latest change log here: https://spjsblog.com/dffs/dffs-change-log/

May 19, 2016

I have released v1.4.3 with a new feature that lets you pre-filter the data-source with a CAML query. To do this, add a new key-value pair to the argument object like this (see more details below):

"filterCAML":"<Eq><FieldRef Name='Author' LookupId='TRUE' /><Value Type='Integer'><UserID/></Value></Eq>"

This example will show only items created by current user. You can provide any valid CAML.

March 20, 2016

I have released v1.41 with this bugfix:
I have fixed a bug occurring when using the new option to add  new values to the lookup list, and it is a “isLookupInSelf”. If you had already moved the cursor away from the autocomplete field so the field had the “error class”, going back to add it to the list did not clear this class so it appeared as if the error was still there. The value would however be saved to the list as it should.

February 19, 2016

I have released v1.4 with these new features:

  • Added option to add a custom function to parse the returned value before setting it using the “setFields” option. Here is an example (see parseFunction):
    spjs.ac.textField({
    "applyTo":"Project",
    "helpText":"Project name or number...",
    "listGuid":"ProjectList",
    "listBaseUrl":"/DFFS",
    "showField":"Title",
    "enforceUniqueValues":true, // New in v1.33
    "rowLimit":15,
    "listOptionsOnFocus":false,
    "reValidateOnLoad":false,
    "allowAddNew":false, // New in v1.4
    "isLookupInSelf":true, // New in v1.4
    "setFields":[
    {
    "fromFIN":"ProjectNumber",
    "toFIN":"PNumber",
    "parseFunction":"",
    "skipIfEmpty":false
    },
    {
    "fromFIN":"Created",
    "toFIN":"ProjectCreatedDate",
    "parseFunction":"parseDateFunc",
    "skipIfEmpty":false
    }
    ]
    });

    // This function converts the ISO8601 date returned from the query to a format ready for inserting in the field

    function parseDateFunc(a){
    // Set the desired format in the variable "f"
    var f = "MM/dd/yyyy hh:mm" , d = new Date(a);
    f = f.replace("MM",(d.getMonth()+1) < 10 ? "0"+(d.getMonth()+1) : (d.getMonth()+1));
    f = f.replace("dd",d.getDate() < 10 ? "0"+d.getDate() : d.getDate());
    f = f.replace("yyyy",d.getFullYear());
    f = f.replace("yy",d.getFullYear().toString().substring(2));
    f = f.replace("hh",d.getHours() < 10 ? "0"+d.getHours() : d.getHours());
    f = f.replace("mm",d.getMinutes() < 10 ? "0"+d.getMinutes() : d.getMinutes());
    return f.split(/ |:/);
    }
  • Added option to add new items to the autocomplete if you cannot find a match. Please look at the description of the parameters “allowAddNew” and “isLookupInSelf” below.

The autocomplete solution is part of the DFFS package, and you will find updated versions in the “plugins” folder in the DFFS download package, or in the “incrementalReleases” folder. Get the files here

February 09, 2016

I have released v1.33 with support for returning only unique values. You set this up in the argument object like this:

spjs.ac.textField({
	"applyTo":"Project",
	...
	"enforceUniqueValues":true, // New
	...
	...

The autocomplete solution is part of the DFFS package, and you will find updated versions in the “plugins” folder in the DFFS download package, or in the “incrementalReleases” folder. Get the files here

October 31, 2014

v1.31:
Fixed a bug with using single quotes in the lookup field.

May 1, 2014

v1.21:
Added event triggering for the fields set by “setFields” in the autocomplete function call – for use with DFFS “is changed” trigger.

April 25, 2014

v1.2:

  • Added option to prevent validation of the selected value on load. This will allow for duplicate entries in the lookup list. See function call example below for details.
  • Fixed a bug that prevented a selected people picker form being cleared.

April 6, 2014

v1.1: Added option to bypass the SP2013 check when applying the people picker autocomplete in SP2013. This must only be used when having SP2010 style people pickers with the “validate user” and “address book” icons.

To use this option, change the argument object like this:

spjs.ac.peoplePicker({
	"applyTo":"Responsible",
	"forceOn2013":true,
	...

I have previously posted a few solutions here and here, but those are old and does not work for new SharePoint versions.

I have redone the solution to bring it up to support SP2007, SP2010 and SP2013. This is a total remake that does not rely upon jQueryUI for the autocomplete part.

In this example, I have added autocomplete to the single line of text field “Project”, and to the single choice people picker “Responsible”.
IMG

Here I have started typing in the Project field:
IMG
You can use this solution with single line of text columns and single choice people picker columns. I have not built in support for multi choice people pickers.

Please note that this solution is made for unmodified SharePoint forms (NewForm and EditForm) and will not work for custom forms modified in SPD or InfoPath. It will however play nice with DFFS.

The people picker autocomplete is not available in SP 2013 as this version already have this built in.

How to set it up
  1. If you don’t have jQuery already, get it here
  2. Get the latest version of spjs-utility.js from here.
  3. Download the file “spjs-autocomplete.js” from here.
  4. Add the code below the form in NewForm and EditForm as described below.
Setup for a single line of text column

Add this code below the form web part in NewForm and EditForm using a HTML form Web Part, Script Editor or link to a file containing the code from a Content Editor Web Part using the content link option.

<script type="text/javascript" src="/Scripts/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/Scripts/spjs-utility/spjs-utility.js"></script>
<script type="text/javascript" src="/Scripts/Autocomplete/spjs-autocomplete.js"></script>
<script type="text/javascript">
var fields = init_fields_v2();

spjs.ac.textField({
	"applyTo":"Project",
	"helpText":"Project name or number...",
	"listGuid":"ProjectList",
	"listBaseUrl":"/test",
	"showField":"Title",
	"optionDetailFields":"[], // New in v 1.4.12
	"enforceUniqueValues":true, // New in v1.33
	"rowLimit":15,
	"listOptionsOnFocus":false,
	"minLengthBeforeSearch":3, // New in v 1.4.12
	"reValidateOnLoad":false,
	"allowAddNew":false, // New in v1.4
	"isLookupInSelf":false, // New in v1.4
	"filterCAML":"", // New in v1.4.3
	"multiselect":true, // New in v1.4.4. If this is true, the "setFields section will not apply",
	"multiselectSeparator":"; ", // New in v1.4.4.
	"orderBy":[{"fin":"Title","ascending":true}], // New in v1.4.5
	"setFields":[
		{
			"fromFIN":"ProjectNumber",
			"toFIN":"PNumber",
			"parseFunction":"",
			"skipIfEmpty":false
		}
	]					
});					
	
</script>
Options explained:
  • applyTo: The FieldInternalName of the field to add autocomplete to.
  • helpText: The text in the autocomplete field when it is empty
  • listGuid: The list GUID or the display name of the list you are pulling the options from.
  • listBaseUrl: The base url of the list. For a subsite named “Test”, this is the correct base url: “/test”. For the root site, use an empty string like this: “”.
  • showField: This is the field to show in the autocomplete.
  • optionDetailFields: Additional fields to show more details in the drodown.
  • enforceUniqueValues new in v1.33: true or false to only return unique values.
  • rowLimit: This is the max number of items to pull back. Use a low number to keep the query lightweight and fast.
  • listOptionsOnFocus: true or false determines whether or not to pull in the first batch when the field gets focus. Setting this to true will mimic a dropdown with an arrow to the right.
  • minLengthBeforeSearch: This settings controls how many characters the user needs to enter before the search is triggered.
  • reValidateOnLoad new in v1.2: true or false to determine whether or not to validate the selection when loading the form in EditForm. If this is set to true, you cannot have duplicates in the lookup list, and if you delete an item in the lookup list, the selected value will be invalid when you edit an item that has this value selected.
  • allowAddNew new in v1.4: true or false to specify whether or not to allow adding new values to the “dataset”. If you set the below “isLookupInSelf” parameter to false, you MUST use the GUID in the parameter “listGuid” above.
  • isLookupInSelf new in v1.4: Used with the above “allowAddNew” parameter. Use true or false to specify whether or not the autocomplete is a lookup in the the current list. Please note that setting this to false is only supported in SharePoint 2013. This will open a dialog for adding the new item.
  • filterCAML new in v1.4.3: Add your own CAML here to prefilter the data-source. You can use an valid CAML – for example this to get items created by current user:
    "filterCAML":"<Eq><FieldRef Name='Author' LookupId='TRUE' /><Value Type='Integer'><UserID/></Value></Eq>",
  • setFields: This in an array of objects containing additional fields to pull in and set based on the selection. It has these properties:
    • fromFIN: The FieldInternalName of the field in the list you are pulling from.
    • toFIN: The FieldInternalName of the field in the list you are writing to.
    • parseFunction: This is used to parse the returned value before inserting it in the “toFIN” field. See example on parsing a date value in the change log in the top of this page (February 19, 2016).
    • skipIfEmpty: true or false determines whether or not to skip this option if this field is empty.
Setup for a single choice people picker

Add this code below the form web part in NewForm and EditForm using a HTML form Web Part, Script Editor or link to a file containing the code from a Content Editor Web Part using the content link option.

<script type="text/javascript" src="/Scripts/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/Scripts/spjs-utility/spjs-utility.js"></script>
<script type="text/javascript" src="/Scripts/Autocomplete/spjs-autocomplete.js"></script>
<script type="text/javascript">
var fields = init_fields_v2();

spjs.ac.peoplePicker({
	"applyTo":"Responsible",
	"forceOn2013":false,
	"helpText":"Enter name or email address...",
	"showField":"Title",
	"enforceUniqueValues":true, // New in v1.33
	"chooseFromUserGroup":null,
	"showUsersOnly":true,
	"rowLimit":5,
	"listOptionsOnFocus":false,
	"reValidateOnLoad":false,
	"setFields":[
		{
			"fromFIN":"EMail",
			"toFIN":"ResponsibleEmail",
			"parseFunction":"",
			"skipIfEmpty":false
		}
	]
});
	
</script>
Options explained:

The shared options are explained in the previous section.

  • chooseFromUserGroup: If you want to limit the selection to a specific user group, add the name or the ID here. The ID must be added as an integer. Leave as null to search all users. Please note that you cannot let the autocomplete search among all users while the people picker itself (in the list settings) is restricted to a certain group.
  • showUsersOnly: true or false determines whether or not to show users and groups, or users only.
Override the labels and text

Add this to the CEWP code (above the function call to spjs.ac.peoplePicker or spjs.ac.textField) to override the standard texts. Translate as you like.

spjs.ac.text = {
	"imgTitle":"The list of valid choices is updated automatically when you type",
	"noItems":"No items match your search",
	"addNewItem":"Add {0} to the list?",
	"noValidItems":"No valid items match your search",
	"invalid":"Invalid value",
	"moreItemsLabel":"Showing the first {0} items",
	"moreItemsMouseover":"Continue typing to narrow your search",
	"searching":"Searching for: "
};
How to use this with DFFS

To use this with DFFS you must add the script reference to “spjs-autocomplete.js” in the CEWP code for DFFS, and wrap the function call like this:

function dffs_Ready(){
	spjs.ac.peoplePicker({
		"applyTo":"Responsible",
		"helpText":"Enter name or email address...",
		"showField":"Title",
		"enforceUniqueValues":true, // New in v1.33
		"chooseFromUserGroup":null,
		"showUsersOnly":true,
		"rowLimit":5,
		"listOptionsOnFocus":false,
		"reValidateOnLoad":false,		
		"setFields":[
			{
				"fromFIN":"EMail",
				"toFIN":"ResponsibleEmail",
				"parseFunction":"",
				"skipIfEmpty":false
			}
		]
	});
}

You can also add the function call to the Custom JS section in the Misc tab. In this case you do not wrap it in dffs_Ready().

Post any bugs or feedback in the comments below.

Alexander

Edit SharePoint Field properties in SP2010 and SP2013

Change log
August 1, 2014
Updated to v3.2 with these changes:
Fixed a bug where you could not change a text field that had a default value, or a choice field. The status would read “TRUE” indicating success, but the setting would not be changed. I have also changed the “TRUE” and “FALSE” message to “On” and “Off”.

April 2, 2014
Updated to v3.1 with these changes:
Added option to control ReadOnly and AllowDeletion.

I have previously posted a similar solution here. I have therefore started this solution in v3.0.

This solution lets you change field properties that are not accessible from list settings. Use it with caution as you can break a list or library if you change the wrong property. You should test it in a test list before you do any changes to a production environment.

Please note that this solution is for SP2010 and SP2013. You find a link to a similar solution for SP2007 in the top of this article.

How to set it up

Download the file “spjs_editFieldProperties.js” from here and add a HTML Form Web Part to a web part page in the site where you want to use it.

The HTML Form Web Part source should look like this:

<script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/Scripts/ChangeFieldProperties/spjs_editFieldProperties.js"></script>

If you need to download jQuery, you find it here.

This is what it will look like:

IMG

Select list to see all fields:

IMG
Hover over the options to reveal the toggle buttons.

The options

I will not go into details on each of the options as it should be self explaining by the header. I will however mention a few of them.

ShowInFileDlg

This controls whether or not the field is shown in the Document Information Panel in Microsoft Word.

SourceID

In a scenario where you are using “Quick parts” to show metadata in a Word file, and you are copying the file to another library, you must change the “SourceID” in the destination library to match the value in the source library. If you do not, the “Quick part” will be disabled – leaving the value as plain text.

Let me know in the comments below if you have questions – and send me a beer form the “beer button” in the right side of the screen if you like and use the solution.

Alexander

Custom form for adding list item with attachments

Change log

March 6, 2018
Clarified the setup instructions as suggested by Rob Mason.

April 5. 2014

Updated to v1.1:
Fixed a bug where “args.listBaseUrl” was missing in the function “submitFile”. This made it impossible to add items to another site than the one you triggered the code on. Thanks to Jean-Jacques for pointing out this bug.

I got this request from Rudolf:

Hi Alexander,

Do you have any idea to solve the following problem I have?

We would like to upload formatted text or binary data from a file as an attachment to with an on the fly create form to enter the comment.
I read your blog to spjs-upload-for-sharepoint-custom-upload-page- ….

We would like to send this the comment and the attachments via a WebService to a SharePoint list to create a list item with attachments loaded.

Best Regards

The solution

I have created this solution that lets you add a list item with one or more attachments from a custom form that you can place anywhere in your SharePoint site.
IMG

You may also be interested in this solution SPJS Upload for SharePoint: Custom upload page for uploading documents to various document libraries in a site collection.

Please note:
* This solution requires you to be logged in with a user with the necessary privileges to add a list item.
* This solution requires IE 10 or above. This may be a problem for users with SharePoint 2007 or 2010 as this versions forces IE 8 mode for newer versions of IE. Change the document mode or use Chrome or Firefox.

How to add this solution to a page

  1. Download jQuery from here. Please note that you should use v1.x as v2.x does NOT support IE versions below 9.
  2. Download spjs_utility.js from here
  3. Download the files spjs_addItemWithAtt.css, spjs_addItemWithAtt.js and spjs_addItemWithAtt_CEWP.txt from here.
  4. Upload all the files but spjs_addItemWithAtt_CEWP.txt to a document library in the site collection, or a folder created using SharePoint Designer on the root of the site collection.
  5. Edit the file spjs_addItemWithAtt_CEWP.txt
    A.
    Update the path to the files you have uploaded

    B. Edit the argument object (starting at spjs.addItemWithAttachment.init({) to create the framework of your form using the guide described below.
    C. Save and Upload the file to the same location as the other files.
    D. Create a CEWP and refer the URL for the .txt file you just edited using the “Content link” option in the CEWP. DO NOT ADD THE CODE DIRECTLY IN THE CEWP AS HTML. You can also use the code directly in a HTML form Web Part in the page where you want the form to appear.

The arguments for the function

You call the function from the CEWP or the HTML Form Web Part using code like this:

spjs.addItemWithAttachment.init({
	"instanceID":"1",
	"listName":"{1a2bb561-c557-4a28-938f-0fb600b136d7}",
	"listBaseUrl":"",
	"header":"Add a comment",
	"text":{
		"saveBtn":"Save",
		"successMsg":"Saved successfully",
		"browserNotSupported":"Your browser is not supported."
	},
	"fields":
		[
			{
				"fin":"Title",
				"label":"Title",
				"type":"text",
				"required":true
			},
			{
				"fin":"Comment",
				"label":"Comment",
				"type":"note",
				"height":"100px",
				"required":true
			},
			{
				"fin":"Priority",
				"label":"Priority",
				"type":"choice",
				"required":true,
				"emptyLabel":"Set priority",
				"choices":[
					{"v":"0","f":"Priority = low"},
					{"v":"1","f":"Priority = med"},
					{"v":"2","f":"Priority = high"}
				]
			}
		],
	"attachements":true,
	"attLabel":"Attachments",
	"multiple":true
});

instanceID

An uniquer id for this instance. If you add more than one form the same page you must change this so that each instance is unique. In the CEWP code you find this div:

<div id="spjs_addItemWithAttachment_instanceID_1"></div>

This corresponds with the instanceID to form an unique placeholder where the custom form will be inserted.

listName

The list GUID or display name of the list to add the list item to.

listBaseUrl

The baseUrl of the site where the list is located. Use “” for the root site, or “/Sites/MySite” for a site named “MySite” on a managed path. This is NOT the URL of the list.

header

This is the text that goes above the form.

text

Various text used in the solution.

fields

Array of objects in this format:

{
"fin":"Title",
"label":"Title",
"type":"text",
"required":true
}

“fin”: The FieldIntenalName of the field in the list you are adding the items to.
“label”: The form label in the custom form you are creating.
“type”: Type of field. Supported types are “text”, “note” and “choice”.
“required”: true or false to control whether the field must be filled or not.

For type = note you have one extra setting

“height”: Sets the height of the textarea in pixels.

For type = choice you have two extra settings

“emptyLabel”: Sets the default value in the dropdown select.
“choices”: Object format like this:

"choices":[
{"v":"0","f":"Priority = low"},
{"v":"1","f":"Priority = med"},
{"v":"2","f":"Priority = high"}
]

“v” is the value to store in the list and “f” is the displayed value in the dropdown select. These two can be the same.

attachements

true or false to allow or disallow attachments.

attLabel

The form label for the attachments.

multiple

true or false to allow for selecting multiple files.

Multiple forms in the same page

To have multiple forms in the same page, repeat the call to “spjs.addItemWithAttachment.init” and change the “instanceID”.

Let me know if you find any bugs, or you have any comments.

Alexander

Make field read-only for other than the author

I got this request from @f_Techno:

@SPJavaScripts hello Alexander, I have task list in sps 2010. I want to dim DueDate after create the task. No one should change it except me.

This snippet must be places in the EditForm of the list or library where you want the field to be readonly. What this code does is to check if the logged in user is the author of the list item, and if not, make the field “StartDate” readonly. You can change the fieldnames in the example to target other fields.

<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">
var thisItemDBdata = spjs_getItemByID({"listName":_spPageContextInfo.pageListId,"id":GetUrlKeyValue("ID"),"viewFields":["Author"]});
if(thisItemDBdata !== null){
	var authorID = thisItemDBdata.Author.split(";#")[0];
	if(_spPageContextInfo.userId.toString() !== authorID){
		var fields = init_fields_v2();
		$(fields["StartDate"]).find("td.ms-formbody").hide().after("<td id='readOnly_StartDate' class='ms-formbody'> </td>");
		$(document).ready(function(){
			// Build the fields object again for SP 2013
			fields = init_fields_v2();
			var sDate = getFieldValue("StartDate");
			$("#readOnly_StartDate").html(sDate);
		});
	}
}
</script>

You find spjs-utiliy.js here.

Please note that this code in for SP 2010 or SP 2013. If you want to use it for SP 2007 you must change “_spPageContextInfo.pageListId” for the list DisplayName or GUID.

For more advanced options, check out Dynamic Forms for SharePoint her.

Alexander