Alpha Video Training
Results 1 to 18 of 18

Thread: Unexpected highlighting of some fields in a UX List

  1. #1
    Member
    Real Name
    David Bruck
    Join Date
    Mar 2011
    Location
    Huron, Ohio
    Posts
    220

    Default Unexpected highlighting of some fields in a UX List

    I have a fairly simple UX List in a mobile app that is displaying some fields as being link fields (blue text and underlined), even though they are not. All of the fields are defined as labels and are read only. The backend data is SQL Server 2008 and the field types are nvarchar, and the List is persisted to the FileSystem

    1) this only happens when being run on a iOS or Android device. When it's launched via a web browser, the link format is not displayed
    2) most frequently, this happens to fields where there is a 5 digit number, but not 100% of the time. If you look at the attached example, you will see the value "15101" in the Cone# column 5 times. 4 of the rows are displaying the field with a linked format and 1 of the rows is not
    3) it never happens when there is a alphabetic or special character in the field
    4) when the list is initially opened, all fields display as plain text. After about 5-6 seconds, the fields start changing from plain text in black to the link format, blue and underlined

    Seems to me the OS is interpreting the data and changing the display to show it as a link, but that's just a guess

    I have tried different settings in the List Layout / Data inline style to no avail ex: text-align: center; text-decoration: none; text-transform: none; color: #020202;

    Anyone know how to prevent this unintended link formatting ?

    bearings.PNG

    Build 4548-4950

  2. #2
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    424

    Default Re: Unexpected highlighting of some fields in a UX List

    Quote Originally Posted by ids-dave View Post
    I have a fairly simple UX List in a mobile app that is displaying some fields as being link fields (blue text and underlined), even though they are not. All of the fields are defined as labels and are read only. The backend data is SQL Server 2008 and the field types are nvarchar, and the List is persisted to the FileSystem

    1) this only happens when being run on a iOS or Android device. When it's launched via a web browser, the link format is not displayed
    2) most frequently, this happens to fields where there is a 5 digit number, but not 100% of the time. If you look at the attached example, you will see the value "15101" in the Cone# column 5 times. 4 of the rows are displaying the field with a linked format and 1 of the rows is not
    3) it never happens when there is a alphabetic or special character in the field
    4) when the list is initially opened, all fields display as plain text. After about 5-6 seconds, the fields start changing from plain text in black to the link format, blue and underlined

    Seems to me the OS is interpreting the data and changing the display to show it as a link, but that's just a guess

    I have tried different settings in the List Layout / Data inline style to no avail ex: text-align: center; text-decoration: none; text-transform: none; color: #020202;

    Anyone know how to prevent this unintended link formatting ?

    bearings.PNG

    Build 4548-4950

    It looks like the device is interpreting the number as an area code. What happens when you tap the links?
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  3. #3
    Member
    Real Name
    David Bruck
    Join Date
    Mar 2011
    Location
    Huron, Ohio
    Posts
    220

    Default Re: Unexpected highlighting of some fields in a UX List

    Quote Originally Posted by Beta Spark View Post
    It looks like the device is interpreting the number as an area code. What happens when you tap the links?
    Hi Sarah, nothing happens when you click any of the fields that are underlined and in blue

    any ideas how to force these to stay formatted as a plain text field ?

  4. #4
    "Certified" Alphaholic peteconway's Avatar
    Real Name
    Peter Conway
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    2,555

    Default Re: Unexpected highlighting of some fields in a UX List

    You may have to use the app launcher if your not using phone gap, it looks like Safari is seeing it as a phone number or the like to me.
    Insanity: doing the same thing over and over again and expecting different results.
    Albert Einstein, (attributed)
    US (German-born) physicist (1879 - 1955)

  5. #5
    Member
    Real Name
    David Bruck
    Join Date
    Mar 2011
    Location
    Huron, Ohio
    Posts
    220

    Default Re: Unexpected highlighting of some fields in a UX List

    It is a PhoneGap mobile app and that is when you see the problem.

  6. #6
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,576

    Default Re: Unexpected highlighting of some fields in a UX List

    I seem to remember this being an old problem. What build of PhoneGap Build are you using? You're on a current version of Alpha... so it's not that. I've built an app with you data samples and I'm not seeing this behaviour. I added a Phone Number to the List to ensure it was being treated as a link... but the nvarchar data you're using for Cone # is not. This is PGB cli-6.5.0 and SQL Server 2016 (I don't have 2008 any longer).

    ListLink.PNG

  7. #7
    Member
    Real Name
    David Bruck
    Join Date
    Mar 2011
    Location
    Huron, Ohio
    Posts
    220

    Default Re: Unexpected highlighting of some fields in a UX List

    Quote Originally Posted by Davidk View Post
    I seem to remember this being an old problem. What build of PhoneGap Build are you using? You're on a current version of Alpha... so it's not that. I've built an app with you data samples and I'm not seeing this behaviour. I added a Phone Number to the List to ensure it was being treated as a link... but the nvarchar data you're using for Cone # is not. This is PGB cli-6.5.0 and SQL Server 2016 (I don't have 2008 any longer).

    ListLink.PNG
    I'm using PGB cli-6.5.0 also My version of SQL is 2008 but I doubt that would matter since this is an offline app and the list is set up for persistent.

    Also, the link formatting happens even when the iOS device is in Airplane mode

  8. #8
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    424

    Default Re: Unexpected highlighting of some fields in a UX List

    Quote Originally Posted by ids-dave View Post
    I'm using PGB cli-6.5.0 also My version of SQL is 2008 but I doubt that would matter since this is an offline app and the list is set up for persistent.

    Also, the link formatting happens even when the iOS device is in Airplane mode
    The link highlighting is definitely from the mobile device itself and not PhoneGap or Alpha Anywhere. What is the mobile operating system you are testing this on (the one in the screenshots)?
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  9. #9
    Member
    Real Name
    David Bruck
    Join Date
    Mar 2011
    Location
    Huron, Ohio
    Posts
    220

    Default Re: Unexpected highlighting of some fields in a UX List

    Quote Originally Posted by Beta Spark View Post
    The link highlighting is definitely from the mobile device itself and not PhoneGap or Alpha Anywhere. What is the mobile operating system you are testing this on (the one in the screenshots)?
    seeing it so far on iOS 10.3.3 on both Apple iPhone 6 and 6+ and iPad Air - about 20 other Apple users have reported the same thing and there's a good chance a few of them are running with older versions

    This is not happening on Android

  10. #10
    Member jgrannis's Avatar
    Real Name
    Jeff Grannis
    Join Date
    Apr 2016
    Location
    New Iberia, LA
    Posts
    339

    Default Re: Unexpected highlighting of some fields in a UX List

    Quote Originally Posted by ids-dave View Post
    1) this only happens when being run on a iOS or Android device.
    Interesting that you say that it happens on devices with both iOS and Android.
    To answer the question of whether the device(s) add the formatting or if something PhoneGap related does, I would inspect the source code by connecting the Android device to my machine and look at it through Chrome developer tools. You should see some sort of html/css formatting it that way for some but not the others. The difference should jump out immediately. If there is no html/css (different style being applied to the "link" formatted ones) then it seems like the device (both iOS and Android? I doubt it) is overriding the presentation style.

  11. #11
    Member jgrannis's Avatar
    Real Name
    Jeff Grannis
    Join Date
    Apr 2016
    Location
    New Iberia, LA
    Posts
    339

    Default Re: Unexpected highlighting of some fields in a UX List

    I have a feeling that the OS is seeing the Cone and Cup columns combined and seeing them as phone numbers. However, no link formatting if one of the 2 fields is alphanumeric. I vote that it is definitely OS related.
    I wonder if you could inject some non-visible html in there to stop the OS from misinterpreting the combined columns as something they aren't. Maybe a "  "
    To prove it, just as a test, move the Cup # column to after the Cup O.D. column
    Last edited by jgrannis; 09-01-2017 at 10:36 AM.

  12. #12
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    424

    Default Re: Unexpected highlighting of some fields in a UX List

    Quote Originally Posted by ids-dave View Post
    seeing it so far on iOS 10.3.3 on both Apple iPhone 6 and 6+ and iPad Air - about 20 other Apple users have reported the same thing and there's a good chance a few of them are running with older versions

    This is not happening on Android
    iOS automatically turns data, such as phone numbers and addresses, into hyperlinks in any application for improved accessibility (e.g. to make it easier to get driving directions to an address.) This behavior can be disabled by adding a meta tag to web pages directing the mobile browser to stop.

    PhoneGap build has a setting to disable this behavior (add the meta information.) This setting is exposed in the PhoneGap build settings in Alpha Anywhere.

    In your PhoneGap build configuration, turn off "Detect Data Types" in the advanced iOS settings. You will have to enable advanced options for iOS and redeploy your application.

    disableHighlighting.png

    See the PhoneGap documentation http://docs.phonegap.com/phonegap-bu...ect-data-types for more details.
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  13. #13
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,576

    Default Re: Unexpected highlighting of some fields in a UX List

    I'd like to determine why this is occurring in your app but not in mine. Could you post a sample UX and table... just a few rows? I'll build and test... see if I get the same results. I wouldn't want to turn off data type detection if I didn't have to... although you can compensate for it in the List. Still... turning it off for a test would be interesting.

  14. #14
    Member jgrannis's Avatar
    Real Name
    Jeff Grannis
    Join Date
    Apr 2016
    Location
    New Iberia, LA
    Posts
    339

    Default Re: Unexpected highlighting of some fields in a UX List

    David, you are probably seeing something different because, in your example, you didn't have 2 columns one after the other that when combined make a 10 digit, phone number looking value.

  15. #15
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,576

    Default Re: Unexpected highlighting of some fields in a UX List

    Right... thanks Jeff... isn't iOS a pain sometimes... yikes...

    Here's a simple fix that doesn't seem to hurt anything. Add ‍ to your List Template. It's a Zero Width Joiner... and... iOS seems not to ignore it... because iOS ignored everything else I shoved in there.
    The trick is to make the data seem character-ish.

    ListLink2.PNG

    ListLink3.PNG

  16. #16
    Member
    Real Name
    David Bruck
    Join Date
    Mar 2011
    Location
    Huron, Ohio
    Posts
    220

    Default Re: Unexpected highlighting of some fields in a UX List

    Thanks David, I think that'll do the trick. I'm at the Minot AFB this weekend and will try it next week when I get back to the office. I made a mock up test app and tried the zero width joiner and it solved the link formatting problem and I expect it will do the same on my production app. Will post back with final reults

  17. #17
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    424

    Default Re: Unexpected highlighting of some fields in a UX List

    Hello David,

    I came across some settings in PhoneGap today that reminded me of this issue. There is a "Meta Tags" property in the "Index.HTML Meta Tags" section of the PhoneGap properties. The "Insert..." link at the bottom can be used to add meta tags to disable linking of numeric data types and phone numbers for iOS devices. I think this might have been the setting you needed. See https://www.alphasoftware.com/docume...%20meta%20tags
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  18. #18
    Member
    Real Name
    Sean OKelly
    Join Date
    Sep 2015
    Location
    Charleston, WV
    Posts
    205

    Default Re: Unexpected highlighting of some fields in a UX List

    This is an interesting issue. I've been wrestling with it also. Sometimes IOS applies the formatting and other times it simply ignores it. I think David's fix will work in situations where the app will need to show a telephone number somewhere else and you would still want the user to be able to click it. If there is no other place where you would want the user to click a phone number then you can use the method that Sarah mentioned. What a pain in the arse.

Similar Threads

  1. List Search Highlighting
    By iRadiate in forum Mobile & Browser Applications
    Replies: 1
    Last Post: 04-25-2016, 10:18 AM
  2. UX List row highlighting
    By Peter.Greulich in forum Mobile & Browser Applications
    Replies: 5
    Last Post: 04-08-2016, 04:17 PM
  3. Highlighting row in auto suggest list
    By lilmofo812 in forum Mobile & Browser Applications
    Replies: 0
    Last Post: 04-07-2015, 12:11 PM
  4. Search Highlighting On List Results
    By iRadiate in forum Mobile & Browser Applications
    Replies: 0
    Last Post: 04-30-2014, 09:30 AM
  5. Fields highlighting on their own
    By Jberry in forum Application Server Version 8
    Replies: 4
    Last Post: 02-27-2009, 09:48 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •