none
After Editing of Item on Browse Page Return Focus and Browser Position to Item RRS feed

  • Question

  • Hi,

    I hope someone can help me out. After I edit a row item on my browse screens and upon exiting or clicking save I would like it to focus back on the list item I last edited. Currently it moves my browser window all the way back up to the top of the page and I have to scroll back down. It does keep the row highlighted I last edited. I just want it to not force the window back up to the top of the list. 

    Any help would be greatly appreciated.

    Thanks,

    Steven Hayes

    Wednesday, May 8, 2013 8:55 PM

Answers

  • Hi Steven,

    Instead of binding the List View's Item Tap to the built in editSelected or viewSelected method, use 'Write my own method' to bind it to a Custom Method. Then you can use jQuery scrollTop to achieve your scenario.

    myapp.BrowseOrders.EditOrder_execute = function (screen) {
        var scrollTopPosition = $(window).scrollTop();
        myapp.showAddEditOrder(screen.Orders.selectedItem, {
            afterClosed: function () {
                $(window).scrollTop(scrollTopPosition);
            }
        });
    };

    The bold parts above will need to be changed to match your application.

    Best regards,
    Huy

    Friday, May 10, 2013 5:31 PM

All replies

  • anyone????
    Friday, May 10, 2013 4:52 PM
  • Hi Steven,

    Instead of binding the List View's Item Tap to the built in editSelected or viewSelected method, use 'Write my own method' to bind it to a Custom Method. Then you can use jQuery scrollTop to achieve your scenario.

    myapp.BrowseOrders.EditOrder_execute = function (screen) {
        var scrollTopPosition = $(window).scrollTop();
        myapp.showAddEditOrder(screen.Orders.selectedItem, {
            afterClosed: function () {
                $(window).scrollTop(scrollTopPosition);
            }
        });
    };

    The bold parts above will need to be changed to match your application.

    Best regards,
    Huy

    Friday, May 10, 2013 5:31 PM
  • Does this put the focus on the last item that was edited or does this just scroll to the top of the screen.

    I am trying to make it scroll down to the last item edited so I don't have to scroll through all the items again to edit the next thing.

    Friday, May 10, 2013 5:38 PM
  • Hi,

    Have you tried it out before asking? :)

    • It does not change the item focus, changing the item focus requires updating the visual collection's selected item.
    • It does not scroll to the top of the screen either. It scrolls to the last known position of the screen, which seems to be what you want.

    Best regards,
    Huy

    Friday, May 10, 2013 5:41 PM
  • Thank you. I will try this out in a couple hours. I really appreciate your help. I will mark this after I test.
    Friday, May 10, 2013 5:43 PM
  • Worked Perfect. Thank you!!!
    Friday, May 10, 2013 7:24 PM
  • Hi quick question. I changed all my buttons over so now all i have is the custom methods for the view and edit screens. Now all the buttons disappeared, if I tell it to show when disabled it shows it but I can't click on it. What would cause this to happen.
    Friday, May 10, 2013 9:31 PM
  • Hi,

    Make sure you don't add a canExecute implementation for your custom methods and not implementing them. For example this is bad.

    myapp.BrowseOrders.EditOrder_canExecute = function (screen) {
    
    };

    Either delete them, or return true somewhere from the method. Otherwise all the time the shell will think the method is disabled. (If you don't need them, remove them).

    Best regards,
    Huy


    Friday, May 10, 2013 9:42 PM
  • Below is my code. I don't have any canExecute functions on the site. I am also logged in as the Admin account.

    /// <reference path="../GeneratedArtifacts/viewModel.js" />
    
    myapp.BrowseAllBills.EditBill_execute = function (screen) {
        // Write code here.
        var scrollTopPosition = $(window).scrollTop();
        myapp.showEditLegislation(screen.nytBills.selectedItem, {
            afterClosed: function () {
                $(window).scrollTop(scrollTopPosition);
            }
        });
    };
    myapp.BrowseAllBills.ViewBill_execute = function (screen) {
        // Write code here.
        var scrollTopPosition = $(window).scrollTop();
        myapp.showViewLegislation(screen.nytBills.selectedItem, {
            afterClosed: function () {
                $(window).scrollTop(scrollTopPosition);
            }
        });
    };

    Friday, May 10, 2013 9:48 PM
  • Hi, in this case, you want to enable the buttons when there's something selected. So try adding

    myapp.BrowseAllBills.EditBill_canExecute = function (screen) {
        return !!screen.nytBills.selectedItem;
    };
    myapp.BrowseAllBills.ViewBill_canExecute = function (screen) {
        return !!screen.nytBills.selectedItem;
    };

    If the methods are still disabled, can you post a screenshot of your screen in the Screen Designer?

    Thanks,
    Huy

    Friday, May 10, 2013 9:58 PM
  • I added the code. Still won't do it for me. Let me know if you need other pictures. Thank you for your help.


    Friday, May 10, 2013 10:09 PM
  • Sorry, the image was resized too small. Can you put the image on skydrive.com or another cloud file service?

    Thanks,
    Huy

    Friday, May 10, 2013 10:12 PM
  • Image on SkyDrive

    There you go. Let me know if you need anything else.


    Friday, May 10, 2013 10:17 PM
  • I could not find anything wrong. Can you:

    • Go to the code editor of BrowseAllBills.js and let me know what the warnings underneath myapp are? There's a squiggly line beneath them.
    • Set breakpoints on the return statement inside _canExecute methods, F5 and let me know if they're hit?

    Thanks,
    Huy


    Friday, May 10, 2013 10:32 PM
  • The warnings are resharper saying i should use window. for it. Shouldn't matter.

    I put the breakpoints on it and it never hit them. 

    But when I put it on debug everything worked. Why would it not work in release?

    Thanks for your help.

    Friday, May 10, 2013 10:37 PM
  • Hi,

    In release mode, user code is compiled into one single file and minified, to reduce the size of files downloading from the server. Only in debug mode, the user code file is separated and can be debugged.

    I believe in release mode there maybe cases when the single user code file is cached by the browser. I would suggest working in Debug mode when you're developing and only switch to Release when you're publishing.

    Anyway, looks like your buttons now is working fine?

    Best regards,
    Huy

    Friday, May 10, 2013 11:27 PM
  • Well in debug they are. But I need to publish this so a team of people can use it tonight. It won't let me publish in debug mode because of the error below and buttons won't work in release mode. I'm not sure what to do from here.

    Also I am trying to upload to Azure Website from my local machine. Image is on Skydrive also.


    Friday, May 10, 2013 11:29 PM
  • If it's working in Debug then it should work in Release. You can:

    • Switch back to Release.
    • F5. Switch focus to IE>
    • On IE, Ctrl + F5 to force a reload of the app. And see if it works.

    For the publish error, it looks like you're specifying a connection string to your local SQL Express Instance (datasource=|SQLExpressInstanceName|...). I don't think it's going to work for Azure. LIGHTSWITCH blog or MSDN help should have samples on how to publish to Azure.

    Best regards,
    Huy

    Friday, May 10, 2013 11:37 PM
  • Hi Huy

    In the code below, the code at the end that is commented out is my attempt to follow your suggestion.

    When I do not comment these lines out, and then test I see "Undefined" as shown in the screen-shot below. I'm not sure where the undefined 

    myapp.ViewStoreGroup.ProductSchematics_ItemTap_execute = function (screen) {
        var currentAction;
        screen.findContentItem("btnShowProducts").isVisible = true;
        screen.findContentItem("ProductsView").isVisible = false;
        screen.TextSeperator = screen.ProductSchematics.selectedItem.Product.Name;
        screen.findContentItem("ActionItemGroup").isVisible = true;
        screen.findContentItem("ActionItem").isVisible = true;
        screen.findContentItem("QuestionsGroup").isVisible = true;
    
        CopyFromProduct = screen.ProductSchematics.selectedItem.Product.Name; // The most recently selected Product
    
        // Construct a query to checking if there are any Actions for this Item
        var ProductFilt = screen.ProductSchematics.selectedItem.Product.Name;
        screen.ActionItem.load().then;
    
        filter = "(Product eq " + msls._toODataString(ProductFilt, ":String") + ") and (surveyId eq " + msls._toODataString(currentSurveyId, ":Int32") + ")";
    
        // Query the database
    
        myapp.activeDataWorkspace.ApplicationData
            .Action
            .filter(filter)
            .execute()
            .then(function (result) {
                // Get the results of the query
                currentAction = result.results[0];
                // If an Action exists show the duplicate button
                if (currentAction == null || currentAction == undefined) {
                    screen.findContentItem("SameActions").isVisible = false;
                }
                else {
                    if (screen.AuditType == "Group Products" || screen.AuditType == "Product Audit Questions") {
                        screen.findContentItem("SameActions").isVisible = true;
                    }
                    else {
                        screen.findContentItem("SameActions").isVisible = false;
                    }
                }
            });
        screen.AuditType = "Product Audit Questions";
        screen.ActionTypeFilter = screen.ProductSchematics.selectedItem.Product.Name;
    //    var scrollTopPosition = $(window).scrollTop();
    //    myapp.showViewStoreGroup(screen.ProductSchematics.selectedItem, {
    //        afterClosed: function () {
    //            $(window).scrollTop(scrollTopPosition);
    //        }
    //    });
    };


    Mark

    Saturday, December 20, 2014 8:22 AM
  • Hi Mark,

    Looks like your screen title was customized to show "... | All Audits", and the first part was data-bound to an object that is undefined. Can you check and see what is the text before "| All Audits" is data-bound to?

    Best regards,
    Huy

    Sunday, December 21, 2014 3:01 PM