Useful JavaScript functions for SharePoint 2013 List Forms

Useful JavaScript functions for SharePoint 2013 List Forms

The following are useful functions you can use in your SharePoint 2013 OOTB list forms, In order to use these functions you will need to:
A. Make sure you have an updated jQuery reference locally on the form page or globally for your site.
B. Add these functions locally on the form page or globally for your site.
C. Make sure to call these function with a “$( document ).ready()” function.

Here are the functions:

1. Hide a field on a form in New/Edit/Display mode by Title –
{code type=javascript}
function HideFieldOnForm(fieldTitle) {
$(‘h3:contains(“‘ + fieldTitle + ‘”)’).closest(‘tr’).hide();
}
{/code}
2. Show a field on a form in New/Edit/Display mode by Title –
{code type=javascript}
function HideFieldOnForm(fieldTitle) {
$(‘h3:contains(“‘ + fieldTitle + ‘”)’).closest(‘tr’).toggle(“slow”);
}
{/code}
3. Disable a field on a form in New/Edit mode by Title (Of input type – single line of text or multiple line of text) –
{code type=javascript}
function DisableFieldOnForm(fieldTitle) {
$(“input[title*='” + fieldTitle + “‘]”).attr(‘disabled’, ‘disabled’);
}
{/code}


4. Disable a Choice\Lookup Select Box\Drop down type field on a form in New/Edit mode by Title –
{code type=javascript}
function DisableSelectField(fieldTitle) {
$(“select[title*='” + fieldTitle + “‘]”).attr(‘disabled’, ‘disabled’);
}
{/code}
5. Set a Choice\Lookup Select Box\Drop down type field Value on a form in New/Edit mode by Title –
{code type=javascript}
function SetLookupVal(fieldTitle,val) {
$(“select[title*='”+ fieldTitle +”‘]”).val(val);
}
{/code}
6. Hide\Show field when checking\unchecking a Yes\No checkbox –
{code type=javascript}

function HideShowByCheckBox(CheckBoxTitle,FieldToShowAndHide) {
$(“input[title*='”+ CheckBoxTitle +”‘]”).change(function() {
if(this.checked) {
//Uses function number 2 above
ShowfieldDispform(‘”+ FieldToShowAndHide +”‘);
}
else {
//Uses function number 1 above
HideFieldOnForm(‘”+ FieldToShowAndHide +”‘);
}
});
}

{/code}

SharePoint Data View XSLT Tips and Tricks – Limit text field

SharePoint Data View XSLT Tips and Tricks – Limit text field

Here is an XSLT syntax used to limit the number of characters of a text column (in this example the title field), In case the text is more than 50 characters long this function will substring it from the start and up to its last occurrence of a white space and add 3 points after it –
{code type=html}

{/code}

If you don’t mind your text being cut off after the limited number of characters you could use this shorter XSLT syntax –
{code type=html}

{/code}


To count how many characters can fit your designated area you can use this nice online tool.

SharePoint Data View XSLT Tips and Tricks - Limit text field

Ellipsis

This is a cool trick to use, but if your text field should fit into one row only, you shouldn’t bother with it and it will be smarter to use this CSS Truncate String with Ellipsis technique which is supported in almost all browsers (even by IE8 believe it or not!).