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

Mobile App UX - Use Xbasic to update SQL binary field from a data bound image control

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

  • Mobile App UX - Use Xbasic to update SQL binary field from a data bound image control

    Since my Mobile app list control exceeded local storage when the filter returned a large number of records (no error, the filter just stops working), I needed to decouple the image binary data from the list. I unmapped the image control from the list and removed the binary field from the SQL data source. My list filters now work as expected with a much smaller payload.
    When the user taps to view details, I am able to perform an Ajax callback to get the image to be displayed on demand. Here is the code snippet from my xbasic function. This works perfectly and it's very fast.

    dim imageData as c = base64EnCode(rs.data("ReceiptImage"))
    imageData = "data:image/jpeg;base64," + imageData
    js = "$('{dialog.ComponentName}.V.R1.RECEIPTIMAGE').src='" + imageData + "';"

    Now I need to go the other way by capturing an image and writing an xbasic function to update the SQL binary field.

    From my limited knowledge, I know I can extract the image control src property - data:image/jpeg:base64 and update another hidden field with the encoded image data using java script. I was hoping there is an Xbasic function that can reference the e object of the data bound image control and perform an update command.
    Here is the code I started.
    Any advise would be greatly appreciated. Thanks.

    dim blobfile as b
    blobfile = e.dataSubmitted.ReceiptImage ' This is blank even though an image is displayed.
    sqlCommand = "Update Job.Expense Set ReceiptImage=:whatReceiptImage WHERE ExpenseID = :whatExpenseID"
    args.add("whatReceiptImage",blobfile)
    args.add("whatExpenseID",e.dataSubmitted.ExpenseID)
    ok = cn.execute(sqlCommand,args )


    Note: I am using a data bound image control even though it is not mapped to a field in the database.

  • #2
    Re: Mobile App UX - Use Xbasic to update SQL binary field from a data bound image control

    You're using a Static Image Control... aren't you? This stuff gets a bit complex because there are so many options available. You need to clearly define what you mean by "capturing an image". What, exactly, are you using? And with what settings.

    Comment


    • #3
      Re: Mobile App UX - Use Xbasic to update SQL binary field from a data bound image control

      Sorry for not being clear, I am using an "Image - Data Bound" control and the action java script "Image Capture for List Detail View - Camera/Photo Library"
      I removed the binary field from the SQL data source for the list. I can display image using an Ajax callback on demand. I can still capture an image with the action java script. After capturing, I need the xbasic syntax to update the SQL binary field.

      In short, I want my list and detail to view to work as it did when the image was bound to my list/detail view. Now the image is unbound which requires me to explicitly select or update from the database via Ajax. Hope this is a better explanation.

      Comment


      • #4
        Re: Mobile App UX - Use Xbasic to update SQL binary field from a data bound image control

        I thought post was an extension of your other post... where you ended up using a Static Image control.

        Nevertheless, what you're trying to do is an end run around what Alpha has set up. If you've removed the Image field from your SQL source... and you have an Unbound Image - Data Bound control, then you can't use "Image Capture for List Detail View - Camera/Photo Library". This Action won't even open... because you no longer have a Bound Image control for it to work with.

        You need to the "Image Capture - Camera/Photo Library" Action. In its property... "Javascript to execute..." event, you'll see that you get your base64 image data. There isn't any binary data to get... so you'll need to go the base64 route. In this event you can run your Ajax Callback... or run the callback whenever you want to save your data.

        You'll be passing in your base64 data via the Additional Data param of the callback. Then it's a matter of converting to binary and running your SQL Update. You need to trim the data prefix from your src.

        Code:
        dim strPhotoData as c = substr(e.dataSubmitted.imageData,24)
        dim photoData as b = base64decode(strPhotoData)
        In this case I had copied my image data to another field so I'd have it in e.dataSubmitted... but it's not really necessary to do that. Whenever you run your callback to save the image, just grab its base64 data from the image control.

        Comment


        • #5
          Re: Mobile App UX - Use Xbasic to update SQL binary field from a data bound image control

          Thank you David. The code above works perfectly for secondary field I set up up previous to your post to save the base64 data so it was available in the e object. I was just missing the base64decode function.


          just grab its base64 data from the image control.

          Not sure what you mean by the above statement. How do I get the base64 data from the e object in my call back without a secondary control?

          Comment


          • #6
            Re: Mobile App UX - Use Xbasic to update SQL binary field from a data bound image control

            Your Javascript...

            Code:
            var imageCtrl = {dialog.Object}.getPointer('IMAGE');
            var photoData = encodeURIComponent(imageCtrl.src);
            {dialog.object}.ajaxCallback('','','myCallback','','__photoData=' + photoData);
            And then in the callback...

            Code:
            dim photoData as c = urldecode(e.__photoData)
            photoData = substr(photoData,24)
            dim photoDataBin as b = base64decode(photoData)

            Comment


            • #7
              Re: Mobile App UX - Use Xbasic to update SQL binary field from a data bound image control

              Posting a correction. I don't recall having an issue with this before... but the previous code posted just doesn't quite do it. The following works:

              Javascript...

              Code:
              var imageCtrl = {dialog.Object}.getPointer('IMAGE');
              var photoData = imageCtrl.src;
              var photoDataEnc = encodeURIComponent(imageCtrl.src);
              {dialog.object}.ajaxCallback('','','myCallback','','__photoData=' + photoDataEnc);
              Xbasic...

              Code:
              dim photoData as c = e.__photoData
              photoData = substr(photoData,24)
              dim photoDataBin as b = base64decode(photoData)

              Comment


              • #8
                Re: Mobile App UX - Use Xbasic to update SQL binary field from a data bound image control

                The code works perfectly. Although I lost the disconnected feature, I now have a very lean list with minimal payload so users can filter any number of records quickly. The SQL binary images are viewed and updated on demand from an unbound image control. From a user perspective, you would never know the image is decoupled from the list control since the UX behaves exactly as the list / detail view with a data bound image control. This is a key development when balancing the need to minimize data being pulled from the server to the mobile device. I will post my source code later for other users to view.

                Lastly, thank you again for your quick replies and your uncanny ability to understand my issues and communicate the correct solutions.

                Comment


                • #9
                  Re: Mobile App UX - Use Xbasic to update SQL binary field from a data bound image control

                  Excellent... glad it worked out. I think your approach is really good. Use various features together to get the balance you need for what you're doing.

                  Comment


                  • #10
                    Re: Mobile App UX - Use Xbasic to update SQL binary field from a data bound image control

                    I have a list control to view images for related jobs, I never really thought about doing what you have done but it sure does make sense and it is easily understood how much leaner the list control would be without the actual images ALL loading! Nice job, thanks for sharing/posting.
                    NWCOPRO: Nuisance Wildlife Control Software My Application: http://www.nwcopro.com "Without forgetting, we would have no memory at all...now what was I saying?"

                    Comment


                    • #11
                      Re: Mobile App UX - Use Xbasic to update SQL binary field from a data bound image control

                      Thanks for all of the posts. I am trying to follow what is going on here. I see the benefit, however I am not getting the full picture (no pun intended). Does the list show a thumbnail image that is selected to show the whole image? I am not seeing how to do that.
                      Win 10 64 Development, Win 7 64 WAS 11-1, 2, Win 10 64 AA-1,2, MySql, dbForge Studio The Best MySQL GUI Tool IMHO. http://www.devart.com/dbforge/mysql/studio/

                      Comment


                      • #12
                        Re: Mobile App UX - Use Xbasic to update SQL binary field from a data bound image control

                        Another option is the new feature added to the pre-release... Lazy Image Loading. Here's a partial description...
                        A common use case for Lazy Image Loading is when you have a List that displays images that are sourced from a server. If the List has a large number of rows, fetching all of the images from the server will slow down the initial render of the List. However, by implementing Lazy Image Loading, only the images for the rows that are currently scrolled into view will be fetched.

                        Comment


                        • #13
                          Re: Mobile App UX - Use Xbasic to update SQL binary field from a data bound image control

                          My mobile expense app requires an image for all expenses except mileage. There are no thumbnails in the list. The data source for the list does not contain the SQL binary image field. Users can filter any number of records quickly since 30 records with no binary amounted to <2k of data versus around 2.5mb with the binary field. This app is being used by over 100 employees and pulling all that binary data is not an efficient use of the Alpha server. The image control is unbound in the detail view. The Ajax callback to retrieve or update an image is very fast. I will post a Northwind example in the next few days so everyone can see exactly how it works.

                          Note: I lose disconnected functionality but the trade-off is a more efficient mobile app.

                          Comment


                          • #14
                            Re: Mobile App UX - Use Xbasic to update SQL binary field from a data bound image control

                            Thanks for that information. The lazy image feature looks promising for some situations especially for back office using the browser. My mobile app needs to pull all the data since I have client side summary values. If I fetch 20 of x records, the total includes the 20 records only and not the total. In any case, I attached a component using the Northwind SQL database. It's based on the employees table and needs EmployeeID, FirstName, LastName, Country and PhotoImage (binary). My connection string is called Northwind.
                            Some notes about the sample UX. The image is updated immediately in the action java script when the record is being edited. For new records, the code is in the save button since the detail view will not have a primary key until the record is saved. Other issues I struggle with have to do with consistency in validation error handling and the cancel/save enable property. Since the image is unbound, the cancel/save button do not become enabled when I update just the photo. That is why I update it real time. Since the photo is required, my validation just pops up an alert message instead of the under the field in line red message. I know there may be better ways of doing things, but my experience is limited in the web world. Thanks again for all your assistance.
                            Attached Files

                            Comment

                            Working...
                            X