Show more than 15 rows in a Details Picker

Question

As documented here regarding the Lightswitch HTML5 details picker:

Search string on the auto-complete box require a minimum of 3 characters in order to trigger the search operation and first 15 results show up on the results pane. In case a user wishes to see all the entries within an entity (Customer in our case), they can do so by clicking on the ‘+’ button which will bring up the traditional details modal picker dialog.

Is there a way to change the 15 results limitation to a different number?

Answer 1

Whilst the 15 result limit is hard-coded into the LightSwitch library, as Microsoft provide the source code for this library it can easily be revised.

Whilst this type of modification to Microsoft's LightSwitch library isn't uncommon with many of the more advanced LightSwitch developers, if you decide to implement this you'll need to thoroughly test the change for any adverse side effects. Also, if you upgrade your version of LightSwitch, you'll need to repeat the library modification in the new version.

If you'd like to make this change, you'll need to reference the un-minified version of the LightSwitch library by making the following change in your HTML client's default.htm file (to remove the .min from the end of the library script reference):

<!--<script type="text/javascript" src="Scripts/msls-?.?.?.min.js"></script>-->
<script type="text/javascript" src="Scripts/msls-?.?.?.js"></script>

The question marks in the line above will relate to the version of LightSwitch you're using.

Then you'll need to locate and change the hard-coded reference in the Scripts/msls-?.?.?.js file as follows:

        if (applySearchFilter) {
            search = me.search;
            //itemLimit = 15;
            itemLimit = 30;
        }

Alternatively, if you'd like to introduce an element of flexibility into this enhancement, you could instead make the following revision to the Scripts/msls-?.?.?.js file:

        //if (visualCollection._loader._itemLimit !== itemLimit) {
        //    visualCollection._loader._itemLimit = itemLimit;
        //}
        if (!visualCollection._loader._itemLimit) {
            visualCollection._loader._itemLimit = itemLimit;
        }

Then, on a case by case basis, you could implement the following statement in your DetailsPicker's postRender routine:

myapp.AddEditScreen.DetailsPicker_postRender = function (element, contentItem) {
    // Write code here.
    contentItem.choicesSource._loader._itemLimit = 30;
};