Description

SPListFormUtility is a small JavaScript library, that helps control the appearance and behavior of standart SharePoint list forms.

SPListFormUtility allow you to:
  • set/get fields values on standart SharePoint list forms
  • hide fields
  • disable fields
  • helps control the appearance and behavior of controls (add custom css, modify html and so on)

SPListFormUtility work only with standart SharePoint list item pages:
  • DispForm.aspx
  • EditForm.aspx
  • NewForm.aspx

Characteristic:
  • SharePoint 2010, SharePoint 2013 support
  • jQuery needed
  • use internal fields names (see documentation)
  • automatic detect culture settings for SPFieldDateTime fields

Сurrently supported field types:
  • SPFieldText
  • SPFieldLookup
  • SPFieldLookupMulti (only filterLookupMulti method)
  • SPFieldBoolean
  • SPFieldDateTime
  • SPFieldBusinessData (only setValue method)

Quick start

$(document).ready(function () {
    ExecuteOrDelayUntilScriptLoaded(function () {

        // Title - internal field name
        var field = new Igotta.StandartListFormsUtility.SPFieldText('Title');
        field.setValue('TEST');

    }, "sp.js")
});

Examples

Basic

//
// SPFieldText

// 'Title' - internal field name
var field = new Igotta.StandartListFormsUtility.SPFieldText('Title');

// set value
field.setValue('TEST');

// get value
alert(field.getValue());

// hide all row
field.hide();

// hide control
field.hideDefaultControl();

// disable
field.disable();

// paint control background
var fieldTd = field.getCol();
$(fieldTd).css('background-color', 'red');

// paint control
var fieldControl = field.getControl();
$(fieldControl).css('background-color', 'green');

// get internal name
alert(field.getName());

// get field type, will return 'SPFieldText'
alert(field.getType());


//
// SPFieldLookup

// 'Lookup' - internal field name
field = new Igotta.StandartListFormsUtility.SPFieldLookup('incType');

// set value, 1 - is ID of lookup list element
field.setValue(1);

// get value, return ID of selected list element
console.log(field.getValue());

// make available only elements with specified ids
field.filterLookup([1]);

// clear filter - show all options
field.filterLookupClear();

// set OnChangeHandler
field.setOnChangeHandler(function (senderField) { console.log(senderField.getValue()); });


// all examples for SPFieldText is applicable


//
// SPFieldLookupMulti (currently support only one method - filterLookupMulti)

// 'LookupMulti' - internal filed name
var field = new Igotta.StandartListFormsUtility.SPFieldLookupMulti('LookupMulti');

// make available only elements with specified ids 
field.filterLookupMulti([1, 2, 6]);


//
// SPFieldDateTime (applicable for all cultures)

// 'Date' - internal field name
var field = new Igotta.StandartListFormsUtility.SPFieldDateTime('Date');

// set value
field.setValue(new Date());

// get value, will return Date object
alert(field.getValue());

// all examples for SPFieldText is applicable


//
// SPFieldBoolean

// 'Bool' - internal field name
var field = new Igotta.StandartListFormsUtility.SPFieldBoolean('Bool');

// set value
field.setValue(true);

// get value
alert(field.getValue());

// all examples for SPFieldText is applicable


//
//SPFieldBusinessData (test mode)

// 'Bcs' - internal field name
var field = new Igotta.StandartListFormsUtility.SPFieldBusinessData('Bcs');
field.setValue('entityKey', 'displayText', 'displayBcsFieldName');

Filter lookup field

var field = new Igotta.StandartListFormsUtility.SPFieldLookup('incType');
var idsToShow = [2,4,6];

// show only needed options
field.filterLookup(idsToShow);


// it is posible to show all options (remove filter)
// field.filterLookupClear();

Related drop-down lookup fields

// Show only required subTypes function

var filterSubTypeFieldLookups = function (vehicleTypeField, vehicleTypeSubTypeField, vehicleSubTypes) {
    var selectedTypeId = vehicleTypeField.getValue();


    // get subTypes ids

    var subTypesIdsToShow = [];
    for (var ii in vehicleSubTypes) {
        var supType = vehicleSubTypes[ii];
        if (supType.vehicleType && supType.vehicleType.Id == selectedTypeId) {
            subTypesIdsToShow.push(supType.Id);
        }
    }


    // show only required subTypes

    vehicleTypeSubTypeField.filterLookupClear();
    vehicleTypeSubTypeField.filterLookup(subTypesIdsToShow);
}


// get fields

var vehicleTypeField = new Igotta.StandartListFormsUtility.SPFieldLookup('vehicleType');
var vehicleTypeSubTypeField = new Igotta.StandartListFormsUtility.SPFieldLookup('vehicleTypeSubType');
        

// type-subTypes corelation info (hardcoded for example)

var vehicleSubTypes = [
    {
        Id: 1,
        vehicleType: {  Id: 1 }
    },
    {
        Id: 2,
        vehicleType: { Id: 1 }
    },
    {
        Id: 3,
        vehicleType: { Id: 2 }
    }
];


// filter subType filed first time
filterSubTypeFieldLookups(vehicleTypeField, vehicleTypeSubTypeField, vehicleSubTypes);


// add onChange handler

vehicleTypeField.setOnChangeHandler(function (sender) {
    filterSubTypeFieldLookups(vehicleTypeField, vehicleTypeSubTypeField, vehicleSubTypes);
});

Last edited Jan 11, 2013 at 5:18 AM by alexeybbb, version 12

Comments

sunyifang2005 Dec 13, 2013 at 5:31 AM 
(document.getElementById(input[0].optHid)).value = value;
You may have noticed that there is a serious bug in this code.
when SPFieldLookup when large then 20,

sunyifang2005 Dec 13, 2013 at 5:28 AM 
SPFieldLookup when large then 20,

// set value, 1 - is ID of lookup list element
field.setValue(1);
filed.getValue();

Cannot use! Please have a look