locked
Full control LightSwitch HTML search RRS feed

  • General discussion

  • I like the looks of the default search bar but I want to have full control over it, including the query it executes.  Fortunately, it's really easy to create your own search bar with the exact same look and feel as the default. 

    Add a local property to the screen of type string, required = false. 

    Drag it onto the designer directly over top of the collection for which it will be the search input. 

    Change the control type to custom control.

    Create a _render function for the control.

    Add this code:

    myapp.BrowseThings.CustomSearch_render = function (element, contentItem) {
        $(element).addClass('msls-vauto msls-control-search');
        var itemTemplate = $('<input class="id-element ui-input-text ui-body-a"' +
            'type="text" placeholder="Search" value="" data-mini="true" data-type="search">');
        itemTemplate.appendTo($(element));
    };

    This will give you a replica of the default search bar.  You can bind this to a string query parameter and have full control over the query, when the value changes, etc. 


    • Edited by Hessc Thursday, January 14, 2016 5:06 PM
    Thursday, January 14, 2016 5:05 PM

All replies

  • Nice Hessc. 

    This indeed gives you more control as a developer.  There would need to be some handling of the query parameter on the server side to replicate the built-in search functionality though.  The built-in search is nice because it does a 'contains' search over several fields but it falls short because it only searches string fields. 

    To give full control to the user, you could bind your search box to a screen property then, onChange, build an OData filter and set the query param in code when ready to execute.

    A while back I spent some time to do a POC of a generic query builder seen here:

    HTML Client: Javascript Apply Filter to Screen Data Collection

    It's not quite done, there are thing I like and others I don't about how I implemented it (knockout app inside LS) and I don't have plans at the moment to finish it, but if you're interested I could try to dig up the code and share.

    HTH,

    Josh

    Friday, January 15, 2016 1:58 PM