Documentation › Control types in SharePoint Forms › List or Library › Manipulate fields in inline editing mode of List or Library

Manipulate fields in inline editing mode of List or Library

This article demonstrates how to work with the List or Library control in inline editing mode.

Prepopulate fields, set fields based on changes in other fields, and filter lookup fields in a List or Library control.

Prepopulate fields for new records

Populating fields of a new row

Prepopulate the Due Date and Assigned To fields in a new List or Library row with the current form field values.

Use the edit event of the List or Library control to handle switching a row into inline editing mode. To prepopulate fields for new items only, check the form type.

For details, see the List or Library edit event documentation.

// prepopulate fields of a new record
// with the values from the parent form
// when a new item created

fd.spRendered(() => {
    // prepopulate fields of a new record
    // with the values from the parent form
    fd.control('Control1').$on('edit', editData => {
        // check that this is a new record
        if (editData.formType === 'New') {
            // prepopulate due date
            editData.field('TaskDueDate').value = fd.field('TaskDueDate').value;
            // prepopulate AssignedTo field
            editData.field('AssignedTo').ready(() => {
                editData.field('AssignedTo').value = fd.field('AssignedTo').value;
            });
        }
    });
});

Populate fields based on other fields

Populating fields based on other fields

Set the Resolution Date to the current date when a user changes the Status field to Completed.

To handle this, use the edit event of the List or Library control and the change event of the Status field.

fd.spRendered(() => {
    fd.control('Control1').$on('edit', editData => {
        // set Resolutiondate field value when TaskStatus field changes
        editData.field('TaskStatus').$on('change', value => {
            if (value === 'Completed') {
                editData.field('Resolutiondate').value = new Date();
            } else {
                editData.field('Resolutiondate').value = null;
            }
        });
    });
});

Filter lookup fields

Filtering lookup fields

Dynamically filter lookup values in the List or Library control using the edit event. In this example, filter the Office lookup field by the selected City field:

fd.spRendered(() => {
    fd.control('Control1').$on('edit', editData => {
        // filter Office field by City
        editData.field('Office').filter = `City/Id eq '${fd.field('City').value.LookupId}'`;
        editData.field('Office').useCustomFilterOnly = true;
    });
});

Validate fields

Validate fields using the edit event:

fd.spRendered(() => {
    fd.control('Control1').$on('edit', editData => {
        editData.field('Title').addValidator({
            name: 'Title validator',
            error: 'Title must start with a capital letter and contain no special characters',
            validate: value => {
                // check if title starts with a capital letter and contains only letters, numbers, and spaces
                return /^[A-Z][a-zA-Z0-9 ]*$/.test(value);
            }
        });
    });
});

Disable fields

Use the edit event to disable fields in the List or Library control and prevent users from changing column values:

fd.spRendered(() => {
    fd.control('Control1').$on('edit', editData => {
        editData.field('Title').disabled = true;
    });
});