List or Library

Important

This control is only available in forms with a direct SharePoint integration.

The List or Library control displays items from another SharePoint list in a table-like view. Users can edit, add, or delete these items. Changes to this list are made only when a user submits the form.

Properties

Learn about the available properties for the List or Library control.

Name

A unique identifier for the control.

The Name property is used in JavaScript to select a specific control.

JavaScript

The Name property allows to work with the control via JavaScript code, like this:

fd.rendered(() => {
    // can access the control using its Name:
    fd.control('Control1');
 });

Editing

Choose how users edit and create items:

With Dialog mode, users modify items in a separate dialog:
With Inline mode, users modify items directly in the List or Library table:

Read-only

Define whether a user can view or edit the contents of the control:

Height

Set the control’s height in pixels. Usually, the control grows in height to show all items on the page, but with defined height the control gets a scrollbar.

Site URL

Enter the relative URL for the site that holds the source list:

List

Select which SharePoint list should be used as a source:

View

Select the list view to display in the control:

Lookup field

Select the Lookup field to use the parent/child relationship between the form’s connected list and the control’s source list.

This property uses a Lookup field from the source list. It can be selected only if it points to the form’s connected list.

When selected, List or Library control uses this Lookup field to filter displayed items:

For regular forms, users can only add new items.
For edit forms, users can also view and edit existing items linked to the parent item.

In both cases, new items are automatically linked to the parent item after a user submits a form.

Hide

Define one or more rules to hide this form element based on form state. To manage these no-code conditions, click the gear icon.

JavaScript framework

In this section, you can find basic examples of how to work with the control using JavaScript.

If you are not familiar with the JavaScript framework, get started with the JavaScript basics.

Note

The control is only accessible once the form is rendered, so all calls to the control must be inside fd.rendered event:

fd.rendered(() => {
    // hide the control
    fd.control('Control1').hidden = true;
    // show the control
    fd.control('Control1').hidden = false;
});

Wait until control is ready

Wait until the control is loaded. The ready method returns a promise that is resolved when the control has been fully initialized and is ready to work with.

fd.rendered(() => {
    fd.control('Control1').ready(dt => {
        // dt parameter is the same as fd.control('Control1')
        console.log('List or Library is initialized');
    });
    // or
    fd.control('Control1').ready().then(dt => {
        // dt parameter is the same as fd.control('Control1')
        console.log('List or Library is initialized');
    });
});

Handle edit event

Execute a function when a control is being edited. This function receives an object with the following properties:

itemId—returns the ID of the current item. Items that aren’t saved to the source list have non-positive IDs.
formType—returns the type of the record:
- New—adding a new item
- Edit—editing an existing item
field('InternalFieldName')—returns the Vue component of the corresponding field control.
rowElement—returns a reference to the row’s HTML element.

// prepopulating Title field of a new record
// in the List or Library control
fd.control('Control1').$on('edit', editData => {
    if (editData.formType === 'New') {
        // set Title field value with the value from the form's DefaultTitle field
        editData.field('Title').value = fd.field('DefaultTitle').value;
    }
});

Handle change event

Execute a function when a control value has been changed. This function receives an object that contains information about the made changes:

type—returns the type of change made to related items.
- add—new item has been created.
- edit—an item has been changed.
- delete—one or more items have been deleted.
itemId—returns the ID of the modified item.
itemIds—returns an array of deleted items.

// display an alert message with ID of the changed item
fd.control('Control1').$on('change', changeData => {
    if (changeData.type === 'edit') {
        alert(changeData.itemId);
    }
});

Make control read-only

Prevent users from editing items in the control.

fd.control('Control1').readonly = true;

Make row read-only

Make a row read-only depending on the column value. Declare a function that receives an object with a row’s column values and returns true if that row that should be read-only.

// disable rows with the status of Completed
fd.control('Control1').readonlyRow = row => {
    return row.Status === 'Completed';
};

// remove function
fd.control('Control1').readonlyRow = null;

Prevent users from selecting items

Make items non-selectable and selectable again.

fd.control('Control1').selectable = false;
fd.control('Control1').selectable = true;

Get selected items

Get an array of currently selected items. This property cannot be used to modify these items.

let selected = fd.control('Control1').selectedItems;