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

[frankiez]

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.

[Davidk]

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.

[frankiez]

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.

[Davidk]

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.

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.

[frankiez]

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?

[Davidk]

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

Your Javascript...

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

And then in the callback...

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

[Davidk]

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...

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

Xbasic...

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

[frankiez]

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.

[Davidk]

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.

[CharlesParker]

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.

[frankbicknell]

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.

[Davidk]

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.

[frankiez]

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.

[frankiez]

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.