Image in UX Panel Card (unbound)

[ssmoore1]

Hi Everyone,

I have a mobile dialog panel card where the data is bound to a specific table. On this panel card I would also like to show an image that is stored in another table on the database. But it seems like the only way to show a data bound image is to actually have data binding. But because there is no relation to the other table I can't bind it.

I could obviously populate the text from the other table using the on dialogue initialize and an SQL statement, but that would not be possible with an image (or is it?)

Basically, anyone have any ideas on how to include an image on a panel card from a database table when you can't bind it?

Cheers,

Scott

[-Jinx-]

Re: Image in UX Panel Card (unbound)

So, if there is no relation to the current tables bound to the dialog, how do you decide which image to show? Is it static?

[ssmoore1]

Re: Image in UX Panel Card (unbound)

Good question. But no its not static, I know which record it is based on a session variable.

Cheers,

Scott

[-Jinx-]

Re: Image in UX Panel Card (unbound)

Hmm... Seems like you should be able to do a couple of things then.

There are probably a few ways to do it. The first way that comes to mind is that you could make another UX that only contains that bound image and then populate it by using the session variable as the ID. Then you'd embed that UX into your current one.

I'm sure with a little work and a "lookup" you could get it to come in as well.

[ssmoore1]

Re: Image in UX Panel Card (unbound)

Thanks! Embedded UX did the trick

[Davidk]

Re: Image in UX Panel Card (unbound)

I always wonder how much overhead there is in an Embedded UX. Can't be avoided lots of times... but...

Here's another way of doing this. You don't say how your image is stored... but it doesn't really matter. In this example the image is in a MySQL table, in a Medium Blob field, base64 encoded.

after all the connection and sql select stuff...

dim imageData as c = rs.data(1)
imageData = "data:image/jpeg;base64," + imageData
getImage = "$('DLG1.V.R1.IMAGE_1').src='" + imageData + "';"

It's really just getting the image data and setting the source of the image control. The image control can be the image data bound control or non-data bound control.

If it's stored as binary data then base64Encode it first.

[frankiez]

Re: Image in UX Panel Card (unbound)

My database stores the images in a binary field. Since my mobile app list control returned too many records with images, i needed to decouple the image control from the list / detail view. I opted to show the image on demand in a detail panel. Your code above works only in working preview and live preview modes. My app is not using Phone Gap. Is there a security or syntax distinction when using this code on an IOS device? Thanks in advance.

[frankiez]

Re: Image in UX Panel Card (unbound)

My database stores the images in a binary field. Since my mobile app list control returned too many records with images, i needed to decouple the image control from the list / detail view. I opted to show the image on demand in a detail panel. Your code above works only in working preview and live preview modes. My app is not using Phone Gap. Is there a security or syntax distinction when using this code on an IOS device? Thanks in advance.


Here is my code snippet.
ok = cn.open("::Name::udb")
if ok then
sqlCommand = "Select ReceiptImage from Job.Expense WHERE ExpenseID = :whatExpenseID"
args.add("whatExpenseID",e.dataSubmitted.ExpenseID)
ok = cn.execute(sqlCommand,args )
if ok then
rs = cn.ResultSet
flag=rs.NextRow()
if flag=.T. then
dim imageData as c = base64EnCode(rs.data("ReceiptImage"))
imageData = "data:image/jpeg;base64," + imageData
js = "$('DLG1.V.R1.RECEIPTIMAGE').src='" + imageData + "';"
end if
end if
end if


xbGetReceiptImage = js

return

[frankiez]

Re: Image in UX Panel Card (unbound)

By trial and error, I found the syntax that works on the IOS device.

The code to set the imageData from my binary field in a SQL database.
dim imageData as c = base64EnCode(rs.data("ReceiptImage"))
imageData = "data:image/jpeg;base64," + imageData

The image displays with this syntax.
js = "$('{dialog.ComponentName}.V.R1.RECEIPTIMAGE').src='" + imageData + "';"

This syntax works fine in working / live previews, but the image does not display when executed on the mobile device.
'js = "$('DLG1.V.R1.RECEIPTIMAGE').src='" + imageData + "';"

It would be interesting to understand why the first syntax worked.

[frankiez]

Re: Image in UX Panel Card (unbound)

I determined that my image control was data bound when it should have been a static image control.
This syntax works fine on all devices.
'js = "$('DLG1.V.R1.RECEIPTIMAGE').src='" + imageData + "';"

[Davidk]

Re: Image in UX Panel Card (unbound)

It's always in the details. Glad it worked out. You'll want to change DLG1 to {dialog.ComponentName}.