Alpha Software Mobile Development Tools:   Alpha Anywhere    |   Alpha TransForm subscribe to our YouTube Channel  Follow Us on LinkedIn  Follow Us on Twitter  Follow Us on Facebook

Announcement

Collapse

The Alpha Software Forum Participation Guidelines

The Alpha Software Forum is a free forum created for Alpha Software Developer Community to ask for help, exchange ideas, and share solutions. Alpha Software strives to create an environment where all members of the community can feel safe to participate. In order to ensure the Alpha Software Forum is a place where all feel welcome, forum participants are expected to behave as follows:
  • Be professional in your conduct
  • Be kind to others
  • Be constructive when giving feedback
  • Be open to new ideas and suggestions
  • Stay on topic


Be sure all comments and threads you post are respectful. Posts that contain any of the following content will be considered a violation of your agreement as a member of the Alpha Software Forum Community and will be moderated:
  • Spam.
  • Vulgar language.
  • Quotes from private conversations without permission, including pricing and other sales related discussions.
  • Personal attacks, insults, or subtle put-downs.
  • Harassment, bullying, threatening, mocking, shaming, or deriding anyone.
  • Sexist, racist, homophobic, transphobic, ableist, or otherwise discriminatory jokes and language.
  • Sexually explicit or violent material, links, or language.
  • Pirated, hacked, or copyright-infringing material.
  • Encouraging of others to engage in the above behaviors.


If a thread or post is found to contain any of the content outlined above, a moderator may choose to take one of the following actions:
  • Remove the Post or Thread - the content is removed from the forum.
  • Place the User in Moderation - all posts and new threads must be approved by a moderator before they are posted.
  • Temporarily Ban the User - user is banned from forum for a period of time.
  • Permanently Ban the User - user is permanently banned from the forum.


Moderators may also rename posts and threads if they are too generic or do not property reflect the content.

Moderators may move threads if they have been posted in the incorrect forum.

Threads/Posts questioning specific moderator decisions or actions (such as "why was a user banned?") are not allowed and will be removed.

The owners of Alpha Software Corporation (Forum Owner) reserve the right to remove, edit, move, or close any thread for any reason; or ban any forum member without notice, reason, or explanation.

Community members are encouraged to click the "Report Post" icon in the lower left of a given post if they feel the post is in violation of the rules. This will alert the Moderators to take a look.

Alpha Software Corporation may amend the guidelines from time to time and may also vary the procedures it sets out where appropriate in a particular case. Your agreement to comply with the guidelines will be deemed agreement to any changes to it.



Bonus TIPS for Successful Posting

Try a Search First
It is highly recommended that a Search be done on your topic before posting, as many questions have been answered in prior posts. As with any search engine, the shorter the search term, the more "hits" will be returned, but the more specific the search term is, the greater the relevance of those "hits". Searching for "table" might well return every message on the board while "tablesum" would greatly restrict the number of messages returned.

When you do post
First, make sure you are posting your question in the correct forum. For example, if you post an issue regarding Desktop applications on the Mobile & Browser Applications board , not only will your question not be seen by the appropriate audience, it may also be removed or relocated.

The more detail you provide about your problem or question, the more likely someone is to understand your request and be able to help. A sample database with a minimum of records (and its support files, zipped together) will make it much easier to diagnose issues with your application. Screen shots of error messages are especially helpful.

When explaining how to reproduce your problem, please be as detailed as possible. Describe every step, click-by-click and keypress-by-keypress. Otherwise when others try to duplicate your problem, they may do something slightly different and end up with different results.

A note about attachments
You may only attach one file to each message. Attachment file size is limited to 2MB. If you need to include several files, you may do so by zipping them into a single archive.

If you forgot to attach your files to your post, please do NOT create a new thread. Instead, reply to your original message and attach the file there.

When attaching screen shots, it is best to attach an image file (.BMP, .JPG, .GIF, .PNG, etc.) or a zip file of several images, as opposed to a Word document containing the screen shots. Because Word documents are prone to viruses, many message board users will not open your Word file, therefore limiting their ability to help you.

