none
HTML Client - Populate parameter list from data table RRS feed

  • Question

  • I have a small data entry application written in the LightSwitch HTML Client that is about 95% complete.  The one thing I have left to do is to have a parameter on the screen populated from a data table - at the moment, it's a text entry parameter but I know the users won't be happy with that!

    The problem I have is that I need to search the database based on the text value (the main table is not something I can modify - it's part of a much larger application that isn't under my control).  It would appear that LightSwitch insists on tables having an Id key field with an integer value, and I am unable to create a relationship to this table using the actual text value as it requires the relationship to be mapped on the key field - I have nowhere in the main table to store a copy of the Id, even temporarily.

    So my plan was to create a custom control to generate a dropdown list, iterating through the records in the table programmatically (of which there should never be more than about 30 or so, but probably less, so it should be reasonably fast) and adding them as <option> tags.  This didn't work, I assume because it is loading the data asynchronously so the data isn't available when the _render function is called.

    Can anyone tell me if what I'm trying to do is possible, and if so, how?

    Thanks

    Monday, April 22, 2013 3:44 PM

Answers

  • Hi,

    You're right that data load is synchronous. Assuming that you're using LightSwitch to query for data, if you're loading an entity set or executing a custom query based on an entity set, both of these method will return a Promise object, which you can add a then handler, to be called when the asynchronous load completes. In that method you can populate your <option>.

    For example loading an entity set

        myapp.activeDataWorkspace
            .ApplicationData.Customers.load()
            .then(function onComplete(result) {
                result.results.forEach(function (customer) {
                    // Add <option> based on customer here.
                });
            }, function onError(error) {
                msls.showMessageBox(error, {
                    title: "Error loading customers"
                });
            });

    or executing a custom query built on an entity set

        myapp.activeDataWorkspace
            .ApplicationData.Customers.filter("Country eq 'US'")
            .execute()
            .then(function onComplete(result) {
                result.results.forEach(function (customer) {
                    // Add <option> based on customer here.
                });
            }, function onError(error) {
                msls.showMessageBox(error, {
                    title: "Error loading customers"
                });
            });

    Best regards,
    Huy Nguyen
    • Marked as answer by rokushakubo Tuesday, April 23, 2013 10:38 AM
    Monday, April 22, 2013 4:44 PM

All replies

  • Hi,

    You're right that data load is synchronous. Assuming that you're using LightSwitch to query for data, if you're loading an entity set or executing a custom query based on an entity set, both of these method will return a Promise object, which you can add a then handler, to be called when the asynchronous load completes. In that method you can populate your <option>.

    For example loading an entity set

        myapp.activeDataWorkspace
            .ApplicationData.Customers.load()
            .then(function onComplete(result) {
                result.results.forEach(function (customer) {
                    // Add <option> based on customer here.
                });
            }, function onError(error) {
                msls.showMessageBox(error, {
                    title: "Error loading customers"
                });
            });

    or executing a custom query built on an entity set

        myapp.activeDataWorkspace
            .ApplicationData.Customers.filter("Country eq 'US'")
            .execute()
            .then(function onComplete(result) {
                result.results.forEach(function (customer) {
                    // Add <option> based on customer here.
                });
            }, function onError(error) {
                msls.showMessageBox(error, {
                    title: "Error loading customers"
                });
            });

    Best regards,
    Huy Nguyen
    • Marked as answer by rokushakubo Tuesday, April 23, 2013 10:38 AM
    Monday, April 22, 2013 4:44 PM
  • Thanks again, Huy.  I'll try that tomorrow.  It looks like I was on the right lines with what I was trying to do.

    Would you do that in the _render function?  (Sorry - I'm still getting used to where everything fits in Javascript!!!  :) )

    Monday, April 22, 2013 9:25 PM
  • Yes, it should be called in the same _render method that creates the drop down.

    Tuesday, April 23, 2013 2:16 AM
  • Ok, I've got the list populated now.

    Perhaps my code is wrong (in fact, it probably is!), but when you select something from the dropdown list it does not update the parameter value.  What am I missing?

    The render code I have is:

    myapp.BrowseFilteredQualAims.AwardingBody_render = function (element, contentItem) {
        var html = $("<select name=\"AwardingBody\" id=\"AwardingBody\"><option value=\"\">(Select an Awarding Body)</option></select>");
        $(element).append(html);
    
        myapp.activeDataWorkspace
            .QualAimData.AwardingBodies.load()
            .then(function onComplete(result) {
                result.results.forEach(function (ab) {
                    $('#AwardingBody').append('<option value="' + ab.Name + '">' + ab.Name + '</option>');
                });
            }, function onError(error) {
                msls.showMessageBox(error, { title: "Error loading Awarding Bodies" });
            });
    
    };

    I suspect it may have something to do with the ID property of the select tag as when I look at the HTML generated for other elements on the page, it has some random characters before the property name:

    <select class="id-element" data-mini="true" id="bbdfa845a-TypeOfLearningAim">

    How do I tie the custom control to the parameter so that when I select a value from the listbox it updates the parameter value and the search results on the page?

    Thanks again.

    Gareth

    Tuesday, April 23, 2013 10:14 AM
  • Ok, I think I found it!  I just added this code to the bottom of the _render function:

    $('#AwardingBody').change(function () {
            $('#AwardingBody option:selected').each(function () {
                contentItem.value = $(this).text();
            });
        });

    It seems to work, so that's good enough for me!  :)

    Thanks again for your help, Huy!

    Tuesday, April 23, 2013 10:37 AM
  • This code is very helpful. I used it in my HTML LightSwitch code. It shows all the search lists but is not searchable. Huy, could you please showing me how to make it searchable. Thanks.
    Thursday, September 5, 2013 10:56 PM
  • Hi,

    I'm not sure I understand your need to 'make it searchable'.

    Here's the original question's scenario:

    • Server has a table that has about 30 items.
    • Client will load all 30 items, and create a drop down list (using <select> element) to display them.

    For your scenario, there are two cases I can think of:

    A. You also have a small number of items on the server and can load all of them. You just need to create a searchable list with all the items on the client.

    This is pretty easy, you just need to follow jQuery Mobile API and create a searchable list with 30 list items. I think you can use the 'Filter reveal' list view.

    B. You have many items on the server and cannot load all of them. You want to implement a searchable list on the client that will send queries to the server to update the list.

    This is harder because you will need to execute queries dynamically based on what user typed in. You can see this page for an example. If I have time I can try to write a solution for this.

    Best regards,
    Huy

    Monday, September 9, 2013 4:33 PM
  • Hi Huy,

    Your above codes are very helpful to my LightSwitch HTML Client application. Is it possible to help me writing codes to make it searchable if the table is very big, for example 200000 lines?

    Thanks,

    --Wanda Zeng

    Washington State University

    Thursday, October 31, 2013 6:45 PM