locked
How do I return focus to a details picker control RRS feed

  • Question

  • My goal is to return focus to a picker control using Lightswitch HTML 2013 latest release.

    Here's what I know:

    If I do not attempt to use the _order variable in the initial postRender event but instead use the line:

      setTimeout(function(){$('input',$(element)).focus()},400);

    then the focus does work.

    Also, if I make the OrderDescr control a text field instead of a picker, then the code works as is. Any ideas as to how to get the OrderDescr field picker control to reset focus?

    Here is the code:

    var _order;

    myapp.EditOrder.OrderDescr_postRender =function(element, contentItem) {

       _order = $('input',$(element));

       //this only works if OrderDescr is a textbox (instead of the picker control)

      setTimeout(function(){_order.focus()},400);

    };

    myapp.EditOrder.resetFocus_execute = function(screen){

       //this only works if OrderDescr is a textbox (instead of the picker control)

       _order.focus();

    };

    Wednesday, March 19, 2014 6:54 PM

Answers

  • Try this:

    var _order;
    
    myapp.EditOrder.OrderDescr_postRender = function (element, contentItem) {
        _order = element;
        setTimeout(function () {
            $('input', _order).each(function (idx, elem) {
                elem.focus();
                elem.setSelectionRange(0, 999);
            });
        }, 10);
    };
    
    myapp.EditOrder.resetFocus_execute = function(screen){
        setTimeout(function () {
            $('input', _order).each(function (idx, elem) {
                elem.focus();
            });
        }, 10);
    };

    Works for me on VS2013 + Office Dev Tools March'14 Update.

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    • Marked as answer by MikeLightDev Thursday, March 20, 2014 3:27 PM
    Thursday, March 20, 2014 12:19 PM

All replies

  • Try this:

    var _order;
    
    myapp.EditOrder.OrderDescr_postRender = function (element, contentItem) {
        _order = element;
        setTimeout(function () {
            $('input', _order).each(function (idx, elem) {
                elem.focus();
                elem.setSelectionRange(0, 999);
            });
        }, 10);
    };
    
    myapp.EditOrder.resetFocus_execute = function(screen){
        setTimeout(function () {
            $('input', _order).each(function (idx, elem) {
                elem.focus();
            });
        }, 10);
    };

    Works for me on VS2013 + Office Dev Tools March'14 Update.

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    • Marked as answer by MikeLightDev Thursday, March 20, 2014 3:27 PM
    Thursday, March 20, 2014 12:19 PM
  • This code works perfectly, so I marked it as the answer. Thanks Dave.

    Any ideas on how to get it to work in the beforeApplyChanges event when I return false, as follows:

    myapp.EditOrder.beforeApplyChanges = function(screen) {

        alert("Order not saved");

       //focus no longer works here

       setTimeout(function () {
            $
    ('input', _order).each(function (idx, elem) {
                elem
    .focus();
           
    });
       
    }, 10);

       return false;

    };


    • Edited by MikeLightDev Thursday, March 20, 2014 3:26 PM Code Error
    • Marked as answer by MikeLightDev Thursday, March 20, 2014 3:27 PM
    • Unmarked as answer by MikeLightDev Thursday, March 20, 2014 3:27 PM
    Thursday, March 20, 2014 3:24 PM
  • I think at that point in proceedings the page is read-only, displays the progress animation, and then re-enables sometime later...

    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    Thursday, March 20, 2014 3:28 PM
  • What is the process flow in the EditOrder screen before/after the beforeApplyChanges. Do you have you own custom save button.

    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    Thursday, March 20, 2014 3:43 PM
  • If you are running a custom execute button, like I am, then I would hook on to the saveChanges() promise.

    myapp.EditOrder.Save_execute = function (screen) {
        //alert("Saving changes!");
        screen.details.dataWorkspace.CoronaData.saveChanges().done(
            function () {
                //alert("Changes saved!");
                setTimeout(function () {
                    $('input', _order).each(function (idx, elem) {
                        elem.focus();
                        elem.setSelectionRange(0, 999);
                    });
                }, 10);
            }
        );
    };
    

    .. and at this point I would consider refactoring the code and wrap the setTimeout in a little function, probably finish off with an onError handler too.

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    Thursday, March 20, 2014 4:11 PM
  • Hi Dave,

    Because I end the beforeApplyChanges routine with "return false;", the screen does not attempt to save and therefore does not apply animation.

    My goal in this routine is to replace the Lightswitch error message with my own user friendly message, then to set focus on the control with a missing value  as follows:

    myapp.EditOrder.beforeApplyChanges = function(screen) {

       //Run save if picker control has value

       if(screen.Order.OrderDescr != null) {return};

       alert("Please select an Order Description Type");

        //this focus routine worked in other places but no longer works here

       setTimeout(function () {
            $
    ('input', _order).each(function (idx, elem) {
               elem
    .focus();
            
    });
        
    }, 10); 

    return false;

    };

    Any idea on how I can get the focus back to that control?

    -Mike

    Thursday, March 20, 2014 4:15 PM
  • Hi Mike,

    That code works here for me. Is it a complex screen?

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    Thursday, March 20, 2014 4:45 PM
  • Hi Dave,

    Not sure why it doesn't work for me, as it's a very simple screen. I sure appreciate your help. Thanks.

    - Mike

    Thursday, March 20, 2014 4:57 PM
  • Hi Mike,

    Did you get any further with this? You say the latest HTML VS2013, by this do you mean the March'14 update and have you manually upgraded the project to this new LightSwitch v4.5 type?

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    Monday, March 24, 2014 10:54 AM
  • Hi Dave,

    Yes, I did mean the March 14th update and I did upgrade the project. I never did get the focus to successfully move to the picker field from the screen beforeApplyChanges event. However, your feedback inspired me to write my own custom save button as well. The end result is that I am to bypass the beforeApplyChanges event by error checking in my Save button tap event. Therefore I was able to set the focus on the screen picker using your code example, I like the look of the screen better, and the code is cleaner as well.

    Thanks for your help, the inspiration, and the follow up.

    Be well.

    - Mike

    Tuesday, March 25, 2014 5:00 AM