Getting started
User guide
Provisioning forms
Examples
General
Multilingual support
Navigation between forms
Generating PDF documents
Integration with Power Automate
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.
There is nothing difficult in setting up the Lists. Our first List - Categories, only contains Title column:
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:
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.
I’ve created a simple 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:
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
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.
Read more about OData query here.
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:
And here I’ve selected Camera Category:
Learn how to filter lookup results by selected date and time from Conference room reservation system article.