Build and Customizing Search or Filter on Senerity Listing

This Article helps to understand how to use Text Input box to search / filter records on listing pages

Senerity Use Text box ( ) to search / filter records on listing page. For Example ProductName in Product Table below.

What if we want to use any other field for searching or multiple fields for searching on listing page?

Sometimes, the name field may not be in the first text column. In such sitation, we have to instruct sergen to use other field or fields for searching on listing page by decorating those fields(s) on ProductRow file by QuickSearch Tag

In below case, ProductName serves as the name field, so we leave it alone. Serenity should look in the Description and SKU areas as well, though. You must do this by include the QuickSearch attribute in these field

public class ProductRow : Row, IIdRow, INameRow
{
    [DisplayName("ProductName"), Size(200), NotNull, QuickSearch]
    public String ProductName
    {
        get { return Fields.ProductName[this]; }
        set { Fields.ProductName[this] = value; }
    }

    [DisplayName("Description"), Size(1000), QuickSearch]
    public String Description
    {
        get { return Fields.Description[this]; }
        set { Fields.Description[this] = value; }
    }

    [DisplayName("SKU"), QuickSearch]
    public String Storyline
    {
        get { return Fields.SKU[this]; }
        set { Fields.SKU[this] = value; }
    }
}

Here
- We added Quick Search Tag on Description and SKU fields

How Senerity Match Serach String?
By default, the QuickSearch attribute uses the contains filter. There are options to make it match only precise values or match by starting with a filter.

public class PurchasesRow : Row, IIdRow, INameRow
{    
    //match by starts with filter 
    [DisplayName("ProductName"), Size(200), NotNull, QuickSearch(SearchType.StartsWith)]
    public String ProductName
    {
        get { return Fields.ProductName[this]; }
        set { Fields.ProductName[this] = value; }
    }


   //match numeric value only
   [DisplayName("Year"), QuickSearch(SearchType.Equals, numericOnly: 1)]
    public Int32? Year
    {
        get { return Fields.Year[this]; }
        set { Fields.Year[this] = value; }
    }
}

It is also feasible to provide the user the choice of the search field she wishes to use.

@Serenity.Decorators.registerClass()
export class ProudctGrid extends Serenity.EntityGrid {

    constructor(container: JQuery) {
        super(container);
    }

    protected getQuickSearchFields():
            Serenity.QuickSearchField[] {
        return [
            { name: "", title: "all" },
            { name: "Description", title: "description" },
            { name: "SKU", title: "sku" },
            { name: "Year", title: "year" }
        ];
    }
}

Here
- Senerity Provide a dropdown in quick search input (all above 4 fields)



Instead of hardcode field name, we can use field names with compile time checked versions
    protected getQuickSearchFields(): Serenity.QuickSearchField[]
    {
        let fld = MovieRow.Fields;
        return [
            { name: "", title: "all" },
            { name: fld.Description, title: "description" },
            { name: fld.SKU, title: "sku" },
            { name: fld.Year, title: "year" }
        ];
    }



We can provide Field Titles (usefull in case of localization)
    protected getQuickSearchFields(): Serenity.QuickSearchField[] {
        let fld = MovieRow.Fields;
        let txt = (s) => Q.text("Db." + 
            MovieRow.localTextPrefix + "." + s).toLowerCase();
        return [
            { name: "", title: "all" },
            { name: fld.Description, title: txt(fld.Description) },
            { name: fld.SKU, title: txt(fld.sku) },
            { name: fld.Year, title: txt(fld.Year) }
        ];
    }