Similarly, if you are uploading a zipped archive, you should simply create a .ZIP file and not a self-extracting .EXE as many users will not run your EXE file.
See more
See less

UX panels

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    UX panels

    wondering if someone can take a quick look at this URL:

    https://snap.scansourcesecurity.com/sales.a5w?

    If you click on one of the sales reps, it takes you to a panel with that sales rep info. If you click the return button (may have to shrink screen to see it at the bottom), it takes you back to the initial list. Problem is, the list is now frozen and you can't select anything else unless you refresh the page. Any idea how to fix this?

    One solution I came up with was using location.reload(); on my return button, which does work. Problem is, it is refreshing the page, which is slower than I would like. Is there a better way?

    #2
    Re: UX panels

    Not a lot of info given... but... seems ok to me running on a desktop browser under Chrome. Running this on an Android tablet, under Chrome, I do find that something is wrong with the way you've formatted your rows. I have 3 columns across and 2 rows down. For the 1st row, I need to tap very near the bottom of the row to activate panel change. The 2nd row does not exhibit this. Bouncing back and forth between panels is fine.

    Overall, no frozen List. If you do get a frozen List, then the answer is not to hack around with location.reload(), but to find out why the List control is freezing. Although I doubt it is.

    Comment


      #3
      Re: UX panels

      Works fine for me as well under Chrome.

      Comment


        #4
        Re: UX panels

        Hmm... I am testing on an iphone in Safari and Chrome, and get the same result. I can click on any panel in the list and go to the next screen, but when I return, it's like the list is frozen on one panel. I get a similar effect on my desktop using Chrome where my initial panel is selected, but because I have a mouse, I am at least able to select another panel. I can't seem to make this work on a touch screen. And I agree, location.reload() is not the way to go, but that seems to be the only way I have been able to make this work so far.

        As far as details, I basically have a panelcard 1 and panelcard 2.

        Under list properties, and more events, I've created an on tap event as follows:
        {dialog.object}.panelSetActive('PANELCARD_2', true);

        And then on panelcard 2, I've created a return button with a javacscript tap event:

        {dialog.object}.panelSetActive('PANELCARD_1', true);


        I am also attaching a screenshot that shows my design layout if that helps.

        UX.PNG

        Comment


          #5
          Re: UX panels

          On an iPad,Safari, works fine. Nexus 7, Chrome, works fine. On on iPhone, Safari you have a problem. The List does seem stuck, but taps on a row sometimes produce Email or Call results. Further, swiping Panel1 to the right and allowing it to bounce back "resets" stuff and allows another tap.

          Now... if you rotate to Landscape... no issues... so... based on this you'd have to post your UX to see what's going on. It almost seems as if the row size is an issue. Rows on the Nexus 7, iPad, and iPhone Landscape are large. iPhone Portrait rows are small.

          Comment


            #6
            Re: UX panels

            Here is my UX. Good catch on the landscape mode on the iphone. That does seem to work better. Still not sure why portrait is having trouble. I did some local CSS on the List Properties, maybe there is an issue there somewhere.

            Anyway, if you have a chance to look at this file, I would really appreciate it. Thanks!


            UX.zip

            Comment


              #7
              Re: UX panels

              Could you supply a sales_info.dbf, as well, with a couple of records?

              Comment


                #8
                Re: UX panels

                Absolutely. I have attached it. Also, as a test, I turned off all of the local CSS stuff, and still having the same issue. Maybe something in the sizing is wrong with panelcard2?

                Thanks for the help!

                sales_info.zip

                Comment


                  #9
                  Re: UX panels

                  Thanks for that.

                  Overall, I think you've got a storm of css, Free-form containers, and FlexLayout containers. You're working with a style called GrSNAP... not sure what's in there. You'd need to post that as well.

                  In your List control, you have a Class name set as "{dialog.style}List Item snakingItem". I can see that you've built snakingItem into the List, but are GrSNAPList and GrSNAPItem real classes?

                  For your Call, Email and Return buttons... you've created them, hid them, and then put them into Free-form containers. Why?

                  What's your intention, for example, for the iPhone sized device. You have your local css set up for a width of 98% if on a device of 400px or less. So... you want only 1 "column" per "row"?
                  Yet... the List is set up as Vertical. Shouldn't it be Snaking?

                  You also had a lot of settings doubled up. I can see you were trying to get something to work, but if you're going to set some style of something, make sure it isn't set in multiple places.

                  Attached is my version of your UX. I've stripped out all the Panel Header stuff... you can put that back... I just wanted a clean List to work with. This works on an iPhone up. I added a font-size to your snakingList css so that the font-size would get bigger as the number of "columns" got smaller.

                  The use of @media in your css is really nice... that's a great way to size the List for various devices.
                  Attached Files

                  Comment


                    #10
                    Re: UX panels

                    I've attached the GrSNAP stylesheets.

                    I imported your version of the UX. What is interesting is that I have the same issue with the list getting stuck in portrait mode on my iphone. Do you think maybe some overriding CSS setting is causing this?

                    As far as the GrSNAPList and GrSNAPItem classes being real, not sure. Where do you see those in the List Control? I must be missing it.

                    You asked why I hid the buttons and added free-form containers. I did so based on this Youtube video:

                    https://www.youtube.com/watch?v=SrcboGSBFD8


                    And you asked about vertical vs. snaking. I went that route based on this Youtube video:

                    https://www.youtube.com/watch?v=95gxQlH8auk


                    Not sure if those are good ideas, but that was the basis of what I did.

                    As far as settings doubled up, I'm sure I do. some of my frustration was trying to figure out how to get things to center align. I couldn't seem to make anything center without great difficultly.

                    Thanks again for looking at this.

                    grsnap.zip

                    Comment


                      #11
                      Re: UX panels

                      Understood about the videos. In the List control video, the class is shown as {dialog.Object}ListItem. In the video it "looks" as if there's a space between List and Item, but there really isn't. In your class you have a space... and that's why I was asking... but now understand how it got there. It shouldn't be there.

                      Let's tackle your Call, Email, and Return buttons. I believe they're set too large at 450px and 900px. They just won't fit on an iPhone.
                      The video you refer to is excellent... but not really applicable for Version 12 of Alpha. That's a version 11 video... and although still quite valid I always ask... is there something in Version 12 that has supplanted that theory.

                      Disregarding the possibility of tablets... let's just talk about the iPhone.

                      Change your buttons to a width of 300px. Unhide them. Delete the Free-form container and uncheck Prevent container float on the container surrounding the buttons. This container is set at a width of 100% and Center. Remove the break from the Send Email button. This will now center your buttons on any device... and is much simpler than involving other controls and dealing with float.

                      Comment


                        #12
                        Re: UX panels

                        Ok, I'll work on the buttons. Here is another UX I threw together just as a simple test. I created a panel navigator and two panelcards inside of that. panelcard1 is a list, panel card2 is a button that returns to list. Literally did nothing else, and am still having the same issues with the stuck list in portrait mode on the iphone.

                        https://snap.scansourcesecurity.com/Test.a5w

                        Comment


                          #13
                          Re: UX panels

                          Post your new UX and it's a5w page... something bizarre is going on.

                          Comment


                            #14
                            Re: UX panels

                            Here it is. Thanks!

                            test.zip

                            Comment


                              #15
                              Re: UX panels

                              I ran your new UX and A5W page on my iPhone and found that it renders very, very small and has all sorts of issues.

                              I then edited the UX and selected iOS7 as the Class for the component. I then clicked on Save Page to create a new a5w page for the component and ran that. No issues... properly rendered... all good. Try it... you'll see that it's ok.

                              I think your GrSNAP CSS is all mucked up. Where did you get it?

                              Comment

                              Working...
                              X