locked
Locate List Item Instead of Filter - LS HTML RRS feed

  • Question

  • I am in a pinch trying to alter behavior of a custom search box on a Browse screen.

    I have a basic Local Property/text box with Parameter Binding to the query on a table.  Naturally, using this as a search function will filter the list on the Browse Screen to only show the matching result.

    Would it be possible to use this property to locate the item in the list, instead of filter the list to only the matching parameter? 

    Scrolling the Browse Screen to the result would be preferred for a particular application.

    There is no existing code for this or I would post what I have so far. The item may not be loaded into the collection when it is searched for, either. So it will need to be loaded or scrolled into view, I am guessing.

    Thank you in advance...


    • Edited by CreedCor Tuesday, May 10, 2016 3:26 PM
    Tuesday, May 10, 2016 3:10 PM

Answers

  • You can also approach this by setting the visual collection selected item to the required record which will select and highlight the correct record, although I do not think that it will automatically scroll down so you may have to write additional code to do that.

    Here is some sample code to set the selected item:

    var customerIdToSelect = 25;
    // loop through Customers visual collection to find specific Customer
    for (var i = 0; i < screen.Customers.data.length; i++) {
        if (screen.Customers.data[i].CustomerId === customerIdToSelect) {
            // customer found, so make it the selectedItem in the visual collection
            screen.Customers.selectedItem = screen.Customers.data[i];
    	break;
        }
    }
    


    Regards, Xander. My Blog

    Monday, May 16, 2016 10:04 PM

All replies

  • Hi CreedCor,

    According to your description, you don't want to refresh the datasource on Browser screen. You just want to highlight the matched items on screen directly, is it right?

    I can implement this requirement in common HTML page with following code. But I don't try it in LightSwitch HTML application before. I will try it in LightSwitch HTML application later. After testing, I will post the test result as soon as possible.

    <style>

        .activerow {

            background-color: yellow;

        }

    </style>

    $(function () { $("#Text1").change(function () { $(".activerow").removeClass("activerow"); var txt = $(this).val(); $("table tr td").each(function () { var index = $(this).html().indexOf(txt); if (index >= 0) { $(this).parent().addClass("activerow") } }) }) })


    Best Regards,
    Weiwei


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    Friday, May 13, 2016 9:45 AM
    Moderator
  • Hello Weiwei,

    Yes, I think that sounds correct. Basically I have a List view on a Browse Screen, with a local property text box which parametizes the List. I need the search box to scroll to the item in the list, even if it is not loaded (paging is enabled) and simply highlight that item.

    I will try this code out.

    Thank you.

    Friday, May 13, 2016 1:44 PM
  • I would suggest that you reconsider the requirement. If the list has so many items that you need paging, it means that you will have to write code that continues to get the next page until the record is found. If you have a very large number of records the performance will not be great, especially with the LightSwitch Table and List controls that swamp the DOM to the point where the screen becomes sluggish. A better approach would simply be to implement your search box as a parameter (like for searching), let the backend perform the search and only display the record(s) that match in the grid. If you absolutely want to do as per your original post them I would suggest looking up the help on the LightSwitch Visual Collection object - from memory there are methods to load the next page... I think there is an article on the lightswitchhelpwebsite.com about custom paging that covers this to some extent.

    Regards, Xander. My Blog

    Friday, May 13, 2016 9:29 PM
  • Hi CreedCor,

    I have tried above code in LightSwitch HTML application and there has some code need to modify.

    First, we need to cancel the databinding between the local property text box and then add a change listener function on the screen created method to monitor the search text box content changed. Following screenshot and sample code are my sample project which implement highlight content on browser screen. Hope it can help you.

    var customerName;
    myapp.BrowseFilterCustomer.created = function (screen) {
        screen.addChangeListener("CustomerCustomerName", function () {
        
            var txt = screen.CustomerCustomerName;
           
    
            $("ul li div div span").each(function () {
                
                var name = $(this).html();
                if (name==txt)
                {
                    $(this).parent().parent().parent().css({
                        "background-color": "red"
                    });
                }
            });
        });
    
    };
    
    myapp.BrowseFilterCustomer.CustomerCustomerName_postRender = function (element, contentItem) {
        customerName = element;
    };

    But this sample is working with browser which is not enabled paging. I agree with novascape's suggestion, if your screen is paging enabled, filter and display the matched items is more applicable, which is more quickly for large number records.

    Best Regards,
    Weiwei


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    Monday, May 16, 2016 3:08 AM
    Moderator
  • I would suggest that you reconsider the requirement. If the list has so many items that you need paging, it means that you will have to write code that continues to get the next page until the record is found. If you have a very large number of records the performance will not be great, especially with the LightSwitch Table and List controls that swamp the DOM to the point where the screen becomes sluggish. A better approach would simply be to implement your search box as a parameter (like for searching), let the backend perform the search and only display the record(s) that match in the grid. If you absolutely want to do as per your original post them I would suggest looking up the help on the LightSwitch Visual Collection object - from memory there are methods to load the next page... I think there is an article on the lightswitchhelpwebsite.com about custom paging that covers this to some extent.

    Regards, Xander. My Blog

    Hello Nova,

    I know it goes against LS behavior, but until I learn enough to move away from LS, I need this project to keep rolling, and really appreciate the support when I need to call on it.

    I do have code to load the next page of results on some of my Browse screens, taken from the Visual Collection object help page that you mentioned. I have ~2400 items in this particular Browse list, which are copied to this table from another table via a Job in SQL. The list items land their when the Job runs, and then users need to be able to locate an item in that list, without filtering the list to only that item.

    So, highlighting a list item via search box instead of filtering is what I will need for the time being. I have removed paging, and while it takes longer than optimum to load the page, I think we can work with that, given the correct functionality elsewhere.

    Monday, May 16, 2016 1:34 PM
  • You can also approach this by setting the visual collection selected item to the required record which will select and highlight the correct record, although I do not think that it will automatically scroll down so you may have to write additional code to do that.

    Here is some sample code to set the selected item:

    var customerIdToSelect = 25;
    // loop through Customers visual collection to find specific Customer
    for (var i = 0; i < screen.Customers.data.length; i++) {
        if (screen.Customers.data[i].CustomerId === customerIdToSelect) {
            // customer found, so make it the selectedItem in the visual collection
            screen.Customers.selectedItem = screen.Customers.data[i];
    	break;
        }
    }
    


    Regards, Xander. My Blog

    Monday, May 16, 2016 10:04 PM