How to link lists across different sites using Lookup control

Data Source

To set the data source for your Lookup control, select it in the Data Source properties.

First, you need to specify the site URL where the source list is located. You can choose any site or site collection within your tenant:

Once you specify the site URL, all available lists and libraries from that site will load.

Select the source list and the field you want displayed in the Lookup control:

Save to

Since it’s a control, not a SharePoint column, its value needs to be saved to a SharePoint single-line text field.

In the control’s settings, find the Save to property. Here, you can either select an existing single-line text column to store the value of the control, or create a new one:

In a list view, the column is rendered as a regular lookup field with the help of a field customizer:

By clicking on the value, you can open a display form of the selected item in a separate tab.

Other properties

Using other control properties, you can:

• Configure how the search within the control is handled using the Operator property

• Allow users to add new values to the source list by enabling Add New property

• Select fields from the source list that also need to be loaded using the Extra Fields/Expand properties.

You can learn more about all available properties on the Lookup control page.

Bind two lists on different sites

Add a Lookup control to your form and select a list from another site as its Data Source.

Create a new field for storing data in the Save To property. Save the form and navigate to the source list.

Display related items on a form

On the source list form, add a List or Library control and specify the list you configured as the data source for the cross-site lookup control:

From Lookup Field dropdown select the field where the Lookup control value is stored:

This way, only related items will be displayed on the form and new items will be automatically bound to the parent item.

You can find more information on designing a form with the related items in our documentation here.

Depends on/Match to

With these properties, you can filter lookup values by Single Line text and Choice fields, and also by single value Lookup or Person fields. You can find instructions on how to configure filtration by different field types in this article.

For instance, you can create cascading dropdowns which source lists are stored on another site.

Let’s say, Office and ConferenceRoom lists are located on the same site - Assets. The conference rooms are linked to the offices using a regular lookup field. On the form, the list of conference rooms should be filtered by the selected office.

First, add two Lookup controls to the form. Name controls accordingly: Office and ConferenceRoom:

Select a data source for both controls:

Next, go to ConferenceRoom control Depends on property and select the Office lookup control:

Then, in the Match to property, select the Office field from the source list. It’s best to match lookups by ID:

And this is how it works on the form:

Programmatic filtration

Use JavaScript to create more complex filter conditions.

For instance, create static filtration of lookup values by two fields.

fd.spRendered(() => {
   fd.control('Control1').filter;
   //Show only active items which Title starts with 'A'
   fd.control('Control1').filter = " startswith(Title, 'A') and Status eq 'Active' "
});

Or allow users to search within two fields dynamically.

fd.spRendered(() => {
   //search within Title and Status
   fd.control('Control1').filter = function(filter) {
      let search = encodeURIComponent(filter);
      return filter
            ? "substringof('" + search + "', Title) or substringof('" + search + "', Status)"
            : '';
   }
   fd.control('Control1').useCustomFilterOnly = true;
});