How to configure cascading lookup fields in SharePoint form programmatically

With a little bit of JavaScript code, you can configure filter conditions for the lookup, for example, Cascading Lookup fields.

What does that mean? Just to be clear, I am talking about Lookup fields where choosing value in one field, limits available choice in the other field. Lookup filtering can be applied with any data, including values of other fields on the form, not limited to other lookups.

In this example, however, I will show you two Lookup fields on one form - Category and Product, so that the user can only see and choose Products belonging to the selected Category.

Note

You don’t have to use JavaScript for this functionality. Cascading lookups and other filter conditions can also be applied with Depends on property described in more detail in Filter lookup by another field article.

Source Lists
Form Configuration
JavaScript
Result
Examples

Source Lists

There is nothing difficult in setting up the Lists. Our first List - Categories, only contains Title column:

Categories List

Second list needs to be connected to the first List, in order for filtering to work correctly. Easiest way is via Lookup. In our case, Products List has a Lookup to Categories List:

Products List

Finally, you need a third List to create form for. It should include 2 Lookup fields: 1 to Categories List and 1 to Products List.

Orders List

Form Configuration

I’ve created a simple Product Order form:

Product Order form

In order for Lookups to be connected, I only need to change two things. First, I need to select Products Lookup and alter its Extra Fields property:

Extra Fields

It should retrieve ID of the Category Lookup in the Products List, so we can compare it to this form’s selected Category:

Category/Id

I will also need to use Expand property to get access to the Category field in the code:

Here, I just need to add Internal Name of the Lookup field, simple enough:

Category

JavaScript

Note

You can use the same code for the Lookup control, just replace fd.field(‘Lookup’) part with fd.control(‘Lookup’) in your JavaScript code

Last but not least, we use JavaScript in order to apply filtering:

function filterProducts(category) {
    var categoryId = category && category.LookupId || category || null;
    fd.field('Product').filter = 'Category/Id eq ' + categoryId;
    fd.field('Product').refresh();
}

fd.spRendered(function() {
    fd.field('Product').ready(function() {
        //filter Products when Category changes
        fd.field('Category').$on('change', function(value){
            filterProducts(value);
            fd.field('Product').value = null;
        });

        //filter Products when form opens
        fd.field('Category').ready(function(field) {
            filterProducts(field.value);
        });
    });
});

fd.field(‘FieldName’).filter property is an OData $filter query. You can include all kinds of conditions in this query and combine them with and/or operators.

Result

By default, all Products are available in the Products field, but if I choose Category - only products of this particular Category are available.

For example, here is Cell Phone Category:

Phones selected

And here I’ve selected Camera Category:

Cameras selected

Examples

Learn how to filter lookup results by selected date and time from Conference room reservation system article.