locked
Isuue when entering text into a "Text Area" (or any other text control) within a "Tile List" control RRS feed

  • Question

  • Hi

    I hadn't noticed this before, but if I enter text into a "Text Area" (or any other text control) within a "Tile List" control, it produces the clicked outcome. This is what I see when I debug the app:

    1. The tile is displayed. 2. I click in the Text Area to add comments and it changes to "Selected" CSS. 3. I type text and it changes to the "Tapped" CSS. 4. I enter a space character and the tile responds to the "Tapped" event.

    How do I correct this so a user can enter text in the field?

    Any advice will be appreciated. Thanks.


    Mark

    Friday, September 20, 2013 6:28 AM

Answers

  • PS: If you have a moment please explain how I can get around the issue where the text control is greyed out the solution created (see screen-shot below).


    Mark

    If a Survey in Surveys has not been selected, any value bound to "Survey.selected" will show up "greyed out".

    When the user clicks the button, you want that to mean they are selecting a Survey.

    When I look at your LightSwitch screen layout I see you have the Survey Comment button outside of the Rows Layout group in the Tile List Control.

    Put the button inside of the Rows Layout group in the Tile List Control, and when the button is clicked, it will also select the Survey you want and set "Survey.selected".

    I ran into this same problem in: JQuery Mobile Tree Using Collapsible Sections and Dynamic Views in LightSwitch.

    I put the Edit Chapter button inside the section that renders a single Chapter:

    So that this code that opens the edit screen will work:

        myapp.AddEditBook.EditChapter_Tap_execute = function (screen) {
        // Set LastChapterOpened
        myapp.LastChapterOpened = screen.Chapters.selectedItem.Id;
    
        // Set the scrollTopPosition
        var scrollTopPosition = $(window).scrollTop();
    
        // Open AddEditChapter screen
        myapp.showAddEditChapter(null, {
            beforeShown: function (AddEditChapterScreen) {
                // Set AddEditChapter to the selected Chapter
                AddEditChapterScreen.Chapter = screen.Chapters.selectedItem;
            },
            afterClosed: function (AddEditChapterScreen, navigationAction) {
                // After the Edit screen is closed 
                // scroll to the saved scrollTopPosition
                $(window).scrollTop(scrollTopPosition);
    
                // Are there any changes ?
                if (navigationAction === msls.NavigateBackAction.commit) {
                    // Refresh Chapter to reflect any changes
                    screen.Chapters.load();
                }
            }
        });
    };


    Unleash the Power - Get the LightSwitch HTML Client book

    http://LightSwitchHelpWebsite.com

    • Marked as answer by ITPSB Monday, September 23, 2013 4:52 AM
    Sunday, September 22, 2013 12:59 PM
  • As Justin says you should probably design your user experience differently. It is optimized for mobile and touch.

    The msls code uses space and enter keys for selection, focus and tap actions, amongst other keyboard/mouse actions. If you want to avoid this you will need to render any editable controls yourself, which is a bind, no pun intended. Your custom controls need to 'eat' the keystrokes (and even mouse actions) by stopping them bubbling up through the DOM to ancestor elements. If that scares you then use a third party control that does exactly what you want, if you can find one.

    My advice is the same as Justin. If at this point you want a much richer HTML experience geared towards that expected in larger form factors, you either do lots of custom coding or use another client development environment. It is promised that it will get better and I am optimistic that it will. Go view the 'town hall' session recording if you want the publically available roadmap.

    If you stick to what the 'mobile client' is good at it is an effective development tool. Some aspects of the OData services and 'Rich Client' are outstanding.


    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 ITPSB Sunday, September 22, 2013 2:20 AM
    Friday, September 20, 2013 9:04 AM

All replies

  • Ooops, 3. is the "Mouse Over" state.

    Mark

    Friday, September 20, 2013 6:40 AM
  • Why are you allowing for editing inside what is essentially a large button? I think you should just be displaying the data in the tile. When you user taps the tile, then pop an edit screen/dialog to allow for changing of the property to which the text area is bound.

    Justin Anderson, LightSwitch Development Team

    Friday, September 20, 2013 7:59 AM
    Moderator
  • As Justin says you should probably design your user experience differently. It is optimized for mobile and touch.

    The msls code uses space and enter keys for selection, focus and tap actions, amongst other keyboard/mouse actions. If you want to avoid this you will need to render any editable controls yourself, which is a bind, no pun intended. Your custom controls need to 'eat' the keystrokes (and even mouse actions) by stopping them bubbling up through the DOM to ancestor elements. If that scares you then use a third party control that does exactly what you want, if you can find one.

    My advice is the same as Justin. If at this point you want a much richer HTML experience geared towards that expected in larger form factors, you either do lots of custom coding or use another client development environment. It is promised that it will get better and I am optimistic that it will. Go view the 'town hall' session recording if you want the publically available roadmap.

    If you stick to what the 'mobile client' is good at it is an effective development tool. Some aspects of the OData services and 'Rich Client' are outstanding.


    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 ITPSB Sunday, September 22, 2013 2:20 AM
    Friday, September 20, 2013 9:04 AM
  • ?Hi Dave

    Thanks for the update.

    I thought embedding the text control so a user didn't have to open and close an extra dialogue was smart ;-)

    Anyway if that's how it works then it's a given and I'll modify my solution as suggested.

    Thanks.

    PS: If you have a moment please explain how I can get around the issue where the text control is greyed out the solution created (see screen-shot below).


    Mark

    Sunday, September 22, 2013 2:19 AM
  • PS: If you have a moment please explain how I can get around the issue where the text control is greyed out the solution created (see screen-shot below).


    Mark

    If a Survey in Surveys has not been selected, any value bound to "Survey.selected" will show up "greyed out".

    When the user clicks the button, you want that to mean they are selecting a Survey.

    When I look at your LightSwitch screen layout I see you have the Survey Comment button outside of the Rows Layout group in the Tile List Control.

    Put the button inside of the Rows Layout group in the Tile List Control, and when the button is clicked, it will also select the Survey you want and set "Survey.selected".

    I ran into this same problem in: JQuery Mobile Tree Using Collapsible Sections and Dynamic Views in LightSwitch.

    I put the Edit Chapter button inside the section that renders a single Chapter:

    So that this code that opens the edit screen will work:

        myapp.AddEditBook.EditChapter_Tap_execute = function (screen) {
        // Set LastChapterOpened
        myapp.LastChapterOpened = screen.Chapters.selectedItem.Id;
    
        // Set the scrollTopPosition
        var scrollTopPosition = $(window).scrollTop();
    
        // Open AddEditChapter screen
        myapp.showAddEditChapter(null, {
            beforeShown: function (AddEditChapterScreen) {
                // Set AddEditChapter to the selected Chapter
                AddEditChapterScreen.Chapter = screen.Chapters.selectedItem;
            },
            afterClosed: function (AddEditChapterScreen, navigationAction) {
                // After the Edit screen is closed 
                // scroll to the saved scrollTopPosition
                $(window).scrollTop(scrollTopPosition);
    
                // Are there any changes ?
                if (navigationAction === msls.NavigateBackAction.commit) {
                    // Refresh Chapter to reflect any changes
                    screen.Chapters.load();
                }
            }
        });
    };


    Unleash the Power - Get the LightSwitch HTML Client book

    http://LightSwitchHelpWebsite.com

    • Marked as answer by ITPSB Monday, September 23, 2013 4:52 AM
    Sunday, September 22, 2013 12:59 PM
  • Hi Michael

    Many thanks for assisting.

    All the best.


    Mark

    Monday, September 23, 2013 4:52 AM